Blogger: Mostrar botones sociales en el sidebar con efecto

He visto un interesante truco para mostrar los botones sociales de Feedburner, Facebook, Twitter, Google+, YouTube y LinkedIn en la barra lateral como se muestra en la siguiente imagen:

Trucos Blogger

Para implementar este truco nos vamos a Diseño > Edición de HTML donde antes de ]]></b:skin> pegamos el siguiente código.

.redes {
}
.redes a{
    background-image     : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3vBr4Rl1ddKnSAiqmRffVmOqX2VncqzNMA0V_GYwX12hLvOvwC29iYb4kk2XiW_gGd9aPX54jY_yKHSRoWrSYCKhGKbe9fpTvD_HBoeYjiMU4sAPB4AvVlo_WGEqVJpJ9eGpiJmHi00I/s1600/redes.png);
    background-color      : transparent;
    background-repeat    : no-repeat;
    height                        : 48px;
    width                        : 48px;
    float                          : left;
    display                      : block;
    margin                       : 0 5px 0 0;
}
#feedburner_png {
    background-position  : 0px -48px;
}
#feedburner_png:hover {
    background-position  : 0px 0px;
}
#googleplus_png {
    background-position  : -240px -48px;
}
#googleplus_png:hover {
    background-position  : -240px 0px;
}
#facebook_png {
    background-position  : -48px -48px;
}
#facebook_png:hover {
    background-position  : -48px 0px;
}
#twitter_png {
    background-position  : -144px -48px;
}
#twitter_png:hover {
    background-position  : -144px 0px;
}
#youtube_png {
    background-position  : -96px -48px;
}
#youtube_png:hover {
    background-position  : -96px 0px;
}
#linkedin_png {
    background-position  : -192px -48px;
}
#linkedin_png:hover {
    background-position  : -192px 0px;
}

Guardamos los cambios y nos vamos a Elementos de la página donde hay que Añadir un gadget > HTML/Javascript donde pegaremos este código:

<div class='redes'>
<a id='feedburner_png' href='URL DE TU FEEDBURNER' target='_blank' title='Suscribirse a las entradas'></a>
<a id='googleplus_png' href='URL DE TU GOOGLE+' target='_blank' title='Google+'></a>
<a id='facebook_png' href='URL DE TU FACEBOOK' target='_blank' title='facebook'></a>
<a id='twitter_png' href='URL DE TU TWITTER' target='_blank' title='twitter'></a>
<a id='youtube_png' href='URL DE TU YOUTUBE' target='_blank' title='you tube'></a>
<a id='linkedin_png' href='URL DE TU LINKEDIN' target='_blank' title='Ver perfil en Linkedin></a>
</div>

Solo reemplaza las respectivas URL de tus redes sociales y eso es todo.

Post a Comment

Todo comentario se agradece, además es no permite seguir trabajando.

أحدث أقدم