2 Gadgets para sugerir entradas al final de tus posts, totalmente personalizables [Tutorial]

sugerir-entradas-al-final-de-tus-posts


Conseguir que nuestras visitas, se queden más tiempo navegando en nuestras páginas es un objetivo esencial para lograr que nuestro blog crezca a buen ritmo. El número de páginas vistas es un ingrediente importantísimo para conseguir posicionar mejor en buscadores.

Por eso hoy quiero mostrarte 2 maneras de sugerir otras entradas del blog al final de tus posts. Y lo mejor de todo es que son 100% personalizables. Además en la segunda te doy 3 opciones de personalización diferentes, para que se ajuste al máximo a la estética de tu blog. ¿Qué me dices? ¿Empezamos?







Como ya habrás visto, al final del post, tienes un nuevo elemento para que puedas seguir descubriendo contenido interesante en el blog. Este gadget, junto al Indice tienen el objetivo de poder darte un mejor servicio y que no te pierdas información que te ayude a seguir avanzando con tu blog.

Además es maravilloso para aumentar el tiempo de estancia de las visitas y que nuestros posts no queden en el olvido porque...


Con nuestros contenidos pasa lo mismo que con el dinero: cuesta mucho generarlos y muy poco consumirlos.Tuitéalo



Así que sin más, vamos a meternos en faena para que lo tengamos funcionando en un plis-plas.




1. GADGET DE ENTRADAS RECOMENDADAS CON LINKWITHIN



Este ya es un clásico y es muy conocido en la comunidad Blogger, por eso es uno de los más usados. El problema que tiene, es que hay que saber instalarlo para que se muestre correctamente y que incluye su publicidad en la parte inferior derecha. Pero tanto una cosa como la otra, la vamos a solucionar ahora mismo.




como-instalar-gadget-entradas-relacionadas-linkwithin


  Antes de empezar, dirígete a Plantilla>Editar HTML (recuerda hacer siempre tu copia de seguridad antes de realizar un cambio en la plantilla). Clica en cualquier lugar dentro de la plantilla y pulsa Ctrl+F para que se abra la cajita de búsqueda. Ahora pega dentro este texto <data:post.body/>  y dale a intro para comenzar la búsqueda.
Si tienes dos líneas con <data:post.body/> pon este código justo debajo de la segunda:





<b:if cond='data:blog.pageType == "item"'>

<!--Entradas relacionadas con miniaturas. -->

<!--El script del proveedor que selecciones va debajo de esta linea -->



</b:if>



  Guarda la plantilla y dirígete a Linkwithin. Nada más entrar, encuentras un recuadro en la esquina inferior derecha, donde deberás introducir tu correo electrónico, la dirección del blog, la plataforma donde se encuentra (no pongas Blogger, clica en Others), el número de entradas sugeridas que quieres que aparezcan bajo tu post y en caso de que tu blog contenga texto claro sobre fondo oscuro, marca la casilla, antes de darle a Get Widget.



tutorial-linkwithin-sugerir-entradas-al-final-del-post


  Cuando te lo muestre, copia sólo el ID, que es lo que tendrás que pegar en el siguiente código que te muestro (te aconsejo que copies los códigos que te voy dando en un documento de texto, para editarlos cómodamente). Además podrás personalizar también el texto que quieres que aparezca:



<div class='linkwithin_div'/>

<script>

var linkwithin_site_id = TU_ID_AQUI ;

</script>

                                      <script>linkwithin_text='Texto para sugerir tus entradas'</script>

<script src='http://www.linkwithin.com/widget.js'/>

<a href='http://www.linkwithin.com/'><img alt='Related Posts Plugin for WordPress, Blogger...' src='http://www.linkwithin.com/pixel.png' style='border: 0'/></a>






tutorial-linkwithin-sugerir-entradas-blog


  Una vez que has rellenado el ID y has escrito tu texto personalizado para presentar otras entradas del blog (por ejemplo, Quizás te pueda gustar), tienes que introducir este script , dentro del código que te mostré al principio del post, y que debes situar debajo del segundo <data:post.body/> . Quedaría de la siguiente forma:



<b:if cond='data:blog.pageType == "item"'>

<!--Entradas relacionadas con miniaturas. -->

<!--El script del proveedor que selecciones va debajo de esta linea -->

<div class='linkwithin_div'/>

<script>

var linkwithin_site_id = TU_ID_AQUI ;

</script>

<script>linkwithin_text='Texto para sugerir tus entradas'</script>
<script src='http://www.linkwithin.com/widget.js'/>

