Estilo CSS & Código HTML
<!-- Gadget Kanelo Master -->
<style>
.follow-container
{
width: 300px;
height: 300px;
padding: 0px;
}
#container-image
{
width: 100%;
height: 100%;
}
#social-gadget-buttons-container
{
position: relative;
top: -250px;
}
#follow-facebook-button
{
position: absolute;
top: 15px;
left: 100px;
}
#follow-youtube-button
{
position: absolute;
top: 70px;
left: 100px;
}
#follow-twitter-button
{
position: absolute;
top: 130px;
left: 100px;
}
#follow-google-plus
{
position: absolute;
top: 190px;
left: 100px;
}
</style>
<script src='https://apis.google.com/js/platform.js'></script>
<div class='follow-container'>
<img id='container-image' src='URL de la imagen que desees'/>
<center id='social-gadget-buttons-container'>
<div id='follow-facebook-button'>
<div class="fb-like" data-href="URL de tu pagina de Facebook" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
</div>
<div id='follow-youtube-button'>
<div class="g-ytsubscribe" data-channelid="ID de tu Canal de YouTube" data-layout="default" data-count="hidden"></div></div>
<div id='follow-twitter-button'>
<a href="URL de tu perfil en Twitter" class="twitter-follow-button" data-show-count="default" data-size="large" data-show-screen-name="false">Follow @TuNombreDeUsuario</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<div id="follow-google-plus">
<!-- Inserta esta etiqueta en la sección "head" o justo antes de la etiqueta "body" de cierre. -->
<script src="https://apis.google.com/js/platform.js" async defer>
{lang: 'es-419'}
</script>
<!-- Inserta esta etiqueta donde quieras que aparezca widget. -->
<div class="g-follow" data-annotation="bubble" data-height="24" data-href="URL de tu perfil en Google Plus" data-rel="author"></div>
</div>
</center>
</div>
<style>
.follow-container
{
width: 300px;
height: 300px;
padding: 0px;
}
#container-image
{
width: 100%;
height: 100%;
}
#social-gadget-buttons-container
{
position: relative;
top: -250px;
}
#follow-facebook-button
{
position: absolute;
top: 15px;
left: 100px;
}
#follow-youtube-button
{
position: absolute;
top: 70px;
left: 100px;
}
#follow-twitter-button
{
position: absolute;
top: 130px;
left: 100px;
}
#follow-google-plus
{
position: absolute;
top: 190px;
left: 100px;
}
</style>
<script src='https://apis.google.com/js/platform.js'></script>
<div class='follow-container'>
<img id='container-image' src='URL de la imagen que desees'/>
<center id='social-gadget-buttons-container'>
<div id='follow-facebook-button'>
<div class="fb-like" data-href="URL de tu pagina de Facebook" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
</div>
<div id='follow-youtube-button'>
<div class="g-ytsubscribe" data-channelid="ID de tu Canal de YouTube" data-layout="default" data-count="hidden"></div></div>
<div id='follow-twitter-button'>
<a href="URL de tu perfil en Twitter" class="twitter-follow-button" data-show-count="default" data-size="large" data-show-screen-name="false">Follow @TuNombreDeUsuario</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<div id="follow-google-plus">
<!-- Inserta esta etiqueta en la sección "head" o justo antes de la etiqueta "body" de cierre. -->
<script src="https://apis.google.com/js/platform.js" async defer>
{lang: 'es-419'}
</script>
<!-- Inserta esta etiqueta donde quieras que aparezca widget. -->
<div class="g-follow" data-annotation="bubble" data-height="24" data-href="URL de tu perfil en Google Plus" data-rel="author"></div>
</div>
</center>
</div>
- Primero Blogger>>Diseño>>Añadir un gadget (HTML/Javascript) y copiar el código antes proporcionado.
- Lo que se encuentra de color rojo es para que pongas la URL de una imagen la cual es para el fondo del Gadget.
- En color azul es para que pongas ahí la URL de tu pagina de Facebook .(Botón "Me Gusta" de Facebook)
- En color fuchsia ahí pon el ID de tu canal de YouTube, si no sabes cual es tu ID puedes consultar esta pagina de ayuda. (Botón "Suscribirse" YouTube)
- Lo que se encuentra en color color aqua , pertenece a la URL y el nombre de usuario registrados en dicha red. (Botón de "Seguir" Twitter).
- Y para finalizar en color purpura es para la URL de tu perfil en Google Plus. (Boton de "Seguir" Google+ )
Vista Previa del Resultado Final |