√ Indice de etiquetas con 2 o 3 columnas e imagen en miniatura.

Hace tiempo vimos como mostrar un Indice de entradas por etiquetas y mas tarde otro Indice responsive para blogger, ahora os voy a mostrar otra forma muy llamativa de mostrarlo y de tenerlo todo muy organizado para que nuestros lectores puedan encontrar con mayor facilidad los temas de su interés, y es ahí cuando en lugar de poner un índice con las últimas entradas en texto la colocaremos de forma gráfica de manera que puedas mostrar las últimas entradas por cada etiqueta que quieras y además mostrar la miniatura de dicho elemento.

VER DEMO

Colocando el Indice en Blogger

Para poner en tu blog este índice de últimas entradas por categorías realizaremos estos sencillos pasos:
1.- Entra en Páginas | página nueva | coloca el título y en forma HTML pega lo siguiente:

<style type="text/css" scoped="scoped">
#feed-list-container{margin-top:0px}
.list-entries{background:white;border:1px solid #d8d8d8}.list-entries ul,.list-entries li{margin:0;padding:0;list-style:none}.list-entries li{padding:1em;border-bottom:1px solid #ddd}.list-entries .main-title{padding:0}.list-entries .main-title h4{display:block;font:inherit;font-weight:bold;padding:.5em 1em;background-color:#4f93c5;color:#fff;margin:0;line-height:normal;font-size:14px;margin-top:0 !important}.list-entries .title a{font-weight:300;font-size:14px;text-decoration:none;line-height:.5em;color:#222}.list-entries .title a:hover{text-decoration:underline;color:#5886a7}.list-entries img,.list-entries .fake-img{border:none;background-color:#333;margin:0 1em 0 0;padding:0;float:left}.list-entries .summary{overflow:hidden;color:#999}.list-entries .more-link{border-bottom:none;}.list-entries .more-link a{display:block;line-height:2em;height:2em;overflow:hidden;text-decoration:none;background-color:#82b965;padding:.5em 1em;position:relative;font-weight:bold;color:white}.list-entries .more-link a:after{content:"";width:0;height:0;position:absolute;top:50%;right:.3em;border:4px solid transparent;border-left-color:white;margin-top:-4px}.list-entries .more-link a:hover{background-color:#71a555}
.list-entries {
margin:5px;
width:180px; /* ancho entradas */
float:left;
font-size:11px;
}</style>

<div id="feed-list-container">
<script type="text/javascript">
var multiFeed = {
feedsUri: [{
name: "NOMBRE A MOSTRAR",
url: "URL DEL BLOG/",
tag: "NOMBRE-ETIQUETA" }, {
name: "NOMBRE A MOSTRAR",
url: "URL DEL BLOG/",
tag: "NOMBRE-ETIQUETA" }, {
name: "NOMBRE A MOSTRAR",
url: "URL DEL BLOG/",
tag: "NOMBRE-ETIQUETA" }, {
name: "NOMBRE A MOSTRAR",
url: "URL DEL BLOG/",
tag: "NOMBRE-ETIQUETA" },{
name: "NOMBRE A MOSTRAR",
url: "URL DEL BLOG/",
tag: "NOMBRE-ETIQUETA" }, {
name: "NOMBRE A MOSTRAR",
url: "URL DEL BLOG/",
tag: "NOMBRE-ETIQUETA" }, {
name: "NOMBRE A MOSTRAR",
url: "URL DEL BLOG/",
tag: "NOMBRE-ETIQUETA" }, {
name: "NOMBRE A MOSTRAR",
url: "URL DEL BLOG/",
tag: "NOMBRE-ETIQUETA" }, {
name: "NOMBRE A MOSTRAR",
url: "URL DEL BLOG/",
tag: "NOMBRE-ETIQUETA" } ],
numPost: 4,
showThumbnail: true,
showSummary: true,
summaryLength: 80,
titleLength: "auto",
thumbSize: 72,
containerId: "feed-list-container",
readMore: {
text: "leer más",
endParam: "?max-results=8" }};
</script>
<script type="text/javascript" src="https://dl.dropbox.com/s/6knm14gfi3et7ju/multifeed.js"></script></div>

Mofificaciones

Ahora solo queda reemplazar estas partes: NOMBRE A MOSTRAR, URL DEL BLOG/, NOMBRE-ETIQUETA.
En NOMBRE-ETIQUETA debemos colocarla tal cual si solo tiene una palabra, si el nombre de la etiqueta es compuesto deberíamos separarla con %20 (ejemplo: trucos%20blog )

Para adaptar las entradas al blog buscamos el ancho del #main-wrapper { width: 600px} (ejemplo) le desquitamos 20 px de cada borde (40px= izq+dercho) más la separación de 10px entre entradas y nos daría un ancho de 550px.

Si queremos mostrar dos entradas en cada línea deberíamos colocar en el ancho entradas: 275px.
Si queremos mostrar tres entradas en cada línea deberíamos sumar 10px más de separación quedando 540px y dividido entre 3 nos daría: 180px.

Si queremos mostrar mas etiquetas solo debemos ir añadiendo lo siguiente, las veces necesarias.

name: "NOMBRE A MOSTRAR",
url: "URL DEL BLOG/",
tag: "NOMBRE-ETIQUETA" }, {