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

Te enseño como generar imagenes con Google Bard

Te enseño como generar imagenes con Google Bard

Google Bard la inteligencia artificial de Google se actualiza con una mejora que entra a competir con el resto de IAs y...

Imprimir imagen con Print

Imprimir imagen con Print

La siguiente clase hace uso de PRINT para imprimir una imagen que se encuentra en un variable de tipo FileInputStream, e...

Camara de Seguridad por Internet (LiveCam)

Camara de Seguridad por Internet (LiveCam)

Existen muchas camaras de seguridad por internet algunas protegidas por contraseña pero la mayoria no, utilizando el hac...

Truco para Instagram

Truco para Instagram

Instagram es una red social y aplicación para subir fotos y videos. Sus usuarios también pueden aplicar efectos fotográf...

JLabel: Escalar imagen

JLabel: Escalar imagen

El componente swing JLabel nos permite cargar una imagen con la propiedad setIcon, sin embargo la imagen no toma el tama...

Compartir conexión de base de datos

Compartir conexión de base de datos

Cuando utilizamos aplicaciones web con conexión a base de datos MYSQL, se suele crear una clase que gestione la interacc...

Comparte lo que sabes

Categorias

Últimas entradas

Existe una gran cantidad de contenido sobre productividad, trucos, consejos y trabajo y más. Pero, ¿Qué pasa con esos mo...

En este post te enseño a usar una herramienta de Inteligencia Artificial para animar tus fotografias y esto completament...

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...

Herramientas

Generador de Enlaces a Whatsapp