<a href='http://www.linkwithin.com/'><img alt='Related Posts Plugin for WordPress, Blogger...' src='http://www.linkwithin.com/pixel.png' style='border: 0'/></a>

</b:if>




  Guarda los cambios en la plantilla y con esto, ya deberías visualizar tus entradas sugeridas bajo cada una de tus entradas. Eso si, si hace poco que has comenzado con el blog y tienes pocas entradas publicadas, no aparecerán hasta que tengas las suficientes para que puedan ser recomendadas. Esto se hace más patente aún, si has elegido el máximo de entradas en Linkwithin, que son 5. Hasta que no tengas mínimo esas 5 entradas para sugerir, no se visualizará.

Con Linkwithin, las entradas aparecen cuadradas y un poco sosillas, además de incluir su branding en la parte inferior, pero no te preocupes porque tiene remedio. Si te gusta personalizarlo todo, échale un vistazo a este post de Creative Mindly, que May te explica cómo añadirles color, quitar el enlace a Linkwithin y hasta poner las imágenes redondas.



Los códigos y el script, para crear las entradas sugeridas, se lo debemos a Jesús de Inicia Blog, que se ha molestado en buscar una fórmula que nos minimice los problemas a la hora de instalar este gadget tan eficaz en nuestro blog. No dejes de visitarlo, porque tiene muy buenos contenidos que te ayudarán a avanzar en Blogger y además, en el enlace que te he dado, te muestra otras maneras de incluir entradas relacionadas en tu blog (aunque menos personalizables).



2. GADGET DE ENTRADAS RELACIONADAS TOTALMENTE PERSONALIZABLE



Fíjate que en la 1ª opción decía Entradas recomendadas y en esta lees Entradas relacionadas. Y esa es una de las ventajas de este gadget con respecto a Linkwithin , aunque tiene muchas más como vas a comprobar.

Para mí el poder mostrarle al lector entradas relacionadas, es fundamental para darle una mejor experiencia de navegación en mi blog, porque considero que si esa entrada le ha gustado, también le puede interesar descubrir otros contenidos relacionados que ofrezco. Para esto es necesario que tengas organizadas tus entradas por etiquetas. Yo por ejemplo en mi blog, tengo 9  etiquetas fundamentales: Blogging, Freebies, Marketing, Motivación, Normativa 2.0, Organización, Photoscape, Seo y Tutoriales. Cada vez que edito una entrada, me preocupo de asignarle la etiqueta correspondiente. De esa manera las visitas, pueden investigar en profundidad la temática que le interesa.

Este gadget es fantástico, porque toma como referencia las etiquetas, para mostrar entradas que las contengan. Pero no sólo eso, para instalarlo no necesitas de ningún servicio externo, por lo que te ahorras registros y que la aplicación en cuestión te añada su branding o condiciones. Y por si fuera poco, lo puedes personalizar completamente a tu gusto. Yo te voy a sugerir 3 formas distintas, pero si te das traza con el CSS, le puedes hacer lo que te dé la gana. Además te lo voy a enseñar con detalle en videotutorial, para que lo hagas paso a paso, sin ningún problema. Pero antes, te voy a mostrar las 3 opciones de personalización.




1ª OPCIÓN

La primera es la que puedes ver al final de la entrada. Es la más sencilla de todas, pero es que a mí me gusta que el diseño sea minimalista, por eso he adecuado el gadget para que no contenga demasiadas florituras. Este es el resultado, si te gusta, podrás adecuarlo a la paleta de tonos de tu blog, sin problemas:



gadget-de-entradas-recomendadas-html

La tabla que contiene el fondo de color rosa pálido, te muestra el efecto de cambio de color al pasar el ratón. Puedes verla con detalle, al final del post.



2ª OPCIÓN


Otra alternativa es añadirle relieve y redondear el marco de la imagen. Pero además podrás crear el efecto rotación, que es muy atractivo y se activa al pasar el ratón. Puedes verlo en acción, en este blog de pruebas:


gadget-entradas-recomendadas-efecto-rotacion-html




3ª OPCIÓN


Si prefieres que las imágenes sean redondas, puedes tener idéntico resultado a la 2ª opción, variando un poquito el código. También le puedes añadir el efecto rotacíon. En esta plantilla prediseñada, puedes ver cómo queda:


gadget-entradas-relacionadas-tutorial-html


