19 noviembre 2012 ~ Comentarios desactivados en Iconos de redes sociales para Blogger

Iconos de redes sociales para Blogger

Sabemos lo influyente que son las redes sociales en la propagación de un blog, tanto que es muy importante tener enlazado cada uno de nuestros perfiles sociales en alguna sección visible de nuestro sitio de Blogger. Por ello es que en este artículo les comentaremos una muy buena idea para lograr incrustar íconos interactivos que enlacen a nuestras cuentas en las redes sociales.

iconos social media blogger

Ya hablamos en nuestro blog acerca del buscador de íconos llamado Iconfinder, en donde recomendamos recurrir para lograr encontrar aquellas imágenes, precisamente sociales, que luego podrás incrustar en tu blog de Blogger. En este sitio participan cientos de excelentes diseñadores gráficos, que tienen la gentileza de aportar trabajos para que otras personas puedan descargar y utilizar dichas imágenes con distintos fines. Podemos encontrar íconos de gran calidad, y muchos dedicados a las principales redes sociales: Facebook, Twitter, Google+ y Feed.

Insertar iconos de redes sociales en Blogger

Pero no tan solo recomendaremos la fuente de donde poder extraer íconos de redes sociales para Blogger, sino que te enseñaremos como incrustarlas en la plantilla de tu blog, otorgándole un efecto muy atractivo para los lectores de tu blog.

Leyendo en Ciudad Blogger (blog que recomendamos a los usuarios de la plataforma Blogger de Google), me encuentro con un excelente artículo en el cual nos enseñaba a incrustar una lista de íconos sociales, enlazados hacia cada uno de nuestros perfiles, pero a su vez estos íconos, ya colocados en la plantilla del blog, giran cuando alguien pasa el cursos por arriba de ellos. Un efecto muy atractivo para curiosos que no están acostumbrados a este tipo de diseños.

Iconos de redes sociales para Blogger que giran

Antes que nada, te recordamos que puedes hacer este efecto con cualquier imagen que tengas en mente, pero recomendamos ampliamente descargar los íconos que utilizó Ciudad Blogger para realizar el experimento en lenguaje CSS3.

Para instalar estos íconos tendrás que seguir los siguientes pasos:

1° Ingresá al panel de control de tu blog, y luego a Edición HTML. Antes del segmento ]]></b:skin>, insertá el siguiente código:

/* 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);
 }

Sin expandir los artilugios, buscá la siguiente oración:

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

Por último antes de la oración citada anteriormente tendrás que pegar el siguiente código editando la dirección de las imágenes, que recomendamos alojarlas en tu cuenta de Blogger, como así también la dirección (URL) de los perfiles sociales:

<div class='social-icons' id='social-iconos'>
 <ul>
 <li class='social_icon'><a href='http://facebook.com/usuario'><img border='0' src='http://lh3.googleusercontent.com/-9RgnEDN1jFc/UKK9O1S1TPI/AAAAAAAADSk/KOIvtDu-oSM/s36/social-facebook.png'/></a></li>

 <li class='social_icon'><a href='http://twitter.com/#!/usuario'><img border='0' src='http://lh4.googleusercontent.com/-KtqAlZRCokQ/UKK9PbLsnSI/AAAAAAAADSg/njBnVDn3O9I/s36/social-twitter.png'/></a></li>

 <li class='social_icon'><a href='https://plus.google.com/XXXXXXXXXXXXXXXXXX/about'><img border='0' src='http://lh4.googleusercontent.com/-4PWKT-fgHJ8/UKK9O7mGEPI/AAAAAAAADSY/ENZ0BHmO6TY/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='http://lh5.googleusercontent.com/-6hu6NkWouSw/UKK9PIQCrHI/AAAAAAAADSc/5QI5O-H7EYs/s36/social-rss.png'/></a></li>

 </ul></div>

Eso fue todo, si sigues los pasos ordenadamente obtendrás íconos de redes sociales muy atractivos para tu blog de Blogger.

Social Share Counters
Tags:

Comments are closed.