Posts relacionados y opciones para compartir las entradas en Blogger

Posts relacionados y opciones para compartir las entradas en Blogger

Desde hace algunos días Erick me ha pedido que le muestre cómo obtener el mismo footer en las entradas que el que uso en mi blog, es decir que incluya opciones para compartir, entradas relacionadas, enlaces y otras funciones.


El resultado es muy similar a este:

Añadiendo el footer en Blogger:

Paso 1: Añadiendo las secciones:

En ''Diseño | Edición HTML'' marcaremos ''Expandir plantillas de artilugios'', buscaremos la siguiente sección:
<data:post.body/>
Justo debajo, pegaremos el siguiente código:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='contenedor'>
<div id='compartir'>

<p>Compartir:</p>

<a class='twitter' expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot;: &quot; + data:post.url' rel='nofollow' target='_blank' title='Twittear'><img src='https://lh3.googleusercontent.com/-ZMNstTQBIDA/TYLOGEj41uI/AAAAAAAAAdM/n_4rUoHcKJo/s1600/twitter.png' width='20'/></a>

<a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url+ &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Compartir en Facebook'><img src='https://lh4.googleusercontent.com/-CUtQ6kBQkTg/TYLOEdjw_AI/AAAAAAAAAdA/pHni6wywITA/s1600/facebook.png' width='20'/></a>

<a class='digg' expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Digg This'><img src='https://lh4.googleusercontent.com/-ovYjTuczvP8/TYLOBtxn9uI/AAAAAAAAAc4/ujelP_eOGkw/s1600/digg.png' width='20'/></a>

<a class='delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Delicious'><img src='https://lh3.googleusercontent.com/-1sMwHkUe9vU/TYLQmuhuhDI/AAAAAAAAAdU/ophW59l0LNU/s1600/delicious.png' width='20'/></a>

<a class='myspacee' expr:href='&quot;http://www.myspace.com/Modules/PostTo/Pages/?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' rel='nofollow' target='_blank' title='Compartir en Myspace'><img src='https://lh3.googleusercontent.com/-3XMmSAIqSqs/TUt-_5lsyzI/AAAAAAAAAGU/xBZu64-48S0/s1600/myspace.png' width='20'/></a>

&lt;a href=&quot;javascript:popw=&#39;&#39;;Q=&#39;&#39;;x=document;y=window;if(x.selection) {Q=x.selection.createRange().text;} else if (y.getSelection) {Q=y.getSelection();} else if (x.getSelection) {Q=x.getSelection();}popw = y.open(&#39;http://www.blogger.com/blog_this.pyra?t=&#39; + escape(Q) + &#39;&amp;u=&#39; + escape(location.href) + &#39;&amp;n=&#39; + escape(document.title),&#39;bloggerForm&#39;,&#39;scrollbars=no,width=475,height=300,top=175,left=75,status=yes,resizable=yes&#39;);if (!document.all) T = setTimeout(&#39;popw.focus()&#39;,50);void(0);&quot;&gt;<img src='https://lh5.googleusercontent.com/--XlBitL13CA/TUt-3Mh5MoI/AAAAAAAAAEw/TBRYqetuXB4/s1600/blogger.png' width='20'/>&lt;/a&gt;


<a class='fresqui' expr:href='&quot;http://tec.fresqui.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Fresqui'><img src='https://lh3.googleusercontent.com/--W41bK3eeVI/TYLRpFtsaKI/AAAAAAAAAdc/evQOnl5TAi8/s1600/fresqui.png' width='20'/></a>

<p>&lt;label for=&quot;aa-url&quot;&gt;URL para compartir:&lt;/label&gt;&lt;br /&gt;&lt;input size=&quot;40&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-url&quot; value=&quot;<data:post.url/>&quot; /&gt;</p>

<div id='ab_shorturl'>
<form expr:id='&quot;ab_short_holder_&quot; + data:post.id'/></div>
<script type='text/javascript'>
acortador_url.init(&quot;ab_short_holder_<data:post.id/>&quot;,&quot;<data:post.url/>&quot;)
</script>

<p>Votar:</p>

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'/>
<g:plusone expr:href='data:post.url' size='small'/>

<a expr:href='&quot;http://bitacoras.com/anotaciones/&quot; + data:post.url'><img alt='votar' expr:src='&quot;http://widgets.bitacoras.com/votar/mini/&quot; + data:post.url' title='Votar este artículo en Bitacoras.com'/></a>

</div>
<div id='related-posts'>
<p>Posts Relacionados: </p>
<font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast != &quot;true&quot;'/><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&amp;max-results=2&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</div>
</b:if>

Paso 2: Añadiendo los scripts de bit.ly y de las entradas relacionadas:

Ahora busca la siguiente sección:
</head> 
Arriba de esta, deberás pegar el siguiente código:
<script charset='ISO-8859-1' src='http://archivos.ayuda-bloggers.info/Scripts%20Recuperados/posts-relacionados-blogger.js' type='text/javascript'/>
<script charset='utf-8' src='http://bit.ly/javascript-api.js?version=latest&amp;login=cloudx18&amp;apiKey=R_42c899cd058d1c93edca0e05ffee5a33' type='text/javascript'/>
<script src='http://archivos.ayuda-bloggers.info/Scripts%20Recuperados/acortador%20bitly.js' type='text/javascript'/>

Paso 3:  Añadiendo CSS:

Ahora deberás buscar la siguiente sección:
]]></b:skin>
Arriba de esta deberás pegar el siguiente fragmento:
#compartir {width:230px;padding:2px;float:left;background:#fff;line-height: 1.5em;}
#contenedor {border-top:1px solid #c5c5c5;padding:2px 13px;margin-bottom:3px;margin-top:50px;}
#contenedor img {border:none;padding:0px;}
#related-posts {padding-left:3px;float:right;width:230px;}

Guarda los cambios y listo.

Importante: 

Como puedes apreciar, son combinaciones de distintos tutoriales, simplemente las he añadido de forma conjunta, si sólo quieres algunas funciones sólamente, puedes revisar los siguientes posts:
En el caso del script de Bit.ly, es necesario una API Key, pero como he agregado la mía no será necesario.
Artículo aleatorio
BuySellAds
BuySellAds
BuySellAds
BuySellAds
BuySellAds
Artículos destacados
Marca de agua en las imágenes con CSS # - Marca de agua en las imágenes con CSS
Efecto de desenfoque con CSS # - Efecto de desenfoque con CSS
Botones para subir y bajar en Blogger # - Botones para subir y bajar en Blogger
Insertar una página externa en una entrada en Blogger # - Insertar una página externa en una entrada en Blogger
Ocultar entradas con determinada etiqueta en el inicio de Blogger # - Ocultar entradas con determinada etiqueta en el inicio de Blogger