nota automatica

viernes, 28 de febrero de 2014

Entradas relacionadas en Blogger con Thumbnails

Hace algún tiempo atrás, escribí una entrada de cómo agregar un related post mediante LinkWithin, un servicio bastante bueno y muy popular basado en un widget.

En esta oportunidad enseñaré una alternativa bastante fiable mediante adición a la plantilla.


Vista previa del script:


¿Cómo añadirlo a Blogger?
Primero, vamos a ''Diseño | Edición HTML'', en donde marcamos ''Expandir plantillas de artilugios''. Buscaremos la siguiente zona: 
1
</head>

Arriba de esta, pegaremos el siguiente código:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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, &#8220;Times New Roman&#8221;, 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 type='text/javascript'>
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Entradas relacionadas:";
</script>
</b:if>
Ahora busca la siguiente línea:
1
<div class='post-footer-line post-footer-line-1'>
Si no la encuentras, busca esta otra:
1
<p class='post-footer-line post-footer-line-1'>

Debajo de esta, pega el siguiente código:
1
2
3
4
5
6
7
8
9
10
11
12
<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>
<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:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
</b:if>

Si deseas cambiar la cantidad de entradas que se visualizarán reemplaza el número de la siguiente zona: 
1
max-results=6

Si deseas reemplazar la imagen que aparecerá cuando una entrada no contenga ninguna, reemplaza la siguiente URL por la deseada:

Imprimir artículo

No hay comentarios:

Publicar un comentario

Mil Trucos Blogger