Tutoriales Sobre Blogger: Marcadores de Redes Sociales con CSS ampliable

En este tutorial veremos como crear Marcadores de Redes Sociales ampliables para Blogger con puro CSS. Ahi muchos gadget de Redes Sociales por internet. Muchos de
ellos tardan demasiado  la carga de nuestro blog por eso crearemos uno con puro CSS.



Antes de Comenzar 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 código CSS  

#MBT-SexySocialButtons{
list-style:none;
text-decoration:none;
font-size:0.9em;
font-family:trebuchet ms,sans-serif;
}
#MBT-SexySocialButtons a{
text-decoration:none;
font-family:trebuchet ms,sans-serif;
}
#MBT-SexySocialButtons li{
position:relative;
height:38px;
cursor:pointer;
padding: 0 !important;
}
#MBT-SexySocialButtons .facebook, .googleplus, .YouTube, .rss, .twitter{
position:relative;
z-index:5;
display:block;
float:none;
margin:5px 0 0;
width:210px;
height:38px;
border-radius:5px; background:url(http://1.bp.blogspot.com/-JKq0eFFwx34/UGx39fhHO_I/AAAAAAAABE4/56i9phAS2do/s1600/MBT+Sprites+Social+Icons.png) no-repeat;
background-color:rgba(217,30,118,.42);
-webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
-moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
box-shadow:rgba(0,0,0,.28) 0 2px 3px;
color:#141414;
text-align:left;
text-indent:50px;
text-shadow:#333 0 1px 0;
white-space:nowrap;
line-height:32px;
-webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out;
-moz-transition:width .25s ease-in-out,background-color .25s ease-in-out;
-ms-transition:width .25s ease-in-out,background-color .25s ease-in-out;
-o-transition:width .25s ease-in-out,background-color .25s ease-in-out;
transition:width .25s ease-in-out,background-color .25s ease-in-out;
-o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
}
#MBT-SexySocialButtons li:after{
position:absolute;
top:0;
left:50px;
z-index:2;
display:block;
height:38px; color:#000;
content:attr(data-alt);
line-height:32px;
}
#MBT-SexySocialButtons .icon{
overflow:hidden;
color:#fafafa;
}
#MBT-SexySocialButtons .facebook{
width:32px;
height:32px;
background-color:rgba(59,89,152,0.42);
background-position:0 0;
}
#MBT-SexySocialButtons .twitter{
width:32px;
height:32px;
background-color:rgba(64,153,255,0.42);
background-position:0 -33px;
}
#MBT-SexySocialButtons .googleplus{
width:32px;
height:32px;
background-color:rgba(228,69,36,0.42);
background-position:-3px -66px;
}
#MBT-SexySocialButtons .YouTube{
width:32px;
height:32px;
background-color:rgba(174,45,39,0.42);
background-position:-2px -95px;
}
#MBT-SexySocialButtons .rss{
width:32px;
height:32px;
background-color:rgba(255,102,0,0.42);
background-position:-3px -126px;
}
#MBT-SexySocialButtons li:hover .icon,
.touch #MBT-SexySocialButtons li .icon{
width:210px;
}
.touch #MBT-SexySocialButtons li .facebook, #MBT-SexySocialButtons li:hover .facebook{
background-color:rgba(59,89,152,1);
}
.touch #MBT-SexySocialButtons li .twitter, #MBT-SexySocialButtons li:hover .twitter{
background-color:rgba(64,153,255,1);
}
.touch #MBT-SexySocialButtons li .googleplus, #MBT-SexySocialButtons li:hover .googleplus{
background-color:rgba(228,69,36,1);
}
.touch #MBT-SexySocialButtons li .YouTube, #MBT-SexySocialButtons li:hover .YouTube{
background-color:rgba(174,45,39,1);
}
.touch #MBT-SexySocialButtons li .rss, #MBT-SexySocialButtons li:hover .rss{
background-color:rgba(255,102,0,1);
}

• Paso 4: Guardamos los cambios efectuados en nuestra plantilla.

Ahora agregaremos Nuestro Marcadores de Redes Sociales en un Gadget, para eso 

• Paso 5: Vamos a Blogger>>Diseño>>Añadir nuevo Gadget>>HTML/Javascript
• Paso 6: Dentro del Gadget pegamos el siguiente Código HTML 

<ul id="MBT-SexySocialButtons">
<li data-alt="Síguenos en Facebook "><a class="icon facebook" href="http://www.facebook.com/USERNAME"> Síguenos en Facebook</a></li>
<li data-alt="Síguenos en Twitter"><a class="icon twitter" href="https://twitter.com/USERNAME"> Síguenos en Twitter</a></li>
<li data-alt="Síguenos en Google+"><a class="icon googleplus" href="https://plus.google.com/NUMERO DE ID/"> Síguenos en Google+</a></li>
<li data-alt="Subscribete  en YouTube"><a class="icon YouTube" href="http://www.youtube.com/USERNAME"> Subscribete  en YouTube</a></li>
<li data-alt="Subscribete por RSS"><a class="icon rss" href="http://feeds.feedburner.com/UUSERNAME">Subscribete por RSS</a></li>
</ul></div>

• Paso 7: Guardamos nuestro Gadget y Listo

Nota:- Nota solo debes de Cambiar USERNAME por los enlaces de tus Redes Sociales