REDES SOCIALES EN LA CABECERA DEL BLOG

Aquí estoy de nuevo con otra entrada de Recursos para bloggers, esta vez por petición de AiruN traigo el tutorial de como poner los iconos sociales integrados en la cabecera del blog.

Es donde más a la vista están así que puede que consigas más seguidores en tus redes. En mi blog como puedes ver no están y es porque personalmente no me gusta como queda, prefiero tenerlos en la barra lateral, arriba del todo.
redes-sociales-cabecera
Este tutorial es un poco más complicado que los que he hecho hasta el momento, pero ya verás como si sigues todos los pasos, te sale a la primera. Paciencia, mucha paciencia... No te asustes con tantos códigos ¿vale?

Sigue los pasos:

♥ Plantilla, editar HTML.

♥ Dentro del cuatro presionamos Ctrl+F

♥ En el buscador ponemos el siguente código: ]]></b:skin>

♥ Justo encima o delante de el añadimos este otro:

/* 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);
}
Redes sociales en la cabecera

♥ Despues volvemos a buscar en el buscador este otro código:  <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

♥ Y justo encima añadimos este otro:

<div class='social-icons' id='social-iconos'>
<ul>
<li class='social_icon'><a href='http://facebook.com/Nombre de Facebook'><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/#!/Nombre de Twitter'><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/ID de tu perfil de google+/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://URL de tu blog/feeds/posts/default'><img border='0' src='http://lh5.googleusercontent.com/-6hu6NkWouSw/UKK9PIQCrHI/AAAAAAAADSc/5QI5O-H7EYs/s36/social-rss.png'/></a></li>

</ul></div>


Redes sociales en la cabecera

Ahora solo tienes que cambiar lo que está en blanco por tus direcciones, la primera tu nombre de Facebook, la segunda tu nombre de Twitter, la tercera la dirección ID de tu perfil de google+ (vas a tu perfil y en la Url aparecen muchos números, esos son) y en la cuarta la dirección de tu blog.


Por supuesto puedes añadir todos los iconos que quieras a parte de estos, añadiendo justo encima de </ul></div> más codigos como este:


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


Si no te gusta la forma ni el color de los iconos también puedes cambiarlos usando éste último código que te he dado, cambiando la URL del enlace y la URL de la imagen.


Para saber la URL de tu imagen tienes que ir a tinypic.com/ si no recuerdas como funciona, lo expliqué en  este post.

Y ya esta, menos mal ¿verdad?, este tutorial es bastante lioso, la primera vez que lo hice me salía humo de la cabeza, pero si sigues todos los pasos debe de salir bien. 
Una cosa que no he dicho es que los iconos giran cuando pones el ratón justo encima de ellos. Aquí tienes como quedan.
Redes sociales en la cabecera

Ahora si, se acabó el post de hoy, espero que te funcione, nos vemos en el siguiente, gracias por leerme y por tus comentarios, un beso.

Redes Sociales:
Facebook
Twitter
Instagram

Comentarios

  1. Hola Paula, me quedo por tu blog, los recursos para blogger me van a venir muy bien . Besos guapa.

    ResponderEliminar
  2. Me encanta la sección de recursos para bloggers. Son de mucha ayuda.
    De momento no quiero cambiar los iconos de sitio. Pero me gustan como quedan arriba, así que me apunto la idea por si me da por hacer cambios.
    Un beso, guapa :)

    ResponderEliminar
  3. no me funciona :( cuando busco el primer código no lo encuentra... pero se agradece todo el trabajo :) besos

    ResponderEliminar
  4. Muchas gracias! Ha sido de mucha ayuda! Un saludo!!!

    ResponderEliminar

Publicar un comentario

Entradas populares de este blog

¿QUÉ PASA CON EL RIZADOR THE CURL SECRET DE BABYLISS?

ZIAJA - LÍNEA LECHE DE CABRA

TINTE CASTING CREME GLOSS - PRALINÉ