24 mayo 2008

Barra de desplazamiento en el blog

¿Deseas tener una barra de desplazamiento en las entradas o en los laterales?
Este truco llamado Scrollbar que sirve para añadir una barra de desplazamiento a el blog, lo vi en el Blog de Gema, en particular lo utilizo porque también me ayuda a reducir las listas de enlaces que poseo en el blog, pero no solo sirve para reducir sino para las entradas también.


¡Recuerda! "GUARDAR SIEMPRE UNA COPIA DE TU PLANTILLA EN TU PC"



Veamos el truco:



Nos vamos a la edición HTML de la plantilla y buscamos lo siguiente: .post {

De acuerdo a la plantilla que tengas te va aparecer algo parecido a esto:

.post {
margin:.5em 0 0.5em;
border: 2px outset #00BFFF;
height:300px;
overflow:auto;
background:#fff;

O simplemente buscas el área de los post o entradas, lo que aparece en negrita es lo que le vas agregar para que aparezca el truco en el blog. El height:300px es la medida de la barra de desplazamiento para ir viéndolo solo tienes que hacer vista previa y lo vas colocando a tu gusto. Esto va hacer solo para los post.



Ahora la parte de los laterales o sidebar y recuerda que esto va a depender de acuerdo a tu platilla. Buscamos: .sidebar {
Te aparecía algo así:

.sidebar {
height:600px;
overflow:auto;
color: $sidebartextcolor;
line-height: 1.5em;
}

Y le añadiremos lo que esta en negrita y quedaría así:





Pero si quieres añadirlo solo widgets del sidebar lo puedes hacer si tener que poner todo la parte lateral en barra de desplazamiento, solo tenemos que buscar esto:
<div id='sidebar-wrapper'>

Luego veremos algo así:

<b:widget id='HTML7' locked='false' title='' type='HTML'/>

Lo hay que buscar es la "id" de cada widgets que lo que aparece dentro de de las comillas, pero cópialo solo sin las comillas.
Y nos vamos de nuevo a la parte del: .sidebar {

Y agregaremos esto así:

#HTML7{
height:300px;
overflow:auto;
}

Notas:
Recuerde que tiene que el código que aparece depuse de esto id= es lo que vas a añadir pero sin las comillas



Y quieres aplicárselo a los comentarios sígueme:

Nos vamos a la parte de:

#comments {
height:300px;
overflow:auto;
margin:0;
}


Y le añadiremos lo que esta en negritas

6 comentarios:

  1. ohhh yes Antony...he encontrado lo que buscaba jajaja...me recorrí una a una las entrada de Gema y no lo encontré!!!...trataré de hacerlo...besitos buen domingo y una semana genial!!!

    ResponderEliminar
  2. Hola Graciela! Que bueno lo hallas encontrado...

    Saludos!

    ResponderEliminar
  3. Gracias por el tuto esta muy bueno y me sirvio bastante :')

    ResponderEliminar
  4. Hola! Esto me fue muy útil, sin embargo cambie de plantilla y ahora ya no me funcionaron los códigos, espero que puedas ayudarme :)

    ResponderEliminar
  5. Gracias amigo me ayudo mucho, visita mi blog http://raizen-videos.blogspot.com/

    ResponderEliminar

¡Gracias por comentarme! No modero los comentarios porque me parece tentar contra la libertad de expresión de cada individuo, por eso le pido que no hacer comentarios con palabras obscenas, si vas a comentar como Anónimo por favor coloca tu nombre o cualquier apodo. ¡Gracias!