Posts relacionados con miniaturas para blogger

Qué necesitamos:

Un editor de texto que coloree el código, por ejemplo Notepad++, esto nos ayuda a trabajar mas facilmente con codigo coloreado
Un archivo *.JS «http://blogergadgets.googlecode.com/files/relatedthumbs21.js«
Conocimiemtos básicos de XHTML, CSS y Javascript si quieres personalizar el código.

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.

Imagen de referencia

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&amp;callback=related_results_labels_thumbs&amp;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:

maxresults = Cantidad de miniaturas para colocar
relatedpoststitle = El titulo de las miniaturas

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:

Posts relacionados con miniaturas para blogger

Tags

Últimas entradas

«BolivIA» el primer modelo de I.A. desarrollado desde el Estado boliviano

Atlas de anatomía 3D con VibeCoding

GRATIS hasta el 13 de agosto: Ubisoft regala Tom Clancy’s Ghost Recon Future Soldier

¿Cobros ilegales en la Alcaldía de Sucre? Ya puedes denunciarlos de forma anónima y en minutos

ANH Abastecimiento: La app gratuita que te dice exactamente dónde cargar tu tanque

Artículos similares

Evaluar expresiones matemáticas en Java con JavaScript

¿Cobros ilegales en la Alcaldía de Sucre? Ya puedes denunciarlos de forma anónima y en minutos

Manipular colecciones de una forma sencilla

Escalar imagen en java

Captura de pantalla de una web con Chrome

La era de la Inteligencia Artificial

JC Mouse | Bolivia