20/12/12
Como crear botones flotantes para compartir todas las redes sociales, Crear Bar Flotante
El widget que les enseñare a crear sirve para compartir las redes sociales más usadas actualmente. Como ustedes sabrán es una nueva tendencia usar este tipo de botones flotantes, porque sirve para darle un nuevo aire a nuestro blog de blogger. Ahora con este widget los usuarios que visitan su blog, podrán compartir todos sus post interesantes, y así tener más tráfico en nuestro blog. El widget que les presentare a continuación tiene una buena personalización para usarlo con Twitter, Pinterest y un botón de correo electrónico. Este widget está diseñado para que flote en la parte izquierda de su blog, y cuando el usuario está leyendo sus artículos les acompañara de arriba hacia abajo y no se despegara de ellos en ningún momento, con esto usted tiene una ventaja, a que cualquier visitante aplaste cualquier botón de cualquier red social y lo comparta con sus amistades, esto hace que su blog tenga toneladas de trafico diariamente, gracias a esta barra de botones flotantes que tienen en sus botones las redes sociales más utilizadas actualmente. He probado este widget en algunos navegadores como Internet Explorer 7, firefox, Chrome, etc. Y funciona correctamente sin ningún error de navegación. Antes de compartir este widget con ustedes les pido que hagan un enlace de retroceso hacia mi blog, por haberles ayudado a innovar su blog. Les recuerdo que es completamente gratis utilizar este widget y es prohibida su venta. Bueno es hora de trabajar!
Su primera prioridad debe ser siempre Facebook, Google +, Twitter, Linkedin y ahora Pinterest. En todos los botones deben estar incluidas las mejores redes sociales, para poder compartir sus artículos y así puedan circular por todo el mundo.
Añadir Bar Flotante a Blogger
1.- Ir a Blogger> Plantilla
2.- Copia de seguridad de su plantilla
3.- Haga clic en Edición de HTML
4.- Haga clic en Continuar
5.- Luego haga clic en Expandir plantillas de artilugios
6.- Busque este código
7. Justo debajo pegue el siguiente código:
<b:if cond='data:blog.pageType != "static_page"'>
<style>
.mbt_social_floating{
position:fixed; bottom:10%; margin-left:-60px; float:left; width:60px;
background-color:#f7f7f7; padding: 5px 0 0px 0px;
border-top:1px solid #ddd;
border-left:1px solid #ddd;
border-bottom:1px solid #ddd;
z-index:9999px !important;
border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;
}
.mbt_social_floating .mbt_side_social_button{
margin-bottom:5px;
float:none;
height:auto;
width:60px;
}
.mbt_social_floating .st_twitter_vcount, .mbt_social_floating.st_plusone_vcount, .st_email{
margin-left:5px;
}
.mbt_social_floating .st_fblike_vcount{
margin-left:5px;
}
.mbt_social_floating .stButton_gradient{
background:none !important;
height:21px !important;
padding-left:0 !important;
}
.mbt_social_floating .chicklets, .mbt_social_floating .stMainServices {
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrd12Y70X6w6Q-Sm2Y2zJUHtaadFQSv09COS7K0hnwi7JBHm9WLqGKwDgSShI2neoyi_oi0zYXkRcPhoM1X_2T3-Y06I61_LY-2mCB32nyePV2_cc2JFS9YAnRUtqEtxouxR-Olm6PB8DK/s400/gc_social_sprite.gif') no-repeat !important;
height:19px !important;
width:45px !important;
padding:0 !important;
}
.st_email .chicklets{
background-position:0 -77px !important;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrd12Y70X6w6Q-Sm2Y2zJUHtaadFQSv09COS7K0hnwi7JBHm9WLqGKwDgSShI2neoyi_oi0zYXkRcPhoM1X_2T3-Y06I61_LY-2mCB32nyePV2_cc2JFS9YAnRUtqEtxouxR-Olm6PB8DK/s400/gc_social_sprite.gif') !important;
}
.mbt_social_floating .st_twitter_vcount .st-twitter-counter{
background-position:0 -58px !important;
}
.mbt_social_floating .stButton_gradient{
border:none !important;
}
.mbt_social_floating .stBubble_count{
width:44px !important;
font-size: 15px !important;
font-weight: normal !important;
padding-top:7px !important;
height:23px !important;
background:none !important;
}
.mbt_social_floating .st_twitter_vcount .stBubble_count{
color:#00a6df;
background-color:#f8fbfc !important;
}
.st_fblike_vcount{
margin-bottom: 0px;
display: block;
}
.st_twitter_vcount{
margin-bottom: 3px;
display: block;
}
.st_email{
margin-bottom: 5px; margin-top: 3px;
display: block;
}
.mbt_social_floating .stBubble{
background-position: 21px 31px !important;
height:35px !important;
}
</style>
<div class='mbt_social_floating'>
<script type='text/javascript'>var switchTo5x=true;</script>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({onhover:false});</script>
<span class='st_fblike_vcount' displaytext=''/>
<span class='st_twitter_vcount' displaytext='' st_via='kendollmusic'/>
<div style='margin:5px 0 0px 0;'>
<center><a class='pin-it-button' count-layout='vertical' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url'>Pin It</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
var e=document.createElement('script');
e.setAttribute('type','text/javascript');
e.setAttribute('charset','UTF-8');
e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r=' + Math.random()*99999999);
document.body.appendChild(e);
}
</script> </center>
</div>
<div style='margin:0px 0 0 5px;'>
<span class='st_plusone_vcount' displaytext=''/>
</div>
<div class='addthis_toolbox addthis_default_style ' style='margin:5px 0px 5px 8px;'>
<a class='addthis_counter'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
<script type='text/javascript'>
var addthis_config = {
ui_cobrand: "MY BLOGGER TRICKS",
ui_header_color: "#ffffff",
ui_header_background: "#0080FF"
}
</script>
<span class='st_email' displaytext=''/>
<p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://www.kendollmusic.com/' style='color:#CAC8C8;'>Widgets</a></p>
</div>
</b:if></b:if>
