Qué necesitamos:
http://blogergadgets.googlecode.com/files/relatedthumbs21.js
«Manos a la obra:
Para colocar esta funcion a blogger debemos seguir los siguientes pasos:
1. Ingresa a Blogger y dirigete a Edición HTML
2. Crea un backup (copia de seguridad) de tu plantilla en caso de que algo salga mal (nunca se sabe).
3. Habilita la opción «Ver Artilugios»
4. Abre el Notepad++, copia el código de blogger y pega en el editor de texto, dirigete al menú «Lenguaje» y busca XML, ahora podras ver y distinguir mucho mejor el codigo de blogger.
5. Busca la etiqueta </head> en el código. (CTRL + F) y pega antes de esa etiqueta el siguiente código CSS:
<b:if cond='data:blog.pageType == "item"'> <style type="text/css"> /* Estilos para las miniaturas */ #related-posts { float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px; } #related-posts h2{ font-size: 15px; font-weight: bold; color: #000; font-family: Georgia, "Times New Roman", Times, serif; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; } #related-posts a{ color: #000; } #related-posts a:hover{ color:#000; } #related-posts a:hover { background-color:#d4eaf2; } </style> <script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/> </b:if>
Observa que hacemos uso del archivo «relatedthumbs21.js», en este archivo javascript se encuentra el código necesario para manejar las miniaturas, si deseas personalizar este código, te lo bajas y lo subes a tu servidor web, si no tienes uno, puedes hacer lo siguiente:
Reemplazar la siguiente linea:
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
por:
<script type='text/javascript'> //<![CDATA[ ... acá pegamos el contenido del archivo relatedthumbs21.js ... //]]> </script>
Si no quieres hacer ningun cambio, lo dejas como esta, continuemos….
6. Busca el código:
<p class='post-footer-line post-footer-line-1'>
Si no lo encuentras, entonces busca:
<div class='post-footer-line post-footer-line-1'>
Si tampoco lo encuentras busca algo como:
<div class='post-footer-line post-footer-line-X'>
Donde X es un número 1,2,3…n
7. Cuando encuentres el anterior pedazo de código, debes pegar despues de este el siguiente script:
<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=5"' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a> <script type='text/javascript'> var currentposturl="<data:post.url/>"; var maxresults=5; var relatedpoststitle="Post relacionados"; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script> </div> <div style='clear:both'/> </b:if>
Tienes dos opciones:
Pues eso es todo, ahora selecciona todo el codigo del notepad++ y pegalo en el editor de blogger y «Guarda la Plantilla», ya debe estar habilitado la vista de miniaturas en cada post de blogger:
Yo soy yo :) JC Mouse, Soy orgullosamente boliviano soy fundador y CEO de la web jc-Mouse.net uno de las pocas web en emprendimiento y tecnología en Bolivia.
Toda la información que encuentres en este sitio es y sera completamente gratis siempre, puedes copiar, descargar y re-publicar si así lo deseas en otros blogs o sitios web, solo te pido a cambio que dejes una referencia a esta web. Esto nos ayuda a crecer y seguir aportando. Bye
Enjoy! :)
En estos días en los que medio mundo esta confinado en sus casas, la comunicación en tiempo real y preferentemente con v...
En ocasiones por motivos cualesquiera que sea queremos pasar proyectos hechos en netbeans a Eclipse, Netbeans cuenta con...
La internacionalización permite a las aplicaciones adaptarse a los diferentes idiomas y regiones sin necesidad de cambio...
JavaFX un producto de Sun Microsystems/Oracle Corporation que salio a la luz para competir con tecnologías como Flash o...
Existen muchos clientes REST disponibles tanto para instalar en tu PC como para utilizar directamente desde la nube, sin...
Python es un lenguaje de programación interpretado, de programación multiparadigma, ya que soporta orientación a objeto...
Si trabajas con redes sociales (RRSS) a continuación te muestro tres herramintas gratuitas que te ayudaran a la hora de...
Por lo general se usan transacciones a nivel base de datos y posteriormente se llaman estos a través de procedimientos a...
En este post, aprenderemos como conectar Visual Basic 6 con SQL Server, abrir una tabla, leer su contenido y mostrar est...
Lo que veremos en este post es la configuración del driver para PHP de SQL Server que ha creado Microsoft el cual permit...