En este tutorial te mostrare como anadir Widget Para Compartir En Medios Sociales Con Descripcion Emergente para compartir tu blog en las redes sociales que se han convertido en indispensable para ganar mas suscriptores a la vez fieles seguidores de tus articulos.Para eso te mostrare un widget que es atractivo y animado pues cuando el visitante ponga el cursor sobre un icono social un cuatro se aprira con informacion sobre ese icono.
Para Ver Ejemplo En Accion Da Clic Aqui.Lo veras despues del primer articulo.
Características de los globos de sugerencias del Widget del compartir social:
1. Funcionalidad este Tooltip añade más color y sabor a este widget, ya que los usuarios pueden jugar mientras anaden su red social.
2.Los iconos utilizados en este artilugio no son ordinarios son profesional construido con un marco de trabajo en 3D, lo que lo hace apelativo.
3.Tiene un total de 5 iconos de redes sociales junto con RSS que le permitirá maximizar sus suscriptores.
4.Este widget está completamente construido con puro CSS y HTML, así que es de alta velocidad y el rendimiento de su sitio.
Cómo instalar este Widget Para Compartir En Medios Sociales Con Descripcion Emergente en Blogger:
Los pasos son muy sencillos, y se limitará a tomar menos de 5 minutos para completar la integración. Sólo tienes que seguir los pasos que se menciona a continuación.
Paso # 1: Ir a tu cuenta de Blogger.com >> Plantillas >> Editar HTML
Paso # 2: Ahora búsqueda en la plantilla la siguiente etiqueta ]]> </ b: skin> y arriba de este pega la siguiente hoja de estilo o Código CSS.
Paso # 3: Una vez que haya pegado correctamente el código de la hoja de estilo guarda la plantilla pulsando el botón Guardar.
/*---Ciudadblogger Animated Social Sharing Tooltips Widget ---*/
.cbl-wrapper{
padding: 0;
width: 535px;
height: 70px;
margin: 80px auto 30px auto;
}
.cbl-wrapper ul{
float: left;
}
.cbl-wrapper ul a{
display: block;
width: 68px;
height: 70px;
margin: -10 -24 px;
outline: none;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyNf7Z2ppIugYZXhzV5BqyExMtrdtpyaQA3IjOG7XHZklmk6_viLERwfMZZP0vCVmZNMATLRTK-kcMP36WL-zJRHHVXECGEGdwtWGfkleA3dKzg3q4uxuGW8WGR6-br0BAM9aiMxxnQ-LX/s1600/1.png) no-repeat top left;
text-indent: -9000px;
position: relative;
}
.cbl-wrapper ul .cbl-gplus{
background-position: 0px 0px;
}
.cbl-wrapper ul .cbl-twitter{
background-position: -68px 0px;
}
.cbl-wrapper ul .cbl-pinterest{
background-position: -136px 0px;
}
.cbl-wrapper ul .cbl-facebook{
background-position: -204px 0px;
}
.cbl-wrapper ul .cbl-linkedin{
background-position: -272px 0px;
}
.cbl-wrapper ul .cbl-rss{
background-position: -340px 0px;
}
.cbl-wrapper ul a span{
width: 100px;
height: auto;
line-height: 20px;
padding: 10px;
left: 50%;
margin-left: -64px;
font-family: Shanti, Arial, Helvetica, sans-serif;
font-weight: 400;
font-size: 14px;
color: #2f6986;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
text-align: center;
border: 4px solid #2f6986;
background: rgba(255,255,255,0.3);
text-indent: 0px;
border-radius: 5px;
position: absolute;
pointer-events: none;
bottom: 100px;
opacity: 0;
box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.cbl-wrapper ul a span:before,
.cbl-wrapper ul a span:after{
content: '';
position: absolute;
bottom: -15px;
left: 50%;
margin-left: -9px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid rgba(0,0,0,0.1);
}
.cbl-wrapper ul a span:after{
bottom: -14px;
margin-left: -10px;
border-top: 10px solid #2f6986;
}
.cbl-wrapper ul a:hover span{
opacity: 0.9;
bottom: 70px;
}
Paso # 4: Ahora, de acuerdo a su necesidad pegue el siguiente código en area que desea colocar este widget. Por ejemplo Diseno >> Añadir un gadget >> Edición de HTML / JavaScript.
<div class="cbl-wrapper">
<ul><a class="cbl-gplus " href="https://plus.google.com/u/0/116180896434879626623"><span>Google Plus</span></a></ul>
<ul><a class="cbl-twitter" href="http://twitthis.com/twit?url=http://www.ciudadblogger.info"><span>Twitter</span></a></ul>
<ul><a class="cbl-pinterest" href="http://pinterest.com/andante772/"><span>Pinterest</span></a></ul>
<ul><a class="cbl-facebook" href="http://www.facebook.com/sharer.php?u=http://www.ciudadblogger.info"><span>Facebook</span></a></ul>
<ul><a class="cbl-linkedin" href="Linkedin-URL"><span>LinkedIn</span></a></ul>
<ul><a class="cbl-rss" href="http://feeds.feedburner.com/ciudadblogger"><span>Feeds</span></a></ul>
</div>
Personalización de este Widget:
Reemplace https://plus.google.com/u/0/116180896434879626623 con su direccion o URL de Google Plus.
Reemplace andante772 con su nombre de usuario Pinterest.
Reemplace Linkedin-URL con su direccion o URL en cuenta Likdendin.
Reemplace http://feeds.feedburner.com/ciudadblogger con direccion o URL de tu blog RSS.
Reemplace:www.ciudadblogger.info con direccion o URL de tu Twitter
Reemplace:www.ciudadblogger.info con direccion o URL de tu Facebook
Todo esta listo disfruta de este Widget Para Compartir En Medios Sociales Con Descripcion Emergente.
0 comentarios:
Publicar un comentario