La idea o truco de unir botones sociales en un gadget no es diferente porque hay un montón de widgets de Suscripciones que funcionan de la misma manera. Sin embargo, no son lo suficientemente flexibles como para soportar todas las plataformas sociales más importantes. Por ello, hemos diseñado un widget de Suscripción Social excelente. Tiene todas las plataformas sociales claves que son esenciales para un sitio web.
Hoy, en este artículo vamos a aprender a añadir Avanzado Widget de Suscripción social en Blogger.Este gadget está desarrollado para ser utilizado en la barra lateral de la página web. Sin embargo, cualquier persona puede utilizarlo de acuerdo a sus necesidades.
Ejemplo de este widget:
Cómo agregar este Widget de Suscripción social en Blogger?
Los pasos que se mencionan a continuación son sencillos y apenas se toma unos minutos para completar. Tenga en cuenta las instrucciones que se mencionan a continuación.
1.Entra en tu blogger
2.Ir a Diseño>>Añadir un Gadget>>Selecciona Html/Javascript
3.Ahora pega el siguiente codigo
<style>Personalización de este Widget:
/*--- MBL Advance Social Gadget --- */
#socialwid {
font-family:Arial, serif;
text-transform: uppercase;
font-weight:bold;
font-size:15px; color:white; text-align:center; margin-top:10px;}
#socialwid a {color:inherit;}
#mbladvance-sub div *{
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;}
#mbladvance-sub div #likered{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX6-LhBLP0G-lkUY46lfZaXD6ypwRRDUB-WZ0Py0V1n8UjZb8CBQqw8Kg69Gad-r-vmMW4YM-8HcLr_78rECiBtvOYVSEhqwLLgzbMyvlYPxm9RJ8o89OZfTc4vTZLec50bx8INkM0u2I/s1600/Sociala.png)!important;background-position:top left;
background-repeat:no-repeat;
height:242px;
width:300px;}
#mbladvance-sub div{
margin:0;
padding:0;
background-image:none!important;}
#mbladvance-sub{
margin-bottom:15px;
height:250px;
background-color:#ffffff}
</style>
<div id="mbladvance-sub" style="height: 257px!important;" class="block">
<div>
<div id="likered" style="height:257px!important;">
<div style="height: 47px;"></div>
<!--Google +1/Follow-->
<div style="width:300px; height:54px;overflow:hidden;border: 3px solid #8ec801;border-bottom: none;border-top: none; margin-top:1px;">
<span style="width:75px;display:inline-block;float:left;padding: 15px 0 0 23px; ">
<div class="g-plusone" data-href="http://www.ciudadblogger.info"></div>
</span>
<span style="display:inline-block; width:170px;float:right;">
<div class="g-plus" data-href="https://plus.google.com/116180896434879626623" data-width="170" data-height="69"></div>
</span>
</div>
<!--Facebook Like-->
<div style="border:1px solid #8ec801;padding:10px 10px 0 10px; border: 3px solid #8ec801;border-top: 1px solid #8ec801; border-bottom:none;">
<iframe src="//www.facebook.com/plugins/like.php?href=facebook.com%2Ftrucosdeblogger&send=false&layout=standard&width=280&show_faces=false&action=like&colorscheme=light&font&height=36" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:280px; height:36px;" allowtransparency="true"></iframe></div>
<!--Twitter Tweet/Follow-->
<div style="border: 3px solid #8ec801;border-top: 1px solid #8ec801;border-bottom: none; padding:10px 0 5px 10px;height: 50px;">
<span style="display:inline-block; width:195px;height: 35px;float: left;">
<a href="http://twitter.com/andante772" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @andante772</a>
</span>
<span style="display:inline-block;width:78px; overflow: hidden;line-height: 0;float: left;">
<a href="http://www.ciudadblogger.info" class="twitter-share-button" data-show-count="false" data-size="large" data-text="Mejor Website De SuperTrucosDeBlogger" data-url="http://www.ciudadblogger.info" data-via="ciudadblogger" data-hashtags="design">Tweet</a>
</span>
</div>
<!--Blogger--><div style="border: 3px solid #8ec801;border-top: 1px solid #8ec801; padding:8px 0 5px 10px;height: 54px;">
<span style="display:inline-block; width: 120px;height: 30px;overflow: hidden;line-height: 0;float:left;margin-left: 16px;">
<a href="http://www.blogger.com/profile/116180896434879626623" target="_blank">
<img style="margin-top: 2px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW_230qm9O1tHwt5nwIs7fuoSitrx3_nqQ29EERvwE0BZpGbHtnLSS6TBS6oIchU7rErmhBwonVc3fR2y8yO0FdOS22GpApCq4jrKMdUg_aV9n8yLyfoyZMVolM0Fk68T_S7yThIFPMbM/s1600/Bloggerzzz.gif" width="110" /></a>
</span>
<!--Pinterest-->
<span style="display:inline-block;width: 111px;height: 50px;overflow: hidden;line-height: 0;float: left;margin-left: 20px;">
<a href="http://pinterest.com/andante77" target="_blank"><img style="margin-top: 3px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtnMNnAchQQjIzQ6F0nNb8tSkiFgeSmFRmXGEE1kJf2dlzUkIgkdBQx-hM4VX9VAihSdAynaXqQAov6s67uLn7C3OleRReYUTDFyXxKsF8tfyZrjzaqfKpYJfSJqYDePrDvhdI3F9KYBQ/s1600/LogoRed.png" /></a>
<span style="display:inline-block;width:1px;height: 50px;overflow: hidden;line-height: 0;float: left;margin-left: 20px;"><div id="socialwid"></div>
</span></span></div>
<script src='https://mybloggerlab.googlecode.com/files/advsub.js' type='text/javascript'></div>
</div>
</div>
o
Google +1 / Follow URL: Reemplace http://www.ciudadblogger.info con su URL del sitio web. También Reemplace https://plus.google.com/116180896434879626623 con tu perfil de Google+ o URL de la página.
Facebook Like Button: Reemplazar trucosdeblogger con nombre de usuario de tu página de Facebook.
Twitter Sigue / Tweet: Reemplace http://twitter.com/andante772 con su URL Twitter.
Pinterest: Reemplace http://pinterest.com/andante77 con su URL Pinterest.
Blogger: Sustituir http://www.blogger.com/profile/116180896434879626623 con su Perfil de Blogger URL.
Eso es todo usted y sus visitantes lo apreciaran.
0 comentarios:
Publicar un comentario