Añadir scroll en los gadges (elementos de página)

Hace tiempo explicaba como añadir un scroll a diferentes partes el blog, sin embargo no se mencionó el añadirlo a los  gadget o cualquier elemento de página.
Lo primero de todo es añadir ese gadget, supongamos que se trata de las Etiquetas.
Nos situamos en plantilla edición de HTML y buscamos al final de la plantilla donde dice: <div id='sidebar-wrapper'>

Podría ser que en lugar de Etiquetas añadiéramos cualquier otro título, entonces lo buscaríamos por el título, sería algo así:

<b:widget id='Label12' locked='false' title='Etiquetas' type='Label'/>

Si en lugar de tratarse de las etiquetas se tratara de la Lista de blogs como es el caso de la pregunta de nuestro amigo El club de los Parados lo que haríamos sería buscar:
<b:widget id='BlogList1' locked='false' title='Mi lista de blogs' type='BlogList'/>

La parte que nos interesa de esas líneas no es el título sino la id del gadget, es decir el nombre que Blogger le asigna que sería Label12 para las Etiquetas y BlogList1 para Mi lista de blogs.

Cuando ya sabemos conseguir la id de un gadget nos situamos justo antes de ]]></b:skin> y añadimos:
Para la lista de blogs:

#BlogList1 ul{
height:200px;
overflow:auto;
}

Para las etiquetas:
#Label12 ul{
height:200px;
overflow:auto;
}

-En Label12 ul  mostrará el número que tengamos de etiquetas en este caso 12.

Con height estamos dando una altura máxima al scroll, con overflow en auto conseguimos que las barras sólo se muestren cuando el contenido supere la altura.


Si deseamos añadir color de fondo añadimos background:#000;

#BlogList1 ul{
height:210px;
overflow:auto;
background:#000;
}

Si en lugar de color deseamos que muestre una imagen añadimos background:url(url-imagen);


#BlogList1 ul{
height:210px;
overflow:auto;
background:url (url-imagen);
}

Más sobre scroll:
Scrollbar en el blog
Scroll en cualquier parte
Scroll con barra de color.
Caja de contenido con scroll

0 comentarios:

Publicar un comentario