Botones Giratorios Redes Sociales

poner arriba del blog iconos que enlacen a las redes sociales como tengo ahora mismo en esta plantilla, y es que tener iconos como estos a la vista incrementa la posibilidad de que los lectores puedan seguirnos por las distintas redes sociales ya que les dejamos el acceso a ellas de una forma más visible.
Hay varias formas de hacerlo, nosotros lo haremos usando una lista desordenada que incluirá los iconos deFacebook, Twitter, Google+ y el feed del blog, y como un extra haremos que los iconos giren al pasar el cursor sobre ellos, como los de este Blog.

Para poner estos íconos sociales en tu blog entra en la Edición HTML de la plantilla y agrega antes de ]]></b:skin> los estilos:

/* Iconos de redes sociales
----------------------------------------------- */
#social-iconos {
width:100%;
height:50px;
margin-bottom:10px;
display:block;
clear:both;
}
.social-icons{display:table}
.social-icons ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
text-align:right;
padding:5px 5px 0 0
}
.social-icons ul {
padding:0;
float:right;
margin-bottom:0;
}
.social-icons li.social_icon {
background:none !important;
padding-left:0 !important;
display:inline;
float:left;
margin-left:6px;
}
.social-icons li:hover {
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(-360deg);
}

Luego SIN expandir los artilugios busca esta línea:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Arriba de ella agrega la estructura:

Si Te complica este paso añade HTML en Widget, más facil :)

<div class='social-icons' id='social-iconos'>
<ul>
<li class='social_icon'><a href='http://facebook.com/usuario'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAXUgF8JGYc-bsQPYN7_JKR2LvURmpFFyc3aC8N0P7ov0WVTzkFgt9uyr29VudNtiCrmNk5WRMVkHOT2wan-Dn7uncCunnGhlYo1xqGBiP07AvhDkxnPoP2nl5oAHLoL6aTX3wXK5O4xY/s36/social-facebook.png'/></a></li>

<li class='social_icon'><a href='http://twitter.com/#!/usuario'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv7uEVvPJxwtpy5xFX78MYom2CEwSwxstKytb19od0NCswc9BLXUdhdRqYfIKVhnP20ulIOWPbnI69j9nIhvDV_Gh20ei614RFdc98ES-g_dFUGa51-FsecpvoB_Tf5Blxqc43X5x3qJA/s36/social-twitter.png'/></a></li>

<li class='social_icon'><a href='https://plus.google.com/XXXXXXXXXXXXXXXXXX/about'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9ABGFHo4GJ6sGk5slEjYQtyjUQrfwPtSsFadLyyx6bv_vsUYWsoQV2UC6SGuDn32PVtEGMJCjCJhfKNbndR0oNi9CqEeL5Twa9GEcAnz2RRtdbxS40r5Y9sdySISku8eV-5O2_z0M29U/s36/social-googleplus.png'/></a></li>

<li class='social_icon'><a href='http://marketing-sinergia.blogspot.pe/.com/feeds/posts/default'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWsTEUFxQ6o94o6qUt95WLkR2PBiy-OGOhqqpCkBKal5bQlOk2zyUI_KH-x_DTpiYLV_Ea_mJhYFaUK00Uq35LNna-vKxZ2JsbxKo-Lro1mIY590aflichpcHOhyphenhyphenZGs647ULddf738R4s/s36/social-rss.png'/></a></li>

</ul></div>

Cambia lo que está en color rojo por tus datos y listo. El primero es tu usuario de Facebook, el segundo el de Twitter, el tercero deberás cambiar las X por el ID de tu perfil de Google+, y en el cuarto deberás poner el nombre de tu blog.

Por supuesto que puedes añadir más iconos si lo deseas, sólo deberás agrega antes </ul></div> una línea como esta por cada icono extra que quieras:

<li class='social_icon'><a href='URL del enlace'><img border='0' src='URL de la imagen'/></a></li>

Aunque están pensados para mostrarse arriba del blog puedes ponerlos donde tú quieras, incluso puedes ponerlos en un elemento HTML/Javascript, eso quedará a elección de cada quien.