Iconos de redes sociales arriba del blog que giran al pasar el cursor

Publicado por       1 comentario:
 
Recuerden que para buscar lo que les digo se utiliza: Control + F

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


/* 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:

<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/AVvXsEilFSScKwlN9mAFofGHjpaq4bhXnukBDIFNH5X6ho0OqDLT3B8KLTUAtoTvLv2l5P2h-u9No6DaQWTETdjFVdqdDqcWMxUfOVBTgIFk-uEhKZ57SIMaS4xsj2icTiJnZviSbJB8lzQ9LGY/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/AVvXsEiUtqxz3qJCJ9N6bOpzuiK0qBkrJO4l348zIMEADdpg79XEKLIRYM5dieVLCEqWfmgeaxETmavrx4RNSBLBns_cKAsWtFkJ9U8Yj2GYVEDJusSZcVjdCBvKrMVD3bVlclM0nxBZ8NdyYtI/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/AVvXsEi0OhJoELnfcCD2BgPjD7jLCC8rcN-Hw9haOcXY1VULa1DvormTHxzqvYWoFTuD6W3vIbNfT4vgVDDkhxbtb6u3zlhyphenhyphenyI9PxW1f4R_v7U0-dU61USsrU8MqFBkDygYVsP5Mez8gdklvKXk/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/AVvXsEhGJsSit39son95wpgY3ONBKaeoDIuEf1FU0xxu5ikaBx7Nrs4fKDY1tZyD0rUoLrX4TKNbIQz2uTKFxBjvgb9H67gj5v_dggMqNgsSQjXSZmZpQUgCZh6tI9cCrN01rXEb0fWvPqVtPc8/s36/social-rss.png'/></a></li>
</ul></div>
Reemplaza lo que esta en rosa por tus datos y ya está.
Aquí lo podrán ver arriba de todo: Blog de prueba

  

1 comentario:

  1. Yujuuuuuuuuuuuuuuuuu! Yo es que utilizo los iconos .fa{
    Así que solo copie la última parte del código y lo puse debajo de fa hover
    quedó así:

    .fa:hover{ /*Formato al pasar el ratón por encima*/
    color: #cccccc; /*Color del icono*/
    background: #ffffff; /*Fondo del icono*/
    border: 0px solid #eeeeee; /*Borde*/
    -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);
    }

    Y ya me dan vueltecitas :D

    ResponderEliminar

 
Copyright © 2014 Sweet Library All Right Reserved
Designed by OddThemes