¿TIENES CLARA CUAL ES TU OPCIÓN FAVORITA? PUES AQUÍ TIENES LOS CÓDIGOS, SÍRVETE!



 ACTUALIZACIÓN IMPORTANTE!! Este código es una actualización del anterior código de entradas relacionadas que publiqué meses atrás y que tenía este aspecto:




El caso es que me he visto obligada a buscar otro código y adaptarlo para que obtenga los mismos resultados, porque el gadget anterior tenía el script inhabilitado por parte del proveedor y ya no funcionaba. Así que, si ya habías instalado el gadget anterior, tendrás que desinstalarlo, antes de incluir el nuevo. Mira el vídeo, para que sepas hacerlo correctamente y copia los códigos que encuentras bajo el vídeo para seguir el paso a paso:





  • Copia </head> para eliminar la primera parte del antiguo código



  • Copia <a expr:href=’data:label.url’ rel=’tag’><data:label.name/></a><b:if cond=’data:label.isLast != &quot;true&quot;’>,</b:if>  para eliminar la segunda parte del antiguo código



  • Copia <b:includable id=’postQuickEdit’ var=’post’>  para eliminar la tercera y última parte del antiguo código

Este gadget lo he podido adaptar gracias a un tutorial de Oloman. Si no conoces a este hombre, te lo recomiendo muchísimo, porque gran parte de lo que yo he aprendido en Blogger se lo debo a él. Sus tutoriales son de total confianza y cuando algún código se queda obsoleto, lo actualiza. Este gadget en concreto, tiene el script alojado en la plantilla, por lo que no volveremos a tener el problema de que el proveedor elimine el código y nos deje a dos velas.



CÓMO INSTALAR EL NUEVO GADGET DE ENTRADAS RELACIONADAS 


 Y ahora llega el momento de los códigos y el videotutorial. Empezaré por mostrarte el paso a paso en el vídeo y justo debajo, tienes el código para la opción que hayas elegido. Te aconsejo que los copies en un documento de texto y vayas personalizándolo paso a paso, tal como te muestro en el vídeo. Te aviso que vas a ver mucho código, tranquila, respira y no te agobies. Con el videotutorial lo vas a entender todo a la perfección, no lo dudes. Hazlo bien, sin prisas y verás que en un ratito, lo tienes dando caña en el blog  😉



Para trabajar cómodamente los colores que vamos a añadir al código, vamos a usar dos herramientas de las que te he hablado en el post de esta semana. Si aún no las conoces, te dejo los enlaces, pero te recomiendo que le eches un vistazo al post, para que les saques todo el partido. Sobre todo a la segunda y la tercera, porque de Colorzilla, te hablo en el vídeo.









También te dejo enlace a este post, donde te explico los distintos estilos de líneas que existen en CSS, para que elijas la que más te guste.



EMPEZAMOS



Dirígete a la Plantilla, haz un clic en cualquier parte dentro de ella y pulsa Ctrl+F para que te salga la cajita de búsqueda. Pega </head> y dale a intro. Justo encima, pega el código que hayas elegido para tu gadget de entradas relacionadas.

Todo lo que encuentres en color azul, es lo que puedes cambiar.

Mira el vídeo que te explico paso a paso como personalizarlo a tu gusto.



CÓDIGO ENTRADAS CUADRADAS MINIMALISTAS

