23 noviembre 2014

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

entradas por etiquetas

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.



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" }, {


Escrito por:

Mi nombre es Antonio, soy sobre todo Sevillista y apasionado con los blog desde el 2007.

Sígueme en: | Facebook | Twitter | Google+

10 comentarios

Eres un maestro y es un placer ver a gente que aporta.

Un saludo del equipo GOL&PUNTO.

¡Saludos! Nos gusta la propuesta y la intentamos poner en práctica en nuestro blog, pero no nos está dando resultados. Hicimos varios intentos en nuestro blog de pruebas y ninguno nos resultó. Estamos siguiendo al pie de la letra las instrucciones: [1]. Copiar y pegar (formato HTML) en una nueva página de nuestro blog el código arriba indicado. [2]. Ingresar tanto el nombre de la etiqueta como la dirección del blog en cada una de las cajas a mostrar. ¿Qué pudiéramos estar haciendo mal? ¿Qué otras acciones nos puede recomendar? Gracias anticipadas por las orientaciones que nos pueda brindar. =)

Yonathan, algo debes estar colocando mal, déjame url de donde lo tienes colocado y te comento.
De todas formas te dejo una prueba preparada para tu blog, haber que tal.
VER PRUEBA

Estimado, muchas gracias por el código de prueba. Lo tomé, lo implementé y funcionó. Modifiqué el número de post a mostrar y también funciona a la perfección. Los inconvenientes que ahora tengo son los siguientes: [1] Incluí más etiquetas y no se están mostrando. [2] Los títulos de los post no están apareciendo, sólo se muestran algunos números. No he tocado nada más del código. ¿Qué me recomiendas hacer para corregirlo? Te dejo aquí enlace directo: http://t-applicada.blogspot.com/p/content.html

Yonathan, en mi blog de pruebas he incluido más etiquetas tuyas y se muestran todas.
Lo de los títulos de los post los toma automaticamente del feed.
La verdad es que no se porque te muestra solo el principio del título.
Una cosa que si te recomendaría es que no le coloques tantas etiquetas a las entradas porque hay algunas que llevan hasta 6 etiquetas.

Ejemplo: Cómo bloquear lo que no quieres ver en redes sociales

Etiquetas: Aplicaciones , Facebook , Privacidad , Redes Sociales , seguridad , Social Media , Twitter

No sería más fácil colocarle una sola etiqueta, ejemplo : redes sociales

Me gusta la sugerencia de las etiquetas en los post. Efectivamente hay muchas. Iré reduciendo y colocando las estrictamente necesarias. También ya he ido modificando algunos parámetros y se va acomodando el contenido de las cajas. Sólo me queda descubrir por qué no se están mostrando las nuevas etiqueta que he incluido. Igualmente, me queda por descubrir cómo cambiar el tamaño del texto de los títulos de las entradas. ¡Sigo aprendiendo! Gracias por el aporte y la buena disposición para ayudar. Siempre es bueno recibir apoyo de los que más saben. Seguimos en contacto. ¡Feliz viernes! =)

Genial este truco, una maravilla. Lo tengo puesto en la portada del blog, con algunas etiquetas, a modo de secciones más importantes. Gracias

Hola
He realizado todos los pasos que indicas. Y no aprecio ningun cambio en el blog. O quizas me he confundido, porque no veo ninguna caja de busqueda. De todas formas te dejo el comentario por si me pudieras ayudar.
Un saludo

Hola!
Justo esto es lo que estoy buscando! Y para variar, demuestro lo torpe, muy torpe , que soy con estas cosas y no consigo hacer nada.
En mi blog quiero hacer eso para cada parte de mi menú (que me costó hacer dos semanas :( ) que tiene desplegable.
¿Podrías ayudarme? Muchísimas gracias anticipadas.
Un cordial saludo


Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"