Constantemente me preguntan sobre la forma de 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 de Facebook, Twitter, Google+ y el feed del blog, y como un extra haremos que los iconos giren al pasar el cursor sobre ellos, como estos:
/* 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:
<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/AVvXsEiQRw8OB70l6Q1JuflPjcinwt8lxYQQuvkGnpPiKUPcCAAKL19F-biFZkh6B-4d1df3MbIWdzYsk9R4IWDRjvo_yqL2AW2NPjk9Fv1qUNViOzss4C-XBdWNoccywPu_4_t4XFj0U4vzzLk/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/AVvXsEiLy7m21aVNeBV0EUKybkkgDEZ1vitCXg3G5kEgLIBXXlPsuPQLyLMyh0qAqSomVELShRoJvhCKaXJn-Ov2MwHQ8Jmn-bjXYH9fy7JDWls1XdjQoSb7T0nTc4T5c6tPGk_CyfN3n5_tHYk/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/AVvXsEgdj-QdZisfjc1jribYvhlqC_5GfxrBi3APYH_hJI3CIRvx3d09jXTl4jW67L5B4i1oMXRuYpMM9TNp3CIAWPce2r_PQjjJ1oZGLERrz-VDgZ9_FcG6JJo-Ax3sP3X3JxGmOYmAxeTCFjM/s36/social-googleplus.png'/></a></li>
<li class='social_icon'><a href='http://nombre-de-mi-blog.com/feeds/posts/default'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_fYfF5laG3vumoV3cIaoCphdMfN5gg3vqNwOAYvQI6NcwkS6mry8UCRWD-rK7WsPhvnszYkUn9bGz5pgAov6ZMVj3ulLBKW3igcf1Jo6ioPBZL9quVLqim_IxrvPqujVS4WNE3bnmmKw/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:
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.
El efecto que gira está hecho con CSS3 así que en navegadores antiguos este efecto no funcionará.
Los iconos son de Iconfinder excepto el de Google+ que lo he diseñado yo, pero pueden sustituirse por los iconos de tu elección.
El efecto que gira está hecho con CSS3 así que en navegadores antiguos este efecto no funcionará.
Los iconos son de Iconfinder excepto el de Google+ que lo he diseñado yo, pero pueden sustituirse por los iconos de tu elección.