<!-- Entradas relacionadas con miniatura. Script y Estilo -->
<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: normal;
color: #feacae;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#linkcolor;
}
#related-posts a:hover{
color:#727272;
}
#related-posts a:hover {
background-color:#ccffff;
}
#related-posts img {
border: 5px solid #feacae;
padding: 5px;
-webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    overflow: hidden;
margin-left:18px;
margin-top: 10px;
}

}
</style>
<script type='text/javascript'>
//<![CDATA[
//Script by Aneesh of www.bloggerplugins.org
//Released on August 19th August 2009
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
var thumburl = new Array();
function related_results_labels_thumbs(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
try
{thumburl[relatedTitlesNum]=entry.media$thumbnail.url;}
catch (error){
s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){
thumburl[relatedTitlesNum]=d;} else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJo_tmcKdBr_Nqo9_iXBUlzearDe10hRDFDriYbQfTGz5DgNUaok7RYYQPihAB3kH4dZb_mHOwDncnfivXpvEvg5lG5_-otHeGmrmdWjcxKPyFtHMxurFvqr9I2Ke7mMsJgI0x3awbjcpL/s1600/no_image.jpg';
}
if(relatedTitles[relatedTitlesNum].length>35) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+"...";
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
}}}}
function removeRelatedDuplicates_thumbs() {
var tmp = new Array(0);
var tmp2 = new Array(0);
var tmp3 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains_thumbs(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp3.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
tmp3[tmp3.length - 1] = thumburl[i];
}}
relatedTitles = tmp2;
relatedUrls = tmp;
thumburl=tmp3;
}
function contains_thumbs(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels_thumbs() {
for(var i = 0; i < relatedUrls.length; i++)
{
if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))) {
relatedUrls.splice(i,1);
relatedTitles.splice(i,1);
thumburl.splice(i,1);
}}
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
if(relatedTitles.length>0) document.write('<h2>'+relatedpoststitle+'</h2>');
document.write('<div style="clear: both;"/>');
while (i < relatedTitles.length && i < 20 && i<maxresults) {
document.write('<a style="text-decoration:none;padding:5px;float:left;');
if(i!=0) document.write('border-left:solid 0.5px #d4eaf2;"');
else document.write('"');
document.write(' href="' + relatedUrls[r] + '"><img style="width:100px;height:100px;" src="'+thumburl[r]+'"/><br/><div style="width:150px;height:40px;border: 0pt none ; padding-top: 10px; text-align: center; font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; line-height: normal; font-size-adjust: none; font-stretch: normal;">'+relatedTitles[r]+'</div></a>');
if (r < relatedTitles.length - 1) {r++;} else {r = 0;}
i++;
}
document.write('</div>');
}
//]]>
</script>
</b:if>
<!-- Entradas relacionadas con miniatura. Script y Estilo -->


CÓDIGO ENTRADAS SEMIREDONDAS CON RELIEVE

<!-- Entradas relacionadas con miniatura. Script y Estilo -->
<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: normal;
color: #feacae;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#linkcolor;
}
#related-posts a:hover{
color:#727272;
}
#related-posts a:hover {
background-color:#ccffff;
}
#related-posts img {
border: 5px solid #feacae;
padding: 5px;
-webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    overflow: hidden;
margin-left:18px;
margin-top: 10px;
}
</style>
<script type='text/javascript'>
//<![CDATA[
//Script by Aneesh of www.bloggerplugins.org
//Released on August 19th August 2009
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
var thumburl = new Array();
function related_results_labels_thumbs(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
try
{thumburl[relatedTitlesNum]=entry.media$thumbnail.url;}
catch (error){
s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){
thumburl[relatedTitlesNum]=d;} else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJo_tmcKdBr_Nqo9_iXBUlzearDe10hRDFDriYbQfTGz5DgNUaok7RYYQPihAB3kH4dZb_mHOwDncnfivXpvEvg5lG5_-otHeGmrmdWjcxKPyFtHMxurFvqr9I2Ke7mMsJgI0x3awbjcpL/s1600/no_image.jpg';
}
if(relatedTitles[relatedTitlesNum].length>35) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+"...";
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
}}}}
function removeRelatedDuplicates_thumbs() {
var tmp = new Array(0);
var tmp2 = new Array(0);
var tmp3 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains_thumbs(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp3.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
tmp3[tmp3.length - 1] = thumburl[i];
}}
relatedTitles = tmp2;
relatedUrls = tmp;
thumburl=tmp3;
}
function contains_thumbs(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels_thumbs() {
for(var i = 0; i < relatedUrls.length; i++)
{
if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))) {
relatedUrls.splice(i,1);
relatedTitles.splice(i,1);
thumburl.splice(i,1);
}}
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
if(relatedTitles.length>0) document.write('<h2>'+relatedpoststitle+'</h2>');
document.write('<div style="clear: both;"/>');
while (i < relatedTitles.length && i < 20 && i<maxresults) {
document.write('<a style="text-decoration:none;padding:5px;float:left;');
if(i!=0) document.write('border-left:solid 0.5px #d4eaf2;"');
else document.write('"');
document.write(' href="' + relatedUrls[r] + '"><img style="width:100px;height:100px;" src="'+thumburl[r]+'"/><br/><div style="width:150px;height:40px;border: 0pt none ; padding-top: 10px; text-align: center; font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; line-height: normal; font-size-adjust: none; font-stretch: normal;">'+relatedTitles[r]+'</div></a>');
if (r < relatedTitles.length - 1) {r++;} else {r = 0;}
i++;
}
document.write('</div>');
}
//]]>
</script>
</b:if>
<!-- Entradas relacionadas con miniatura. Script y Estilo -->


CÓDIGO ENTRADAS SEMIREDONDAS CON RELIEVE Y ROTACIÓN

