Adblock Detectado

Nuestro sitio se mantiene gracias a la publicidad, por favor Desactiva Adblock para seguir navegando

He desactivado Adblock
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:

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 
- - 2 Comentarios
Tag

Comentarios (2)

  1. Hola... gracias por el código me párese genial... pero hay alguna forma de cambiar el icono, por ejemplo: la (f) de facebook o el (g+) de google... Agradecería su ayuda.

    ResponderEliminar
  2. Muy interesante y bonito el efecto,gracias!

    ResponderEliminar
:))
:((
:D
:(
:)
:-)
;)
=))
:p
=.=
==
^_^
/=he
:*
/=r
/=l
:v
/=ok
/=clap
(y)
(yy)
/=hi
/=j
/=hup
/=hd
/=hl
/=hr
/=s
<3

Instrucciones Para omentar

Incertar Enlace

Utilice el codigo <a href='LINK'> EJEMPLO </a>

Cargar Imagen

[img] LINK_ANH [/img] -Use el codigo para cargar una imagen.

Formato Word

<b> negrita </b>
<i> cursiva </i>
<u> texto subrayado </u>
<strike> texto tachado </strike>

Insertar un Fragmento de codigo

Primero use esta herramienta para codificar el codigo que quiera agregar.
Luego utilice el codigo [code] CODIGO HTML [/code]

Cerrar