Hosting en inglés

alojamiento web con Webhostinghub
Hosting SSD con Raiola

¿Cómo personalizar la nube de etiquetas en Blogger?

La nube de etiquetas le permite a los usuarios emplear un menú dinámico, y se ha convertido en un añadido bastante popular en los sitios web. En este sencillo tutorial se muestra como personalizar el menú de etiquetas en Blogger de tal forma que las etiquetas son mostradas en forma de bloques en lugar de una nube aleatoria.

  • Ingresar a Dashboard > Settings > Layouts.
  • Hacer click en Add a Gadget > Labels.
  • Seleccionar Cloud Display una vez que se muestra la ventana de configuración del Gadget.
  • En la misma ventana debemos elegir mostrar como máximo 25 etiquetas ya que si se despliegan demasiado se verá saturado.
  • Salvar la configuración del widget.
  • Ir a Settings > Template.
  • Respaldar la plantilla.
  • Hacer click en Edit HTML > Proceed y buscar el código ]]></b:skin>. 
  • Pegar el siguiente código abajo de ]]></b:skin>:
/*-----Custom Labels Cloud widget by www.MyBloggerTricks.com----*/
.label-size{ 
margin:0 2px 6px 0; 
padding: 3px; 
text-transform: uppercase; 
border: solid 1px #C6C6C6; 
border-radius: 3px; 
float:left; 
text-decoration:none; 
font-size:10px; 
color:#666; 
}

.label-size:hover { 
border:1px solid #6BB5FF; 
text-decoration: none;
-moz-transition: all 0.5s ease-out;  
-o-transition: all 0.5s ease-out;  
-webkit-transition: all 0.5s ease-out;  
-ms-transition: all 0.5s ease-out;  
transition: all 0.5s ease-out; 
-moz-transform: rotate(7deg);  
-o-transform: rotate(7deg);  
-webkit-transform: rotate(7deg);  
-ms-transform: rotate(7deg);  
transform: rotate(7deg);  
filter: progid:DXImageTransform.Microsoft.Matrix( 
 M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand'); 
zoom: 1;  
}

.label-size a  { 
text-transform: uppercase; 
float:left; 
text-decoration: none; 
}
.label-size a:hover  { 
text-decoration: none; 
}
  • Salvar la plantilla.

Si quieren que los cuadros de las etiquetas tengan tamaños aleatorios solamente borren font-size:10px: del código provisto anteriormente.

 

Más Trucos Blogger


SUSCRÍBETE SIN COSTO ALGUNO A NUESTRO BOLETÍN

Escribe tú correo electrónico:

Recibe contenido de este sitio sin costo alguno en tu e-mail. Solamente enviaremos los últimos artículos de Internetrcc, sin ningún tipo de spam

Acelera tu sitio

2 comments to ¿Cómo personalizar la nube de etiquetas en Blogger?

Leave a Reply