<!-- Entradas relacionadas con miniatura. Script y Estilo -->
<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: normal;
color: #feacae;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#linkcolor;
}
#related-posts a:hover{
color:#727272;
}
#related-posts a:hover {
background-color:#ccffff;
}
#related-posts img {
border: 5px solid #feacae;
padding: 5px;
-webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
    overflow: hidden;
margin-left:18px;
margin-top: 10px;
}
#related-posts img:hover {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
}
</style>
<script type='text/javascript'>
//<![CDATA[
//Script by Aneesh of www.bloggerplugins.org
//Released on August 19th August 2009
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
var thumburl = new Array();
function related_results_labels_thumbs(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
try
{thumburl[relatedTitlesNum]=entry.media$thumbnail.url;}
catch (error){
s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){
thumburl[relatedTitlesNum]=d;} else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJo_tmcKdBr_Nqo9_iXBUlzearDe10hRDFDriYbQfTGz5DgNUaok7RYYQPihAB3kH4dZb_mHOwDncnfivXpvEvg5lG5_-otHeGmrmdWjcxKPyFtHMxurFvqr9I2Ke7mMsJgI0x3awbjcpL/s1600/no_image.jpg';
}
if(relatedTitles[relatedTitlesNum].length>35) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+"...";
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
}}}}
function removeRelatedDuplicates_thumbs() {
var tmp = new Array(0);
var tmp2 = new Array(0);
var tmp3 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains_thumbs(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp3.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
tmp3[tmp3.length - 1] = thumburl[i];
}}
relatedTitles = tmp2;
relatedUrls = tmp;
thumburl=tmp3;
}
function contains_thumbs(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels_thumbs() {
for(var i = 0; i < relatedUrls.length; i++)
{
if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))) {
relatedUrls.splice(i,1);
relatedTitles.splice(i,1);
thumburl.splice(i,1);
}}
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
if(relatedTitles.length>0) document.write('<h2>'+relatedpoststitle+'</h2>');
document.write('<div style="clear: both;"/>');
while (i < relatedTitles.length && i < 20 && i<maxresults) {
document.write('<a style="text-decoration:none;padding:5px;float:left;');
if(i!=0) document.write('border-left:solid 0.5px #d4eaf2;"');
else document.write('"');
document.write(' href="' + relatedUrls[r] + '"><img style="width:100px;height:100px;" src="'+thumburl[r]+'"/><br/><div style="width:150px;height:40px;border: 0pt none ; padding-top: 10px; text-align: center; font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; line-height: normal; font-size-adjust: none; font-stretch: normal;">'+relatedTitles[r]+'</div></a>');
if (r < relatedTitles.length - 1) {r++;} else {r = 0;}
i++;
}
document.write('</div>');
}
//]]>
</script>
</b:if>
<!-- Entradas relacionadas con miniatura. Script y Estilo -->


CÓDIGO ENTRADAS REDONDAS CON RELIEVE

<!-- Entradas relacionadas con miniatura. Script y Estilo -->
<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: normal;
color: #feacae;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#linkcolor;
}
#related-posts a:hover{
color:#727272;
}
#related-posts a:hover {
background-color:#ccffff;
}
#related-posts img {
border: 5px solid #feacae;
padding: 5px;
-webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    overflow: hidden;
margin-left:18px;
margin-top: 10px;
}
</style>
<script type='text/javascript'>
//<![CDATA[
//Script by Aneesh of www.bloggerplugins.org
//Released on August 19th August 2009
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
var thumburl = new Array();
function related_results_labels_thumbs(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
try
{thumburl[relatedTitlesNum]=entry.media$thumbnail.url;}
catch (error){
s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){
thumburl[relatedTitlesNum]=d;} else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJo_tmcKdBr_Nqo9_iXBUlzearDe10hRDFDriYbQfTGz5DgNUaok7RYYQPihAB3kH4dZb_mHOwDncnfivXpvEvg5lG5_-otHeGmrmdWjcxKPyFtHMxurFvqr9I2Ke7mMsJgI0x3awbjcpL/s1600/no_image.jpg';
}
if(relatedTitles[relatedTitlesNum].length>35) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+"...";
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
}}}}
function removeRelatedDuplicates_thumbs() {
var tmp = new Array(0);
var tmp2 = new Array(0);
var tmp3 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains_thumbs(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp3.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
tmp3[tmp3.length - 1] = thumburl[i];
}}
relatedTitles = tmp2;
relatedUrls = tmp;
thumburl=tmp3;
}
function contains_thumbs(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels_thumbs() {
for(var i = 0; i < relatedUrls.length; i++)
{
if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))) {
relatedUrls.splice(i,1);
relatedTitles.splice(i,1);
thumburl.splice(i,1);
}}
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
if(relatedTitles.length>0) document.write('<h2>'+relatedpoststitle+'</h2>');
document.write('<div style="clear: both;"/>');
while (i < relatedTitles.length && i < 20 && i<maxresults) {
document.write('<a style="text-decoration:none;padding:5px;float:left;');
if(i!=0) document.write('border-left:solid 0.5px #d4eaf2;"');
else document.write('"');
document.write(' href="' + relatedUrls[r] + '"><img style="width:100px;height:100px;" src="'+thumburl[r]+'"/><br/><div style="width:150px;height:40px;border: 0pt none ; padding-top: 10px; text-align: center; font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; line-height: normal; font-size-adjust: none; font-stretch: normal;">'+relatedTitles[r]+'</div></a>');
if (r < relatedTitles.length - 1) {r++;} else {r = 0;}
i++;
}
document.write('</div>');
}
//]]>
</script>
</b:if>
<!-- Entradas relacionadas con miniatura. Script y Estilo -->


