Tutorial: Entradas Populares Multicoloridas.

Hoy os voy a enseñar un tuto bien conocido (o no). Se trata de las Entradas Populares Multicoloridas. Si buscáis este tutorial en internet veréis que es un poco complicado ya que el código es muy largo ~~(Pues hay que entrar en la plantilla y añadir una nueva Variable despues anadir algunos CSS y por último añadir un nuevo widget id='PopularPosts1.)~~ y es necesario tener algún conocimiento de HTML para insertar estes códigos.
Pero como soy muy buena y me encanta ayudaros. Lo que hice fue simplificar al máximo el codigo. Este efecto consiste en transformar el gadget de entradas populares de manera que en lugar del típico blogroll, se vean unas barras de distintos colores y tamaños que contendrán solamente el título del post.

Primer Paso Añadir el Gadget Entradas PopularesLo que haremos será añadir el gadget de entradas populares en la plantilla. Sigue los siguientes pasos
1 - Entra en Diseño | Añadir un gadget de Entradas Populares Live Preview2 - Atención: En el gadget de entradas Populares tenéis que seleccionar
un máximo de 5 entrada a mostrar Live Preview

Segundo Paso - Anadir el CSS en la Plantilla
Opción 1 - Poner el Css en la plantilla
Ahora Para poner el Css sólo Entra en Plantilla | Edición de Html y antes de ]]></b:skin> pega el código abajo.
#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{ background: #fa4242; font-size:12px;color:#fff;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{ background: #fdc274; font-size:12px;color:#fff ;width:85%}#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{ background: #c4d7d5; font-size:12px;color:#fff;width:80%}#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{ background: #c0c1a1; font-size:12px;color:#fff;width:75%}#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{ background: #fccac1; font-size:12px;color:#fff;width:70%}#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,#PopularPosts1 ul li:first-child + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
Dentro del código verás lo que está resaltado de azul: Son los colores de cada Barra: Puedes personalizar cada barra con el color que queráis. Ejemplo: La propiedad background describe el color #fccac1 de fondo de los elementos.
Os dejo aquí el link de una Tabla de colores HTML. Escoge los colores que mas te guste y cámbialos.

Opción 2 - Poner el Css en un gadget Html
Para que tengáis una idea os dejo abajo algunos modelos personalizados por mi, Esta es la opción mas fácil ya que lo único que tenéis que hacer es..
Entrar en Diseño | Añadir un gadget HTML/Javascript y pegar el código del modelo que mas os guste:

Modelo Entradas Populares 1