Si alguna vez se desplazó hacia abajo en una página web y un elemento no se movió ha sido testigo de la etiqueta de posición CSS en acción. Los bloggers 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 su 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.
Visite su tablero de Tumblr luego haga clic en el icono de configuración y el nombre del blog que ' Me 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 en el portapapeles de Windows. Abra un nuevo documento de Bloc de notas y pegue el código en el documento. Estos pasos aseguran 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 debe ser similar al siguiente:
wrapper #sidebar {color: {color: Background}; }
La primera línea de código contiene las palabras #wrapper #sidebar. Un corchete izquierdo sigue esas palabras.
Pegue el siguiente código inmediatamente debajo de la primera línea de código:
posición: fijo; derecha: 100px;
El atributo de posición indica a los navegadores que arreglen la barra lateral para que no se mueva al desplazarse. El atributo correcto indica a los navegadores cuántos píxeles desea que se asienten en el borde derecho de la barra lateral 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. Arrastre la barra de desplazamiento de la ventana hacia arriba y hacia abajo y verá que su barra lateral no se mueve. Haga clic en "Guardar" para guardar los cambios.
Consejos
Si desea ajustar la posición horizontal de la barra lateral puede experimentar con diferentes valores para el atributo correcto. Por ejemplo si cambia el valor de 100px a 50px la barra lateral se mueve más a la derecha en 50 píxeles.
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 descubrir cómo deshacer los cambios siempre puede eliminar todo en el editor HTML y pegar el código de copia de seguridad que copió en el editor para restaurarlo a su estado original.