Poner Redes sociales estilo minimalista al final de cada post en blogger 2024

Un post más en Bloggin Red, respondiendo a un seguidor del blog quién gentilmente pidió saber como colocar los iconos sociales que justamente uso en mi blog al final del post podrás verlos el demo.

 

EL TUTORIAL

1. Empecemos es elemental y fácil de hacer, lo primero será ir a Plantilla > editar HTML y buscar el siguiente código </body> justo encima de él pegaremos lo siguiente:

<script type='text/javascript'>var addthis_config = {&quot;data_track_addressbar&quot;:true};</script>
    <script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=nguoiaolam' type='text/javascript'/>

2. Hecho lo anterior ahora vamos a la parte más incómoda y por la cual muchas personas dicen que no funciona es cuestión de paciencia probar y saber  buscar ya que cada plantilla es diferente, debemos buscar el siguiente código en nuestra plantilla <div class='post-footer'> justo debajo de él pegarás el siguiente código:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
                            <style type='text/css'>
.custom_images ul {display:inline; list-style:none}
.custom_images ul li {float:left; margin-right:1px}
</style>
                            
<div class='addthis_toolbox'>
 
<div style='margin: 50px 0px 10px; font-size: 30px;'>Compartir este Post</div>
<div class='custom_images'>
<span class='fade'><ul>
 
  <li><a class='addthis_button_facebook'><img alt='Share to Facebook' border='0' height='57' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii2LiZ1yrd7p-ReDdku_KVfG-69hhz3ZvCLRGJqBRX1UR7wGo2ZcqNJm6PPIaKl79mNEOq6z2xHJ3h6AbFD3YTbMJjs0hS5KQdbPn7k6sGaIoc0m_5rEigG-CuQEFJylyT284kkITJBBQ0/s57/Facebook%2520alt%25202.png' width='57'/></a></li>
  <li><a class='addthis_button_twitter'><img alt='Share to Twitter' border='0' height='57' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh07VhkAKwlST76RSW17gUxuUJGuJmIWUvLM-zQjWf_GjFCoY9Z-Y2ApGdrfaI1lVP86KeVgFBAe39UjzlAFEOJyYNGogqpYsL0scPr7CvlU-az92xGEYOrSl10TAKgjX7IjMSUMiTjq356/s57/Twitter%2520alt%25204.png' width='57'/></a></li>
  <li><a class='addthis_button_google_plusone_share'><img alt='Share to Google+' border='0' height='57' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJoKnq7yjQTrBU_d1Z8uKoGseyWbNEVzoe-Man3nLd0TlGSjiiKBHf10qDvn-YOqW7-dsLKxz3mvZJCjyVyNQrlNDeLpeNZAZhHKmSbAHxMHio-KdITOm8vlOC24rX4GjkF_L0GQjRmPTC/s57/Google%252B%2520alt%25202.png' width='57'/></a></li>
  <li><a class='addthis_button_stumbleupon'><img alt='Share to Stumble Upon' border='0' height='57' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq7_5wrmerNpETsvSIz5xZDG08TKZ9QkL-QKE7O8SXMvfwyGAB1eJqyoO5XfEqsgwz16LE_aTuQv6oDK2I3GH92IgKEYqSKjzmzTP7Ma-rnxP8LLvVH5S9U_3Hpoli4RufrqHmHTN7umfm/s57/StumbleUpon%2520alt.png' width='57'/></a></li>
  <li><a class='addthis_button_evernote'><img alt='Share to Evernote' border='0' height='57' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRvLVAWWGpB3qj3id1wzQrU3g2CGLpm71wavr8RnhKp4FFmT_CZnKz3Js0nFTF8ziQrYfzHrw1BSqa7m0kmT7SFVkVkHsQeRagNJm681WDoDCF0mTpHe9cV15RqR8VMN28NHMmsbFT-tvZ/s57/evernote-icon.png' width='57'/></a></li>
  <li><a class='addthis_button_blogger'><img alt='Share to Blogger' border='0' height='57' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAI8glFuAwmAqh2DfJ2q8HsPY1KjpVL-cNNyqCUeq_-s7l05cT85u1N8Z8S-qsvMRkv4DjFcZhIU2LElrzhroDkMiHVDIcNADIi1KsVWbjycv2vufcX_lk18fTLSKOt32TWEGoG3siSN8f/s57/Google%2520Blogger.png' width='57'/></a></li>
  <li><a class='addthis_button_email'><img alt='Share to Email' border='0' height='57' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGMfD8AQ9FmVEyCykxJA9GPzLNx0RJ6JOzXhGYDCx4EcNhMZISkE_Sg5YZGlxuguPwY5UAs5vEemLpRKaXO4Kykw4wVBbCAY5D9zU-HlzbADXsUnYXUC-AovW2vKKLxglok7pV10aaGB8J/s57/Mail%2520alt.png' width='57'/></a></li>
  <li><a class='addthis_button_yahoomail'><img alt='Share to Yahoo Messenger' border='0' height='57' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqn3Bo7UxYVug3YeNqGb6ONk-1eyY6kiHozJqJl5_RtrwDzels2LhS9KfrLvP4MP0Uu798mJSQdAIyeFRXZNe57vPlEokyP6UZ5fcz_WcR8_mPkqbwl_i6r_yvyWxKemJK1V8AIn4xntJv/s57/Yahoo%2521%2520alt%25201.png' width='57'/></a></li>
 
</ul></span>
 
</div>
    
</div>
 </b:if>  

Si en el peor de los casos no te da busca la siguiente línea y pega el mismo anterior código justo debajo <div class='post-footer-line post-footer-line-3'> recuerda paciencia ya que si ves que sirve en mi blog servirá en el tuyo.

3. Hecho lo anterior sólo queda guardar y verificar que todo esté bien.

EXPLICACIÓN COLORES CÓDIGO

- Lo que tenemos en Naranja es el título pequeño que llevará el gadget alusivo a que nuestros lectores compartan el contenido ¡Fácil!.

- Lo que tenemos en Azul son todos los links de cada uno de los iconos sociales recuerda que los puedes reemplazar sin problema alguno.

Es todo en este pequeño post muy fácil, recuerda comentar para dudas ocasionales.

Hasta la próxima BloggeRs,