CÓDIGO ENTRADAS REDONDAS CON RELIEVE Y ROTACIÓN

<!-- Entradas relacionadas con miniatura. Script y Estilo -->
<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: normal;
color: #feacae;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#linkcolor;
}
#related-posts a:hover{
color:#727272;
}
#related-posts a:hover {
background-color:#ccffff;
}
#related-posts img {
border: 5px solid #feacae;
padding: 5px;
-webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
    overflow: hidden;
margin-left:18px;
margin-top: 10px;
}
#related-posts img:hover {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
}
</style>
<script type='text/javascript'>
//<![CDATA[
//Script by Aneesh of www.bloggerplugins.org
//Released on August 19th August 2009
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
var thumburl = new Array();
function related_results_labels_thumbs(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
try
{thumburl[relatedTitlesNum]=entry.media$thumbnail.url;}
catch (error){
s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){
thumburl[relatedTitlesNum]=d;} else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJo_tmcKdBr_Nqo9_iXBUlzearDe10hRDFDriYbQfTGz5DgNUaok7RYYQPihAB3kH4dZb_mHOwDncnfivXpvEvg5lG5_-otHeGmrmdWjcxKPyFtHMxurFvqr9I2Ke7mMsJgI0x3awbjcpL/s1600/no_image.jpg';
}
if(relatedTitles[relatedTitlesNum].length>35) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+"...";
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
}}}}
function removeRelatedDuplicates_thumbs() {
var tmp = new Array(0);
var tmp2 = new Array(0);
var tmp3 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains_thumbs(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp3.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
tmp3[tmp3.length - 1] = thumburl[i];
}}
relatedTitles = tmp2;
relatedUrls = tmp;
thumburl=tmp3;
}
function contains_thumbs(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels_thumbs() {
for(var i = 0; i < relatedUrls.length; i++)
{
if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))) {
relatedUrls.splice(i,1);
relatedTitles.splice(i,1);
thumburl.splice(i,1);
}}
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
if(relatedTitles.length>0) document.write('<h2>'+relatedpoststitle+'</h2>');
document.write('<div style="clear: both;"/>');
while (i < relatedTitles.length && i < 20 && i<maxresults) {
document.write('<a style="text-decoration:none;padding:5px;float:left;');
if(i!=0) document.write('border-left:solid 0.5px #d4eaf2;"');
else document.write('"');
document.write(' href="' + relatedUrls[r] + '"><img style="width:100px;height:100px;" src="'+thumburl[r]+'"/><br/><div style="width:150px;height:40px;border: 0pt none ; padding-top: 10px; text-align: center; font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; line-height: normal; font-size-adjust: none; font-stretch: normal;">'+relatedTitles[r]+'</div></a>');
if (r < relatedTitles.length - 1) {r++;} else {r = 0;}
i++;
}
document.write('</div>');
}
//]]>
</script>
</b:if>
<!-- Entradas relacionadas con miniatura. Script y Estilo -->

¿TODO OK? PUES NO TE VAYAS QUE QUEDA 1 PASO MÁS.



 Volvemos a la cajita de búsqueda y ahora vas a pegar esta línea de código <b:includable id=’postQuickEdit’ var=’post’> , haz un intro y pega el siguiente código sobre el 1º </b:includable>
