Entradas relacionadas con Miniaturas para Blogger

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:

1)

En diseño >> Edición HTML selecciona la casilla "Expandir plantillas de artilugios" y pega el siguiente código justo antes de </head>

<!--Related Posts with thumbnails Scripts and Styles Start--> <b:if cond='data:blog.pageType == "item"'> <style type="text/css"> #related-posts { float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px; } #related-posts h2{ font-size: 1.6em; font-weight: bold; color: black; font-family: Georgia, “Times New Roman”, Times, serif; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; } #related-posts a{ color:black; } #related-posts a:hover{ color:black; } #related-posts a:hover { background-color:#d4eaf2; } </style> <script src='https://sites.google.com/site/pczeros/Home/relatedthumbs21.js' type='text/javascript'></script> </b:if> <!--Related Posts with thumbnails Scripts and Styles End-->

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 == &quot;item&quot;'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop> <script type='text/javascript'> var currentposturl=&quot;<data:post.url/>&quot;; 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.

Imagen fija en la esquina de Blogger

Otro gadget interesante para tu blog es el de colocar una imagen fija en la esquina de tu Blogger (o sea que al hacer scroll la imagen no se mueva), la función que le puedes dar puede ser la que gustes, por ejemplo un saludar a los visitantes, invitarlos a que realicen un comentario, promover una nueva sección del blog, vincular tu Twitter, etc, etc.

Dejo algunos de ejemplo y el código para colocarlos, pero recuerda que este gadget es totalmente personalizable con la imagen que gustes.




<a style="display:scroll;position:fixed;bottom:0px;right:0px;" href="http://pczeros.blogspot.com/2011/07/imagen-fija-esquina-blogger.html"/><img src="https://lh4.googleusercontent.com/-xeUV8GickpQ/ThzNaXk2sUI/AAAAAAAAAWo/MV_rYNOBI2M/s288/if-homercomentario.gif" style="z-index:99;"/></a>




<a style="display:scroll;position:fixed;bottom:0px;right:0px;" href="http://pczeros.blogspot.com/2011/07/imagen-fija-esquina-blogger.html"/><img src="https://lh5.googleusercontent.com/-d7Y5RZ74SCw/ThzNaf13GWI/AAAAAAAAAWk/fTtqhYsXYco/s288/if-emoticoment.gif" style="z-index:99;"/></a>




<a style="display:scroll;position:fixed;bottom:0px;right:0px;" href="http://pczeros.blogspot.com/2011/07/imagen-fija-esquina-blogger.html"/><img src="https://lh3.googleusercontent.com/-OJyaByDALsQ/ThzNam48kBI/AAAAAAAAAWg/pDNadHyfSLw/s288/if-sigueme.gif" style="z-index:99;"/></a>


http://www.blogger.com/img/blank.gif Notas:

* El código se pega en HTML/JavaScript (si necesitas ayuda en este punto lee cómo agregar gadgets a blogger)

* Para cambiar la imagen, tomando por referencia que utilizaste el primer código cambia donde dice: https://lh5.googleusercontent.com/-d7Y5RZ74SCw/ThzNaf13GWI/AAAAAAAAAWk/fTtqhYsXYco/s288/if-emoticoment.gif por la url de donde está tu imagen. Para aprender a subir imágenes lee: Cómo subir archivos para Blogger

* Para cambiar el enlace a donde irá el visititante una vez que ha hecho clic en la imagen cambia donde dice: http://pczeros.blogspot.com/2011/07/imagen-fija-esquina-blogger.html por la dirección que gustes.

* Puedes cambiar la pocición cambiando la parte del código que pegaste (en donde dice bottom:0px;right:0px;)por los siguientes valores según corresponda:
Esquina inferior izquierda: bottom: 0px; left: 0px;
Esquina inferior derecha: bottom: 0px; right: 0px;
Esquina superior izquierda: top: 0px; left: 0px;
Esquina superior derecha: top: 0px; right: 0px;
También puedes usar valores intermedios si lo deseas, por ejemplo: botton:0px; left: 350px;


Bueno por hoy es todo, espero les sea de utilidad.