Insertar una barra lateral en un tema en Tumblrsidebar {

La adición de una barra lateral a su empresa Tumblr beneficia el tema al proporcionar información adicional sobre su empresa, enlaces salientes a organizaciones asociadas o sitios web relacionados o un campo de búsqueda para encontrar contenido específico en el sitio. Muchos temas están diseñados para admitir una barra lateral, pero también puede insertar uno en su tema utilizando el editor HTML de Tumblr. Crear su propia barra lateral con un editor de texto y diseñarla con CSS le brinda un control completo sobre sus funciones y apariencia, lo que le permite hacer coincidir con mayor precisión su apariencia con la identidad de su empresa.

Escribir y aplicar estilo al marcado de la barra lateral

1

Decida qué desea que aparezca en su barra lateral y escriba un borrador del contenido de la barra lateral en un documento de texto sin formato para su uso posterior.

2

Cree un nuevo documento HTML con etiquetas para diseñar con su aplicación de edición de texto. La estructura de la página HTML5 debería tener el siguiente aspecto:

3

Inserte una etiqueta lateral con una "barra lateral" de identificación en el cuerpo del documento HTML5. La etiqueta de lado debe verse así:

4

Copie el contenido que compuso anteriormente para su barra lateral y péguelo en la etiqueta de lado.

5

Utilice el marcado que cumpla con los estándares para convertir el contenido de su barra lateral a HTML5. Por ejemplo, incluya encabezados dentro de etiquetas de encabezado, contenido de párrafo dentro de etiquetas de párrafo y encierre el texto del vínculo en etiquetas de anclaje con referencias de hipervínculo. Consulte una guía de referencia HTML si no está seguro de cómo funciona esto (consulte Recursos).

6

Guarde el archivo como un documento HTML en su escritorio

7

Abra su navegador web, seleccione "Archivo", haga clic en "Abrir" y seleccione el documento HTML que guardó en su escritorio. Su navegador muestra su barra lateral sin estilo.

8

Regrese a su editor de texto, coloque el cursor entre las etiquetas de estilo y aplique el estilo a su marcado confiando en el selector "#sidebar" para apuntar a su barra lateral. La forma en que diseñe la barra lateral dependerá en gran medida de sus gustos, el diseño de su tema de Tumblr existente y el marcado en su barra lateral. Utilice una guía de referencia de CSS3 para asegurarse de que está componiendo las propiedades y sus valores correctamente (consulte Recursos).

9

Decida si desea que su barra lateral esté a la izquierda o a la derecha y asigne una propiedad flotante en consecuencia. Por ejemplo, si desea que la barra lateral esté a la izquierda del contenido principal, el selector "#sidebar", la propiedad flotante y el valor se verían así:

barra lateral {

flotador izquierdo;

}

10

Pruebe la apariencia de su barra lateral haciendo clic en actualizar en su navegador y continúe ajustando el estilo de su marcado hasta que esté satisfecho con su apariencia.

Inserta la barra lateral en tu tema de Tumblr

1

Inicie sesión en su panel de Tumblr, haga clic en el título de su blog en la barra lateral derecha, haga clic en "Personalizar" y haga clic en "Editar HTML" para abrir el editor de código fuente de Tumblr.

2

Copie el CSS de su documento HTML abierto y péguelo al final de la región de estilo de su tema de Tumblr.

3

Busque el selector de CSS para su región de contenido principal en el editor de Tumblr, coloque el cursor después del corchete y asigne la misma propiedad flotante y valor que su barra lateral. Por ejemplo, si su barra lateral debe aparecer a la derecha, asigne una propiedad flotante con un valor de "derecha" al selector de contenedor.

4

Copie la etiqueta aparte y su contenido de su editor de texto y péguela en la etiqueta del cuerpo de su tema de Tumblr. Si desea que la barra lateral aparezca a la derecha del contenido principal, colóquela después de ese contenedor; si desea que aparezca a la izquierda, péguelo antes del contenedor principal.

5

Haga clic en "Actualizar vista previa", haga clic en "Apariencia" y haga clic en el botón "Guardar" para finalizar los cambios que realizó en su tema.