24 marzo 2014

Entradas relacionadas con botones para compartir en Blogger

entradas relacionadas con botones compartir

Cuando un lector busca algún tema en internet y accede a vuestro blog, nuestro objetivo es conseguir que la experiencia del lector no finalice con la lectura de la primera entrada y uno de los aspectos principales para atraer su atención, son las "entradas relacionadas" con un mismo tema, con ello, animamos al usuario a leer otras entradas de nuestro blog.

Este truco se divide en dos apartados, uno nos muestra las "entradas relacionadas" con un diseño limpio y atractivo, a través de una lista donde nos presenta la imagen destacada en miniatura y un pequeño resumen del post relacionado en tooltip (descripción emergente) y otro unos "botones para compartir" tus entradas en las diferentes redes sociales (Google, Twitter y Facebook) con un efecto deslizable.

La demo la podéis observar en la imagen superior y bajo esta entrada.

Como Instalar

Entra al panel de administración > Seleccione la Plantilla > Haga clic en Editar HTML >

1.- Como siempre, hay que instalar el plugin de jQuery, si tu blog ya tiene el plug-in de jQuery, sigue directamente al siguiente paso.
Si no añade el código siguiente antes de </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>

2.- Empezamos a instalar la llamada al script y los estilos a las páginas individuales, colocando el siguiente código antes de </head>