que encuentres (te recomiendo que sigas el vídeo para no liarte).

<!-- Entradas relacionadas con miniatura -->
<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>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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: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 tutorials</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=4;
var relatedpoststitle=&quot;Espera, aún hay más&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Entradas relacionadas con miniatura -->


Este código marca la ubicación del gadget, la cantidad de entradas relacionadas a mostrar y la frase con la que vamos a invitar al lector a descubrir otras entradas requetefantásticas que tenemos en el blog, así que, imaginación al poder ¡convéncelo! .


Y con esto terminamos (por fin), no se te olvide guardar los cambios antes de salir de la plantilla. Ya sé que es un poquitín largo, pero con el videotutorial no vas a tener ningún problema y si lo tienes, para eso estoy yo, así que pregunta lo que haga falta.


 Espero que te haya gustado y que estés pletórica con tu flamante gadget de entradas relacionadas. Me encantaría que me lo contaras todo en comentarios. Que pases un gran domingo, aprovecha que ya está empezando a rascar bien el Lorenzo 🌞

Te espero abajo para que me cuentes qué te ha parecido, que tengas un gran día!



Imagen portada: PinkPot



¿Te gustaría seguirme en tu lector de feeds favorito?





¿Quieres aprender a diseñar bonito y tener un blog atractivo? Échale un vistazo al Curso de Photoshop para Blogueras Creativas, con el que podrás perfeccionar tu manejo de Photoshop, a la vez que desarrollas tu marca y creas el blog que deseas tener. Es un curso muy completo, en el que sin duda, habrá un antes y un después en tus diseños. Échale un vistazo:




