-->

Añadir iconos redes sociales que giran en blogger

Cómo añadir iconos redes sociales que giran en blogger

En este artículo voy a explicar cómo añadir iconos de redes sociales que giran en nuestro blog en dos posiciones diferentes de nuestro blog.

Si realizas todos los pasos de este tutorial, los iconos de redes sociales quedarían de la siguiente manera en tu blog:


A continuación os muestro los pasos a seguir para añadir iconos redes sociales que giran en blogger:
  1. Añadir los estilos a la plantilla: Debes dirigirte a la sección "Plantilla" de tu blog y pulsar el botón "Editar HTML".

    Busca el siguiente texto ]]></b:skin> y justo andes de él añade el siguiente código:

    /* ICONOS REDES SOCIALES DE TUTORIALES Y OPINIONES*/
    #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);
    }

  2. Añadir los iconos de redes sociales en la CABECERA del Blog: Debes dirigirte a la sección "Plantilla" de tu blog y pulsar el botón "Editar HTML".

    Busca SIN expandir artilugios el siguiente texto:
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> y pega antes de él el siguiente código:

    <div class='social-icons' id='social-iconos'>
    <ul>
    <li class='social_icon'><a href='http://facebook.com/Nombre_Usuario'><img border='0' src='http://www.characterscounter.com/img/iconos-sociales/facebook-32x32.png'/></a></li>
    <li class='social_icon'><a href='https://twitter.com/Nombre_Usuario'><img border='0' src='http://www.characterscounter.com/img/iconos-sociales/twitter-32x32.png'/></a></li>
    <li class='social_icon'><a href='https://plus.google.com/ID_Usuario/about'><img border='0' src='http://www.characterscounter.com/img/iconos-sociales/google-32x32.png'/></a></li>
    <li class='social_icon'><a href='http://Nombre_de_tu_blog.com/feeds/posts/default'><img border='0' src='http://www.characterscounter.com/img/iconos-sociales/rss-32x32.png'/></a></li>
    </ul>
    </div>
    IMPORTANTE: Debes cambiar el texto que aparece en rojo por tus datos.

  3. Añadir los iconos de redes sociales COMO GADGET del Blog: Deberás dirigirte a la sección "Diseño" y pulsar la opción "Añadir un gadget".

    De la lista de gadgets disponibles, deberás seleccionar el "HTML/Javascript" y pegar en su interior el código del punto anterior.

Artículos que te pueden interesar

Añadir gadget redes sociales en blogger.
Cómo proteger las imágenes de tu blogger.
Cómo etiquetar entradas de blogger.
Etiquetas: ,