Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
Index / Trucos / Posts relacionados con miniaturas para blogger

Posts relacionados con miniaturas para blogger

Autor jc mouse martes, febrero 21, 2012

Posts relacionados

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

Tags

Si te ha gustado podrías compartirlo o dejar un comentario. ¡Muchas gracias!
Autor: JC Mouse

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! :)

También Te Podría Interesar

Terminator: Terminal multiventanas para Linux

Terminator: Terminal multiventanas para Linux

Cada versión de Linux viene con su propia terminal predeterminada para interactuar con el Sistema Operativo a través de...

Validar etiquetas facebook en standar w3c

Validar etiquetas facebook en standar w3c

Cuando se diseñan paginas web es recomendable hacer uso de standares como una de las buenas practicas de programación, p...

Manipular colecciones de una forma sencilla

Manipular colecciones de una forma sencilla

Java proporciona Collection Framework, que define varias clases e interfaces para representar un grupo de objetos como u...

Imprimir Swing

Imprimir Swing

Java Printing nos permite hacer uso de las impresoras del sistema para, valga la redundancia 🙂 imprimir los gráficos de...

Código CSS en Java/Netbeans

Código CSS en Java/Netbeans

Los objetos como JLabel o JButton nos permiten hacer uso de código CSS en su propiedad TEXT, asi podemos adornar el text...

Borrar código protegido en Netbeans

Borrar código protegido en Netbeans

Cuando programamos visualmente desde Netbeans, el IDE nos ayuda mucho al generar rapidamente código predefinido, sin emb...

Comparte lo que sabes

Categorias

Últimas entradas

En este post realizaremos una aplicación que pueda capturar nuestra voz y convertir en texto Pasar voz a texto con Andro...

Los JavaBeans son clases que encapsulan objetos en un solo objeto (beans). Son fáciles de crear y pueden contener muchos...

Basic 4 Android es un IDE (Entorno de Desarrollo Integrado) para Android basado en Basic (no es Visual Basic, pero se pa...

Quasar es un proyecto Open Source basado en el Framework Vue que nos permite desarrollar proyectos de todo tipo, por eje...

Herramientas

Generador de Enlaces a Whatsapp