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://2cd2e6bd6df053a80ac331ad9c3223fc430652d4.googledrive.com/host/0BwZ7Sm1QQc1lTnlVZG1DS3V0N3c/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" }, {