Antes de comenzar veremos una demostración:
COMENCEMOS:
- Paso 1: Vamos a Blogger>>Plantilla>>Edicion HTML>>Expandir Plantilla de Artilugios
- Paso 2: Buscamos la siguiente linea (Ctrol + F)
</head>
- 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 == "item"'>
<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 == "item"'>
<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&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
No hay comentarios:
Publicar un comentario