<b:if cond='data:blog.pageType == "item"'> <style type='text/css'>/*<![CDATA[*/@import url(http://fonts.googleapis.com/css?family=Open+Sans:400);@import "//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css";#sbuttons { border-radius: 5px; padding: 14px 7px; background:#ffffff; width: 500px; overflow: hidden; margin: 2px auto 0; box-shadow:0 2px 3px rgba(71, 71, 71, 0.31);}.button { background: #DCE0E0; position: relative; display: block; float: left; height: 40px; margin: 0 7px; overflow: hidden; width: 150px; border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;}.icon { display: block; float: left; position: relative; z-index: 3; height: 100%; vertical-align: top; width: 38px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 3px; -webkit-border-radius: 3px 0px 0px 3px; border-radius: 3px 0px 0px 3px; text-align: center;}.icon i { color: #fff; line-height: 42px;}.slide { z-index: 2; display: block; margin: 0; height: 100%; left: 38px; position: absolute; width: 112px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 0px; -webkit-border-radius: 0px 3px 3px 0px; border-radius: 0px 3px 3px 0px;}.slide p { font-family: Open Sans; font-weight: 400; border-left: 1px solid #fff; border-left: 1px solid rgba(255,255,255,0.35); color: #fff; font-size: 16px; left: 0; margin: 0; position: absolute; text-align: center; top: 10px; width: 100%;}.button .slide { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}.facebook iframe { display: block; position: absolute; right: -15px; top: 10px; z-index: 1;}.twitter iframe { width: 90px !important; right: 5px; top: 10px; z-index: 1; display: block; position: absolute;}.google #___plusone_0 { width: 70px !important; top: 10px; right: 15px; position: absolute; display: block; z-index: 1;}.facebook:hover .slide { left: 150px;}.twitter:hover .slide { top: -40px;}.google:hover .slide { bottom: -40px;}.facebook .icon, .facebook .slide { background: #305c99;}.twitter .icon, .twitter .slide { background: #00cdff;}.google .icon, .google .slide { background: #d24228;} /*]]>*/</style></b:if>
3.- Ahora añadimos las entradas relacionadas y los botones para compartir después de <div class='post-footer'> (Normalmente hay dos, colócalo trás el segundo.)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<table border='0' cellpadding='2' cellspacing='0' width='100%'>
<tr>
<td rowspan='4' width='80%'>
<style type='text/css'>
.entradas-relacionadas{ margin:2em auto 0; font:normal normal 12px/1.4 Arial,Sans-Serif;margin-top:-5px;}
.entradas-relacionadas h4{ font-size:150%; margin:0 0 .5em;color:gray}
.entradas-relacionadas a{color:gray}
.entradas-relacionadas a:hover{color:darkred}
.entradas-relacionadas-style-6 li{position:relative}
.entradas-relacionadas-style-6 .entradas-relacionadas-item-thumbnail{ width:50px; height:50px; max-width:none; max-height:none; background-color:gray; border:2px solid gray; padding:0; float:left; margin:0 10px 0 0}
.entradas-relacionadas-style-6 .entradas-relacionadas-item-title{ display:block; font-weight:bold}
.entradas-relacionadas-style-6 .entradas-relacionadas-item-summary{ display:block; overflow:hidden; font-size:11px}
.entradas-relacionadas-style-6 .entradas-relacionadas-item-tooltip{color:black; position:absolute; bottom:100%; left:-10px; z-index:999; margin-bottom:10px; border:3px solid gray; background-color:#fff; padding:10px; width:90%; height:auto; display:none}
.entradas-relacionadas-style-6 .entradas-relacionadas-item-tooltip:before,
.entradas-relacionadas-style-6 .entradas-relacionadas-item-tooltip:after{ content:&quot;&quot;; display:block; width:0; height:0; border:10px solid transparent; border-top-color:gray; position:absolute; top:100%; left:21px}
.entradas-relacionadas-style-6 .entradas-relacionadas-item-tooltip:after{ border-top-color:gray; border-width:9px; margin-left:1px}
.entradas-relacionadas-style-6 li:hover .entradas-relacionadas-item-tooltip{display:block}
.comparte h4{ font-size:170%; margin:0 0 .5em;color:gray;text-align:center;margin-top:-3px;}
</style>
<div class='entradas-relacionadas' id='entradas-relacionadas'/>
<script type='text/javascript'>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop></b:if>];
var relatedPostConfig = {
homePage: &quot;<data:blog.homepageUrl/>&quot;,
widgetTitle: &quot;&lt;h4&gt;ENTRADAS RELACIONADAS&lt;/h4&gt;&quot;,
numPosts: 6,
summaryLength: 170,
titleLength: &quot;auto&quot;,
thumbnailSize: 50,
noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,
containerId: &quot;entradas-relacionadas&quot;,
newTabLink:false,
moreText: &quot;&quot;,
widgetStyle: 6,
callBack: function() {}
};
</script>
<script src='https://googledrive.com/host/0BwZ7Sm1QQc1lTnlVZG1DS3V0N3c/entradas-relacionadas.js' type='text/javascript'/>
</td>
<td width='20%'>
<div class='comparte' style='float: right; padding:0px; margin-left:20px;'>
<h4>COMPARTE</h4>
<div class='facebook button'> <i class='icon'> <i class='icon-facebook'> </i> </i> <div class='slide'> <p> facebook </p> </div> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=120&amp;height=20&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:120px; height:20px'/> </div> <div class='twitter button'> <i class='icon'> <i class='icon-twitter'> </i> </i> <div class='slide'> <p> twitter </p> </div> <a class='twitter-share-button' href='https://twitter.com/share'> Tweet </a> <script> !function(d,s,id){ var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;; if(!d.getElementById(id)){ js=d.createElement(s); js.id=id; js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;); </script> </div> <div class='google button'> <i class='icon'> <i class='icon-google-plus'> </i> </i> <div class='slide'> <p> google+ </p> </div> <div class='g-plusone' data-size='medium'> </div> <script type='text/javascript'> (function() { var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true; po.src = &#39;https://apis.google.com/js/plusone.js&#39;; var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s); } )(); </script></div></div> </td></tr> </table></b:if>

GUARDAR PLANTILLA!

Espero que esta entrada haya sido de vuestro interés y que le deis el valor que se merece a las "entradas relacionadas" como táctica para atraer hacia vuestro contenido a esos usuarios que han entrado en vuestro blog.


Escrito por:

Mi nombre es Antonio, soy sobre todo Sevillista y apasionado con los blog desde el 2007.

Sígueme en: | Facebook | Twitter | Google+

10 comentarios

Gracias Antonio lo probare siemrpe tu con tus aportes para blogger.... Gracias

Hola ,gracias por tus posts..
La fecha me ha desaparecido hace unos dias que estuve toqueteando el html para añadir el menu fijo arriba de la cabezera..

Y no hay forma de hacerla volver a aparecer..

Espero tu respuesta para poder hacer volver la fecha,este es mi blog:
www.27forever.es

Gracias de antemano.

Gracias

Rocío perdona por la tardanza en contestar, he estado muy liado, de todas formas veo que ya lo has solucionado.

Buenas, estoy poniendo esto en mi blog www.misofertasfavoritas.com y no me queda bien el boton de twitter, haber si me sabes decir que puede ser. Un saludo y gracias!

Alber no lo veo instalado, así que no puedo ver el problema.

Hola, lo tuve que quitar porque se me quedaba por encima del otro en un mismo cuadrado, estuve probando, cambiando el código fuente (css) y mirando si me respondías pero la impaciencia pudo conmigo... jejeje veía visitas y eso ahí que no había por donde cogerlo y desistí jeje. Muchas gracias igualmente, tienes un enorme blog donde te sigo para configurar muchas cosas en blogger, quería preguntarte cosas relacionadas con Adsense ya que lo acabo de implementar para saber un poco las estadisticas, si quieres me puedes mandar un mail o te dejo yo el mio y hablamos! Un saludo y gracias nuevamente

amigo de casualidad no tienes algo que de votación de like a los comentarios...

Nitro mira esto está en ingles pero con traducir tienes bastante, espero que sea lo que buscas.

si funciona te debo la vida amigo, que buena que existe gente en planeta como voz que ayuda sin cambio alguno...

Hola, disculpa, veo que tiene sus años esta entrada, me intereso demasiado poder añadir esto a mi blog, pero resulta que no funciona como deberia, no sé si sera porque algo está caido o yo estoy fallando.. hago todo tal cual indicas y solo me sale lo de la columna derecha "COMPARTE", con con los 3 botones sociales, el de facebook no tiene nada una vez que se desliza. Hay solución? :p

De antemano gracias y mil disculpas por revivir este tópico.


Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"