Comentarios

  1. Me va a ser superutil esta entrada porque yo siempre pongo dos enlaces a otras entradas pero lo hago en plan básico y con tu ayuda me va a quedar más bonito y profesional, yo no entiendo de estas cosas pero tengo una amiga que me lleva todo esto y voy a ponerla a ello, ya te contaré, un saludo
    Walkingtopennylane

    ResponderEliminar
    Respuestas
    1. Genial, verás que bien te viene. Sobre todo si tienes organizados tus posts por etiquetas, vas a notar un aumento considerable de páginas vistas. Ya me contarás, un saludo Penny!

      Eliminar
  2. Me parece muy útil y creo que le voy a dar mucha utilidad a tu post la verdad es que llevo fatal la parte técnica del blog y me cuesta un mundo ponerlo en práctica pero espero poco a poco desenvolverme cada vez mejor, gracias por tu ayuda

    ResponderEliminar
  3. Qué buen post.
    Aunque yo ya lo tengo instalado en mi blog, no está nada mal, saber como personalizarlo. Tomo nota y me quedo por aquí.
    saludos

    ResponderEliminar
  4. Ala...y a las de wordpress....de verdad que me vais a hacer q me vuelva de blogger....

    ResponderEliminar
    Respuestas
    1. Yo es que en Wordpress estoy pez, pero creo que allí debéis tener infinidad de plugins para ponerlos automáticamente, estoy segura. Con que le preguntes a San Google por Plugins de entradas relacionadas para Wordpress, fijo que te salen tropecientos ;) un beso Iza, ya me contarás!

      Eliminar
  5. Creo que haberme suscrito a tu blog, aunque sea hombre XD, es uno de los mayores aciertos para mi blog. Esta entrada la necesitaba: http://oi63.tinypic.com/2meuwwx.jpg
    Lo he modificado completamente para que cuadre con mi página y el efecto giratorio circular, es brutal, porque tengo esos efectos en mi página y buscaba justamente este gadget que creía que no existía...
    Yo no necesito un video de 30 minutos para hacerlo, pero de todas formas, todo el trabajo que te curras simplemente para que cualquier persona pueda hacerlo paso a paso es digno de mención y quitarse el sombrero, que nadie te quite esta afición y esas ganas por esto, me declaro fan incondicional aunque te haya encontrado por casualidad y no me fijara mucho al principio en tu web porque no me consideraba un target para él.

    ResponderEliminar
    Respuestas
    1. Muchas gracias Raude, me alegra muchísimo ver lo bien que adaptais los tutoriales a vuestros blogs, te ha quedado fantástico. Sabes que aquí eres bienvenido, esa entrada tenía que hacerla, para explicaros a los chicos, por qué seguiré hablando en femenino y para que todos seáis conscientes de que debéis conocer a vuestro público ideal, sin apartar a nadie, pero sí teniendo claro cual es el sector mayoritario de vuestro blog. Para mí lo más importante es que os sirva lo que cuento y te agradezco mucho que valores el curro que tiene, yo lo hago encantada y más cuando veo el resultado en vuestros blogs, un abrazo!

      Eliminar
  6. ¡Yo sí que estoy pez en estas cosas! Madre mía, es ver una tabla de programación y me vuelvo loca. ¡Qué trabajazo que tiene lo que has compartido! Espero poder encontrarlo en Wordpress por ahí. Un beso, guapa! Por cierto, me encanta el nombre de tu blog. ¡Me identifico plenamente! :)

    ResponderEliminar
    Respuestas
    1. Jajajaa, poco a poco, yo tampoco entendía un pimiento de código y aquí me tienes. Cuando te interesa mucho un tema, si persistes lo dominas. Es cuestión de práctica y tiempo. Seguro que lo encuentras en Wordpress, con sus tropecientos plugins, lo tienes mucho más fácil que nosotros :) un besote!

      Eliminar
  7. Gracias Raquel, de nuevo esta entrada va genial para personas como yo, que hace poco tiempo están en el mundillo blogger van aprendiendo poco a poco.
    Un saludo!

    ResponderEliminar
    Respuestas
    1. Me alegro un montón de que te sirva Elisa, veras como poco a poco lo entiendes todo perfectamente, un saludo!

      Eliminar
  8. No conocía tu blog pero solo puedo decir que me ha ENCANTADO. La entrada la encuentro muy interesante y ahora que estoy haciendo cambios en mi web, me irán genial. Además me dejo tu blog en favoritos para ir leyendo las otras entradas que seguro me serán de mucha ayuda. Muchos besitos!!

    ResponderEliminar
    Respuestas
    1. Muchas gracias Elena, seguro que te va a venir muy bien para personalizarlo a tu gusto y sacarle mucho partido, besotes!

      Eliminar
  9. Ay me encantan tus recomendaciones, a ver si saco un huequito en mi apretada agenda divina para poner en marcha todo lo posible por mejorar mi blog al máximo :) GRACIAS POR LOS CONSEJOS. Besos pink.

    ResponderEliminar
    Respuestas
    1. Jajaja gracias a ti, Palabra de Diva. El blog también hay que divinizarlo lo máximo posible, un beso!

      Eliminar
  10. gracias por los consejos, me apunto a la comunidad!

    ResponderEliminar
    Respuestas
    1. Gracias a ti por unirte Esther, bienvenida, espero que le saques mucho partido. Un beso!

      Eliminar
  11. No te conocía pero desde ya me quedo !!!

    No me ha llegado el correo de confirmación todavía, pero intentaré hacer la opción 2 !!!

    Encantada de conocerte !!!

    ResponderEliminar
  12. upppssss una última cosa... yo tengo puesto el de linkwithin pero sin tocar la plantilla en un gadget html... se elimina el gadget antes de hacer lo nuevo y listo no??

    Gracias

    ResponderEliminar
  13. Cada dia encuentro cosas nuevas que me encantan, mil gracias por todo!

    ResponderEliminar
    Respuestas
    1. Me alegra mucho que te sirva Esther, gracias a ti por comentármelo ;) !

      Eliminar
  14. ¡Hola!
    Estoy en plan renove en el blog he intentado poner las entradas relacionadas siguiendo tu tutorial (sin LINKWITHIN) y no hay manera que me funcione. Vamos he probado con todas las opciones, cuadrados, redondas... y nada, no se ve. ¿Tarda en que funcione?
    Es que he seguido el tuto mil veces y nada.
    Gracias.
    Besotes

    ResponderEliminar
  15. Pues no sé, porque lo he hecho en mi blog y nada, lo he puesto en un blog de pruebas y nada, y también en la plantilla que estoy usando para la nueva imagen del blog (me he creado un nuevo blog de pruebas para ir haciendo los cambios allí jejeje)
    Nada chica, quizás blogger me tiene manía, pero no consigo que me funcione en ninguno de los blogs, y como no me mola LINKWITHIN, ya veré que hago...

    ResponderEliminar
    Respuestas
    1. Perdona que no te haya contestado antes, Carolina, pero apenas he parado en casa. La verdad es que es muy raro, que no te funcione en ninguno de los 3 blogs. Si quieres, me contactas por privado y le echo un vistazo personalmente, a ver si puedo hacerlo funcionar. Ya me dices :)

      Eliminar

Publicar un comentario