Tutoriales Sobre Blogger: Caja de seguidores para tus Redes Sociales Multicolor

En este tutorial veremos como agregar a nuestro blog un gadget con tus Redes Sociales. Como hemos dicho en muchos tutoriales que hemos creado sobre Redes Sociales sirven para aumentar el trafico en nuestro
blog, con este tutorial no aremos la acepción. Solamente le daremos un hermoso toque con estilo css a nuestra Redes Sociales

Antes de comenzar vemos una demostración: 

Demostración

Comencemos

• Paso 1: Vamos a Blogger>>Plantilla>> Edición HTML>>
• Paso 2: Buscamos la siguiente linea (Ctrol + F) 

]]></b:skin>

• Paso 3: Justo por encima de ]]></b:skin> pegamos el siguiente código HTML 

#contact {
margin:0 auto;
margin-top:-60px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7E8oa7SIZKxAUw2HUp-ZLtMW0Xid2_v06fg3MShQUXAiJ776a3jOYrd59qDzwCMMQoPcw-0FqjlMsMgDyxb5jPYCMV03z4Ns0aYs-qlPgu56PoDo54hVE-QcirAkeVuXcO3jaRmr194A/s1600/bgnav.png) repeat scroll 0% 0% padding-box rgb(14, 14, 14);
border:8px solid transparent;
overflow:hidden;
width:720px;
box-shadow:0pt 0pt 8px rgba(0, 0, 0, 0.5);
height:auto;
}
#contact a, #contact a:visited {
color:rgb(230, 230, 230);
text-decoration:none;
-webkit-transition: text-shadow .2s linear;
-moz-transition: text-shadow .2s linear;
-o-transition: text-shadow .2s linear;
transition: text-shadow .2s linear;
}
#contact a:hover {
color:rgb(230, 230, 230);
text-shadow:0pt 0pt 3px rgb(255, 255, 255);
text-decoration:none;
}
#contact-kolom-1 {
background:url(http://cdn1.iconfinder.com/data/icons/WPZOOM_Social_Networking_Icon_Set/24/rss.png) no-repeat right bottom transparent;
width:180px;
height:45px;
float:right;
display:inline;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
transition: all .2s linear;
}
#contact-kolom-1:hover {
background:url(http://cdn1.iconfinder.com/data/icons/WPZOOM_Social_Networking_Icon_Set/24/rss.png) no-repeat right bottom #DF7401;
}
#contact-kolom-2 {
background:url(http://cdn1.iconfinder.com/data/icons/GooglePlus_IconSet/24x24/1.png) no-repeat right bottom transparent;
width:180px;
height:45px;
float:right;
display:inline;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
transition: all .2s linear;
}
#contact-kolom-2:hover {
background:url(http://cdn1.iconfinder.com/data/icons/GooglePlus_IconSet/24x24/1.png) no-repeat right bottom #333333;
}
#contact-kolom-3 {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJm_Ip7ogQ-XcG0NZIaqBnNnahyZzvNDj7tP9C1Y9WLWb-4f1rAc76SP4mE_jM3rHktymSoWil45EnOThdaE4waA5eUAGIkNJfwrL3jlnucrTKyxAbD7Ce6_EmLU-D179y6S1mbXN7T1Y/s1600/twitter-icon.png) no-repeat right bottom transparent;
width:180px;
height:45px;
float:right;
display:inline;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
transition: all .2s linear;
}
#contact-kolom-3:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJm_Ip7ogQ-XcG0NZIaqBnNnahyZzvNDj7tP9C1Y9WLWb-4f1rAc76SP4mE_jM3rHktymSoWil45EnOThdaE4waA5eUAGIkNJfwrL3jlnucrTKyxAbD7Ce6_EmLU-D179y6S1mbXN7T1Y/s1600/twitter-icon.png) no-repeat right bottom #00ACBF;
}
#contact-kolom-4 {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTmxk9UK5e7kzaAVnHe_z4OzEid9KAUVBplUblBYEu5onYss87Qp-P5_Zk8urvfnXrvgY8H6iv6aDloQQPpNawFd7BnxgP9QT2Mnh_Tb74NYUh0JEG9-JEPFsO_2-dYkWdJ3AhimNv7Xs/s1600/facebook-icon.png) no-repeat right bottom transparent;
width:180px;
height:45px;
float:right;
display:inline;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
transition: all .2s linear;
}
#contact-kolom-4:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTmxk9UK5e7kzaAVnHe_z4OzEid9KAUVBplUblBYEu5onYss87Qp-P5_Zk8urvfnXrvgY8H6iv6aDloQQPpNawFd7BnxgP9QT2Mnh_Tb74NYUh0JEG9-JEPFsO_2-dYkWdJ3AhimNv7Xs/s1600/facebook-icon.png) no-repeat right bottom rgb(59, 89, 152);
}

• Paso 4: Guardamos los cambios realizados en la plantilla.

Ahora agregaremos nuestro gadget de Redes Sociales en un gadget  

• Paso 5: Vamos a Blogger>> Diseño>>Añadir un gadget.
• Paso 6: Dentro de nuestro gadget pegamos el siguiente código HTML 

<div id="contact">
<div id="contact-kolom-1">
<a href="http://feeds.feedburner.com/tuto/blogger">RSS Feed<br /><span style="font-size: 10px; padding: 0px;">Suspcribete en RSS</span></a></div>
<div id="contact-kolom-2">
<a href="https://plus.google.com/u/0/102309934171768207604" target="_blank">Google +<br /><span style="font-size: 10px;"> Síguenos en Google+</span></a></div>
<div id="contact-kolom-3">
<a href="https://twitter.com/TutorialesBlogg" target="_blank">Twitter<br /><span style="font-size: 10px;"> Síguenos en Twitter</span></a></div>
<div id="contact-kolom-4">
<a href="https://www.facebook.com/TutorialesBlogger" target="_blank">Facebook<br /><span style="font-size: 10px;"> Síguenos en Facebook</span></a>
</div>
</div>

Nota:- Puedes cambiar lo que esta en rojo por las de tus Redes Sociales