Etiquetas divididas en 4 columnas arriba de las entradas

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Etiquetas divididas en cuatro columnas encima del bloque de entradas

Previamente vimos el truco para incluir las etiquetas divididas en cuatro columnas encima del pié del blog.

Son bastantes las personas que me preguntaron cómo hacer dicho truco pero, en lugar de incluir las columnas encima del pié del blog, insertarlas encima del bloque de las entradas (main-wrapper).

Diseño>edición HTML>expandimos artilugios

Busca la etiqueta ]]></b:skin> y encima añade estos bloques de CSS:

#etiquetasbloque {
width:870px;
text-align:left;
margin:0 auto 10px;
line-height: 1.6em;
clear:both;
padding-top: 12px;
}

.etiqueta {
color: #000000;
line-height: 1.5em;
}

.etiqueta .widget {
padding:0 0 1.5em;
margin:0 .4em 1.5em .4em;
}

.etiqueta ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.etiqueta ul li {
float:left;
list-style-type: none;
width:20%;
margin: 0 0 5px;
background: transparent url(http://www.iconfinder.net/data/icons/silk2/bullet_green.png) no-repeat left center;
padding-left: 15px;
}

.etiqueta:hover {
color: #999999;
}

Ahora busca esta línea:

<div id='main-wrapper'>

Y encima agrega lo siguiente:

<div id='etiquetasbloque'>
<b:section class='etiqueta' id='etiqueta'>
<b:widget id='Label112' locked='false' title='Etiquetas' type='Label'>
</b:widget>
</b:section>
</div>

Nota:

En el primer paso, debes pegar los bloques de CSS que darán estilo a las columnas. Si realizaste el truco de las etiquetas divididas en cuatro columnas encima del pié del blog, no será necesario que los introduzcas de nuevo.