Si alguna vez se desplazó hacia abajo en una página web y un elemento de ella no se movió, habrá sido testigo de la etiqueta de posición CSS en acción. Los blogueros de Tumblr que agregan esta etiqueta a sus plantillas pueden crear el mismo efecto en sus blogs. Un buen lugar para probar esto es en la barra lateral. Después de agregar una etiqueta de posición al código HTML de su blog, su barra lateral permanece fija cuando las personas se desplazan hacia arriba y hacia abajo en las páginas de su blog.
Visita tu panel de Tumblr, luego haz clic en el ícono de configuración y el nombre del blog que te gustaría actualizar. Si solo tiene un blog, haga clic en su nombre.
Haga clic en "Personalizar" seguido de "HTML agregado". Tumblr abre su tema y muestra su código HTML.
Haga clic en cualquier lugar dentro del código y presione "Ctrl-A" seguido de "Ctrl-C" para copiar el código al portapapeles de Windows. Abra un nuevo documento del Bloc de notas y pegue el código en el documento. Estos pasos garantizan que tenga una copia de seguridad de su plantilla original.
Regrese al código HTML de Tumblr y presione "Ctrl-F" para abrir un cuadro de búsqueda. Escribe "barra lateral" en ese cuadro de búsqueda, luego presiona "Enter". Tumblr encuentra la primera aparición de "barra lateral" y muestra la sección de código que contiene esa palabra. El código que encuentre debería tener un aspecto similar al siguiente:
envoltorio # barra lateral {color: {color: Fondo}; }
La primera línea de código contiene las palabras #wrapper #sidebar. Un corchete de la izquierda sigue a esas palabras.
Pegue el siguiente código inmediatamente debajo de la primera línea de código:
posición: fija; derecha: 100px;
El atributo de posición indica a los navegadores que arreglen la barra lateral para que no se mueva cuando se desplaza. El atributo de la derecha le dice a los navegadores cuántos píxeles le gustaría que el borde derecho de la barra lateral se ubicara desde el margen derecho de la página web. En este ejemplo, el atributo correcto tiene un valor de 100 px.
Haga clic en "Actualizar vista previa" para ver una vista previa de sus cambios. Arrastra la barra de desplazamiento de la ventana hacia arriba y hacia abajo y verás que tu barra lateral no se mueve. Haga clic en "Guardar" para guardar sus cambios.
Consejos
Es posible que desee experimentar con diferentes valores para el atributo correcto si desea ajustar la posición horizontal de la barra lateral. Por ejemplo, si cambia el valor de 100px a 50px, la barra lateral se mueve 50 píxeles más hacia la derecha.
Advertencias
Tenga cuidado cuando trabaje en el editor HTML, ya que cambiar accidentalmente el código existente puede tener efectos dramáticos en el diseño de su página. Si modifica el código y no puede averiguar cómo deshacer los cambios, siempre puede eliminar todo en el editor HTML y pegar el código de respaldo que copió en el editor para restaurarlo a su condición original.
