AyudaBloggers{...}
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.
Escrito por
víctor calderon

Víctor Calderón es un jóven chileno de 21 años, estudiante analista programador y orgulloso padre de una hermosa niña.

Moderador en +TBEE y escritor/fundador de este blog.

tweet

Blogroll de Ayuda Bloggers