Un gadget muy útil para aumentar la cantidad de páginas vistas es añadir el gadget de entradas relacionadas con miniaturas (thumbnails) a Blogger
Añadir el gadget de entradas relacionadas con miniaturas a Blogger es muy sencillo y configurable, lo puedes hacer en dos simples pasos:
Para no recargar la portada del blog las entrdas relacionadas se ven sólo en las entradas individuales.
Notas:
* Si quieres cambiar el número de post relacionados busca la siguiente línea en el código: var maxresults=5 y remplaza 5 por el número de entradas que quieres mostrar.
* Puedes modificar en donde dice var relatedpoststitle="Entradas relacionadas";/ cambiando "Entradas relacionadas" por el texto que tu quieras.
* Tienes que tener etiquetas en tus entradas para que el gadget funcione.
* El código JavaScript que hace que el gadget funcione es el siguiente, si quieres respaldarlo o subirlo a tu host lo puedes descargar desde aquí.
Actualización:
25/7/11: Modificación del código para hacerlo compatible con más plantillas de Blogger. Si ya has probado el código y no te ha dado resultado te recomiento que lo intentes ahora con los nuevos cambios.
1)
En diseño >> Edición HTML selecciona la casilla "Expandir plantillas de artilugios" y pega el siguiente código justo antes de </head>2)
Ahora búsca la siguiente línea: <div class='post-footer-line post-footer-line-1'> y pega justo debajo el siguiente código y guarda los cambios (si no está prueba con esta otra: <p class='post-footer-line post-footer-line-1'>):<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="Entradas relacionadas";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
Para no recargar la portada del blog las entrdas relacionadas se ven sólo en las entradas individuales.
Notas:
* Si quieres cambiar el número de post relacionados busca la siguiente línea en el código: var maxresults=5 y remplaza 5 por el número de entradas que quieres mostrar.
* Puedes modificar en donde dice var relatedpoststitle="Entradas relacionadas";/ cambiando "Entradas relacionadas" por el texto que tu quieras.
* Tienes que tener etiquetas en tus entradas para que el gadget funcione.
* El código JavaScript que hace que el gadget funcione es el siguiente, si quieres respaldarlo o subirlo a tu host lo puedes descargar desde aquí.
Actualización:
25/7/11: Modificación del código para hacerlo compatible con más plantillas de Blogger. Si ya has probado el código y no te ha dado resultado te recomiento que lo intentes ahora con los nuevos cambios.
Me encanto .Muchas gracias la verdad pense que no me irian a contestar pero veo que les di idea para un nuevo post.
ResponderEliminarSaludos.
me gustaria que siguieras mi blgo, saco muchas cosas de aqui y me gustaria qe lo siguieras HEHE
ResponderEliminarhttp://seriesdedisneychannel.blogspot.com
Hola, ante todo mis saludos y decirle que soy una fiel seguidora de este sitio. Desde hace mucho tiempo he querido colocar este gatget, hoy lo intenté pero me da un error, y lo deseo tanto. Un abrazo.
ResponderEliminarCódigo actualizado, a los que lo han utilizado y no les ha funcionado prueben nuevamente con las nuevas modificaciones.
ResponderEliminar¡muy útil! GRACIAS POR TODAS LAS IDEAS.
ResponderEliminarSaludos.
hOLA!!!
ResponderEliminarSOLO T KERIA PREGUNTAR UNA COSA:
no tiene relacion cn esto:
como poner la barra de menu, en el blog? ami no me funcciona... :( .
Es esa ke tu tienes, esa ke dice, INICIO, INDICE, PUBLICIDAD, CONTACTO, COVERTIR HTML A TEXTO, PCZ. Necesito tu ayuda, porque estoy haciendo un blog de desings y no puedo. ahh!, y tambien otra cosa: como pones los codigos en una barra aparte, en ves de escribirla por texto???. RESPONDE PORRFA X(
ola buen blog.
ResponderEliminarte queria preguntar una cosa:
podriamos hacer intercambio de enlaces??
Llevo dos noches intentando poner esto en mi blog y no hay manera posible, cuando lo hago voy a vista previa para ver si guarda los cambios y me sale tosda la pantalla en blanco, sólo aparece en la lateral izquierdo las palabras "vista previa" lo demás en blanco y ya no sé que hacerrrrrr!!!! Me echas un cabre porfi????
ResponderEliminarola sabes no puedo colocarlo en mi blogger, aqui te dejo mi blogger
ResponderEliminarhttp://tudescargapeli.blogspot.com
por que me pasa esto
pues a mi si me funciono! muchas gracias lo he implementado en Mi blog: http://www.el-indie.blogspot.com/ solo quisiera decir que chequen las entradas de forma individual pues no sale en el index regular
ResponderEliminarA mi el primer dia que lo añadí me funcionaba perfectamente pero despues de unos días ya no me aparece! Y el código está tal cual.. ¿Sabéis que puede pasar? Mi blog es: http://fieltrezitos.blogspot.com
ResponderEliminarOye, una cosa, ¿cómo pongo en el javascript el texto en blanco? Por que con el primer código si he podido poner el texto en blanco, pero en el segundo texto no. Espero tu respuesta. Saludos. Por si alguien le quiere hechar un vistazo: http://landinote.blogspot.com
ResponderEliminarAaaaaaaaaaaaaaaaaaaaaaaaaa por finnn!!! muchas gracias!!!
ResponderEliminarMira! que tal me quedo jeje
http://vainasbook.blogspot.com/
Muchos exitos!
Hola! no emtiendo muy bien donde tengo que poner ese codigo ya que entro en diseño pero no se donde esta el cógigo html y la parte de expandir plantillas de artilugios, me podrias ayudar? gracias.
ResponderEliminarwww.cuentamecris.blogspot.com
cristinamc1492@hotmail.com
Hola, te escribo para saber si puedo modificar el tamaño de las imágenes ya que en mi Blog las imágenes se ven feas con este Script.
ResponderEliminarTe felicito por el Blog.
El mio lo dejo para que veas las imagenes lo fea que quedan.
http://dd-cybernauticos.blogspot.com/
Saludos.
hola...me gusta mucho tu blog y muchas cosas las he puesto en el mio,pero este truco no me funciona..me podrias ayudar?? he puesto los codigos como has dicho y nada....mi blog es el siguiente:http://r-creacionesfieltros.blogspot.com/
ResponderEliminargracias
He intentado incluir en mi blog este gadjet, pero soy incapaz.
ResponderEliminarMe puedes dar alguna indicación más?
Mi blog es www.ruidodecacerolas.com
Gracias
A mi tampoco me funciono ni con este ni con el linkwithin no se si deba a que exporte las entradas de mi antiguo blog y las publique todas en un mismo dia espero puedas ayudarme
ResponderEliminarte dejo el link de mi blog
httt://vcs-movies.blogspot.com
Hola,
ResponderEliminarhe puesto el código y no al parecer no funciona en mi blog:http://silenciopensamientoyvoz.blogspot.com/ (tampoco encuentro la "actualizacion" mencionada: 25/7/11.
Podrías ayudarme?
Anteriormente tenía linkwithin y me funcionaba perfecto, antes de cambiar el nombre del blog (con lo cual se modificó la URL)... cuando activo mi cuenta de linkwithin por el ID unico, me aparecen las imagenes, pero no enlazan a la dirección actual.
Te agradezco y espero tu respuesta
Alef
Gracias mi amigo.. lo estaba buscando y en los otros sitios no funcionaba... sos el mejor!!!
ResponderEliminarHola, te quisiera preguntar como hacer para que NO considere una determinada etiqueta, por ej tengo una Etiqueta NOTICIAS y dentro de ella POLICIALES, ECONOMÍA,ETC. entonces que NO me considere la etiqueta NOTICIAS y busque las relacionadas dentro de las demas
ResponderEliminarMuchas Gracias
gracias lo voy a probar en mi blog haber que tal queda.
ResponderEliminarA mi no me sirvio, hay alguna otra manera?
ResponderEliminar¿Y si quisiéramos que aparezca en las entradas de la portada (como hace Linkwithin?
ResponderEliminarMuchas gracias
esto esta muy bien ye s algo q me encantaria conseguir,pero me canse ,me dejo la vista ahi y no doy con la linea, nada...no puedo ponerselo,estaba muy dificil de averiguarlo,la verdad,pero igual gracias
ResponderEliminarMuchas gracias. me funciono perfecto.
ResponderEliminarhttp://marrafutbolero.blogspot.com/
Tengo un problema, acaso cambio la edición de HTML porque me sale me dio raro con colores y eso...y no me sale class='post.... solo eso de div nada mas :(
ResponderEliminarcreo que cambiaron algo en blogger de nuevo ¬¬
Muchas Gracias! Me funcionó de 10! y es muy útil. Hermosa página. Soy de http://www.micordobaargentina.com.ar/ Si te gusta esta Provincia de Argentina te invito a mi blog. Saludos! :D
ResponderEliminarMuchas Gracias!! Funciona de 10! Soy de la Provincia de Córdoba Argentina por si queres visitar. http://www.micordobaargentina.com.ar/
ResponderEliminarFunciona de 10! Muchas Gracias!!
ResponderEliminarSoy de http://www.micordobaargentina.com.ar/
Este comentario ha sido eliminado por el autor.
ResponderEliminarHola, a mi no me funciona, utilizo la plantilla simple de blogger, ¿me podrías ayudar =(?
ResponderEliminarhola no cacho busque peor no me aparece la parte esposible que hicieras de repente fotos de pantalla mostrando
ResponderEliminarHOLA NO ME FUNCIONA EN EL MIO MIRA VISITALO
ResponderEliminarESTOY TRATANDO DE PONERLO PERO NO ME FUNCIONA
ESTE ES MI BLOG
http://oscurosvampiros.blogspot.com/
Hola, ya lo puse, pero no me sale nada, me podrias ayudar??
ResponderEliminarMi blog es:
http://www.excentricazonaalterna.com/
Hola,
ResponderEliminarYo he probado con varios relacionados y todos me daban algún problema o no aparecían.
Si no os sale, probad a colocar el código en el SEGUNDO 'post-footer-line post-footer-line-1'>
En mi caso, al principio lo coloqué en el primero y no me surtió efecto pero luego probé en el segundo y me ha quedado muy chulo. Tuve que cambiar los colores de las fuentes a blanco porque tengo el fondo de las entradas en color negro aunque eso es fácil. Donde pone #related-post h2 {
font-size: 1.6em;
font-weight: bold;
color: black --------aquí ponéis el color que queráis en inglés (cambia el color de la fuente de "posts relacionados") Yo puse white (blanco)
Para cambiar el color de la fuente que se ve resaltada al pasar el cursor (no el fondo, sino la letra), hacéis lo mismo: #related-posts a:hover {
color: black ------------(el que queráis en inglés)
Para cambiar el fondo resaltado cuando pasas el cursor (se ve en azul claro):
#related-posts a:hover {
backgrownd-color:#d4eaf2 ------cambiáis por el color que queráis [*Un truco: para probar los colores con su código correspondiente podéis ir a diseño-plantilla y pulsáis en "personalizar" (al lado de HTML). Dentro, vais a "Avanzado" y por ejemplo pulsáis en "texto de la página". A la derecha os aparece "color de texto". Pinchad en los cuadritos de colores. Así sabréis qué codigo de colores diferentes hay. Pero tened cuidado en dejarlo como estaba, si no, modificaréis el diseño de vuestra plantilla]
Si queréis cambiar el color del título de las entradas que permanece mientras no paséis el cursor encima:
#related-posts a{
color: black -----------el color que queráis escrito en inglés
Se pueden cambiar el tamaño y otros parámetros.
Espero haber ayudado a alguien con mi mismo problema.
Mi blog es: http://nuevoviajeaitaca.blogspot.com.es/
Me encanta este blog. Ha sido todo un descubrimiento para mí.