Tutoriales Sobre Blogger: Barra deslizante para tus redes sociales

Hay muchas redes sociales en la Internet como savemos pero solamente tres son fundamentales en un blog esas son, Facebook, Twitter y Google +.
Tener estas redes sociales son importantes ya que pueden aumentar tus visitas si no también tu ranking.

Antes de comenzar veremos una demostración:

Demostración

Comencemos: 

• Paso 1: Vamos a Blogger>>Plantilla>>Edicion HTML>>Expandir Plantilla de Artilugios
• Paso 2: Buscamos la siguiente linea (Ctrol + F)

  </head>

Nota:- Si ya tienes un Plugin JQuery instalado en tu plantilla omite este paso

• Paso 3: Justo por encima de   </head> pegamos el siguiente Plugin JQuery.

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

• Paso 4: Todavia en la plantilla buscamos la siguiente linea (Ctrol +F).

<data:post.body/>

• Paso 5: Justo debajo de <data:post.body/> pegamos el siguiente te código  

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='md-active-share-comment-marker'/>
</b:if>

• Paso 6: Buscamos la siguiente linea (Ctrol + F)

</body> 

• Paso 7: Justo por encima de </body> pegamos el siguiente código 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='http://makingdifferent.github.com/blogger-widgets/Floating%20Social%20sharing%20Horizontal%20Bar.js' type='text/javascript'/>
<div id='md-share-window' style='width: 100%; display: block; position: fixed; top: -450px; left: 0px; background-color: rgba(235, 88, 60, 0.8); z-index: 100; padding: 0 0 10px 0;'>
<div style='width: 800px; margin: 20px auto;'>
<span id='twitter' style='float:left; margin: 0 5px; padding: 3px 0 0 0;'>
<a class='twitter-share-button' data-count='vertical' href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></span>
<span id='md-plusone' style='float:left; padding-top: 4px; margin: 0 5px;'>
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'/>
<g:plusone size='tall'/></span>
<span id='md-fblike' style='float: left; margin: 0 5px; padding: 4px 0 0; width: 50px; overflow: hidden;'>
<div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#appId=155934781145405&amp;xfbml=1'/>
<fb:like font='' href='' layout='box_count' send='false' show_faces='false' width='50'>
</fb:like>
</span>          
<div style='display:block; margin: 0 5px; padding: 5px 0px 0px; color: #FFFFFF'>
¿Te gusto? Comparte con tus amigos esta entrada ahora<br/>
<span style='color: #FFFFFF; font-size: 18px;'><data:blog.pageName/></span>
</div>
</div>
</div>
</b:if>

• Paso 8: Guardamos los cambios realizados en la plantilla y listo disfruta de tu barra deslizante con tus redes sociales

Nota:- Puedes cambiar lo que esta en rojo por lo que desees