Box social para Blogger

1 comentó

Para que l@s que visiten tu blog periodicamente puedan suscribirse por email, a los feeds, agregarte en Facebook o seguirte en Twitter, aqui tienes esta elegante caja social con sus iconos correspondientes. Para añadirlo a tu Blogger, solo tienes que copiar el codigo de abajo y pegarlo a un gadget HTML/Javascript. Antes de guardar, modifica lo que esta en rojo, es decir: tu url de tu Facebook, la de tu Twitter, la de los feeds RSS y la de suscripcion (ahi solo tienes que poner el nombre de tu Feedburner, no la direccion completa). Recuerda que hay que repetir la url de cada sitio 2 veces, una para el icono y otra para el texto.






<div class="sidebar-subscription">
<ul id="subscription">
<li><a href="URL DE TWITTER" target="_blank"><img src="http://lh6.ggpht.com/_1RC6aqxCk8A/TU7PHVzePjI/AAAAAAAAAzI/kslJFMurvVs/Twitter_Icon_thumb%5B2%5D.png" /></a>
<h4>
<a href="URL DE TWITTER" target="_blank">Sigueme</a></h4>
Puedes seguir mis actualizaciones en Twitter</li>
<li><a href="URL RSS" target="_blank"><img src="http://lh3.ggpht.com/_1RC6aqxCk8A/TU7PJ9NNc7I/AAAAAAAAAzQ/h0RVD4St3cU/RSS_Icon_thumb%5B2%5D.png" /></a>
<h4>
<a href="URL RSS" target="_blank">Posts RSS</a></h4>
Lee mis articulos completos en tu lector de feeds favorito</li>
<li>
<a href="URL FACEBOOK" target="_blank"><img src="http://lh3.ggpht.com/_1RC6aqxCk8A/TU7PFZOLr3I/AAAAAAAAAzA/daWXXv3bm74/Facebook_Icon_thumb%5B2%5D.png" /></a>
<h4>
<a href="URL FACEBOOK" target="_blank">Facebook</a></h4>
Hazte fan en Facebook</li>
<li>
<a href="http://feedburner.google.com/fb/a/mailverify?uri=NOMBRE FEEDBURNER&amp;loc=es_ES" target="_blank"><img src="http://lh4.ggpht.com/_1RC6aqxCk8A/TU7PCgJrXVI/AAAAAAAAAy4/0a9tpxM5vyU/Contact_Icon_thumb%5B2%5D.png" /></a>
<h4>
<a href="http://feedburner.google.com/fb/a/mailverify?uri=NOMBRE FEEDBURNER&amp;loc=es_ES" target="_blank">Subscribete via e-mail</a></h4>
Recibe mis ultimas actualizaciones en tu correo</li>
</ul>
</div>
<style>
.sidebar-subscription {
    background: url("http://lh6.ggpht.com/_7Y9pl24WpQY/S_f7UbjdNxI/AAAAAAAAD7k/MRxXLntEnfo/post_head_thumb%5B4%5D.gif") no-repeat scroll 0 0 #FFFFFF;
    border: 1px outset #FFFFFF;
    color: #000000;
    padding: 20px;
    width: 100%;
}
#subscription {
    list-style: none outside none;
    margin-left: -40px;
    margin-top: 0;
    width: 100%;
}
#subscription li {
    height: 57px;
    line-height: 1.0em;
    padding: 6px 10px;
    padding-bottom: 20px;
}
#subscription li a {
    color: #000000;
}
#subscription li a:hover {
    color: #A8000C;
    text-decoration: none;
}
#subscription li h4 {
    border: medium none;
    color: #333333;
    font-size: 18px;
    margin: 0 0 0 45px;
}
#subscription li p {
    font-size: 13px;
    margin: 0 0 0 45px;
}
#subscription li img {
    float: left;
    margin: 0 10px 0 0;
    padding: 0;
}
#subscription li:hover {
    opacity: 0.7;
}
</style>