Como añadir un widget de redes sociales
Los métodos de insertar un código de
redes sociales en blogger es tan simple de realizarlo, lo que vamos a ser el día
de hoy es insertar un código que contiene botones de redes sociales con efectos
de transición, al cual cuando un usuario pasa el cursor por cualquier icono
social se desprenderá el nombre de su red social y así puedan conseguir que los
usuarios que visitan su blog se suscriban a sus nuevas actualizaciones.
Además en anteriores publicaciones di a
conocer algunos métodos de suscripción por medio de redes sociales
- Como agregar la barra de recomendaciones de Facebook a Blogger
- Como agregar un widget de redes sociales a blogger
- Como agregar un widget flotante Social Media en blogger
- Como crear botones flotantes para compartir todas las redes sociales, Crear Bar Flotante
- Widget de Twitter
- Widget de redes sociales para blogger
- Widget de redes sociales para blogger con efectos
- Widget social de suscripciones horizontal para blogger
A continuación mire su demostración en
la página oficial de Grupodelecluse, el cual utiliza este método de seguimiento
social, el widget social está ubicado en el sidebar de la derecha y tiene como
nombre “Síguenos en nuestra Red”
Les gusto verdad
Vamos a trabajar
1 Ir a Blogger
2 Un clic en “Diseño”
3 Abre un gadget “Añadir un gadget”
4 Busca el widget que dice “HTML/Javascript”
5 Ábrelo he ingresa el siguiente código en
su interior
<style
type="text/css">
#ayudadeblogger ul {margin:10px
15px;padding:0px;}
#ayudadeblogger ul li {list-style-type:
none;padding: 0;background: transparent;margin: 0;}
#ayudadeblogger ul li a{background:
url('http://2.bp.blogspot.com/-JKB0aVYaIW0/UC-oBl8NXxI/AAAAAAAAEYA/IbgyikdkM5A/s1600/blsocial12.png')
0 0 no-repeat;
height:48px;padding-left: 48px;cursor: pointer;text-decoration:
none;border-radius:0.5em;-moz-border-radius:0.5em;-webkit-border-radius:0.5em;-o-border-radius:0.5em;display:inline-block;margin:0;width:
220px;}
#ayudadeblogger ul li:hover span
{margin-left: 10px;opacity: 1;}
#ayudadeblogger ul li span
{border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
color: white;
margin-left: 100px;
opacity: 0;
position: relative;
text-align: center;
width: auto;
padding: 5px 10px;
transition: all 0.3s
cubic-bezier(1,2,0,0) 0s;
-moz-transition: all 0.3s
cubic-bezier(1,2,0,0) 0s;
-webkit-transition: all 0.3s
cubic-bezier(1,2,0,0) 0s;
top: 14px;}
#ayudadeblogger span{padding:5px;background:#000;color:#fff;margin:0
5px;}
#ayudadeblogger .fb span {background-color:
#0853A3;}
#ayudadeblogger .twiter span
{background-color: #00B1F7;}
#ayudadeblogger .google span
{background-color: #9E0202;}
#ayudadeblogger .pint span
{background-color: #D00;}
#ayudadeblogger .linkedin span
{background-color: #005075;}
#ayudadeblogger .devart span
{background-color: #4C7A4A;}
#ayudadeblogger .ytube span
{background-color: #A00;}
#ayudadeblogger .rss span {background-color:
#EC5601;}
#ayudadeblogger a.fb { background-position: 0 -384px;}
#ayudadeblogger a.twiter { background-position: 0 -432px;}
#ayudadeblogger a.google { background-position: 0 -480px;}
#ayudadeblogger a.pint { background-position: 0 -528px;}
#ayudadeblogger a.linkedin { background-position: 0 -576px;}
#ayudadeblogger a.devart {
background-position: 0 -624px;}
#ayudadeblogger a.ytube { background-position: 0 -672px;}
#ayudadeblogger a.rss { background-position: 0 -720px;}
#ayudadeblogger a.fb:hover {
background-position: 0 0px;color: #0374DD;}
#ayudadeblogger a.twiter:hover { background-position: 0 -48px;color:
#00A1DF;}
#ayudadeblogger a.google:hover { background-position: 0 -96px;color:
#A70000;}
#ayudadeblogger a.pint:hover { background-position: 0 -144px;color: #C00;}
#ayudadeblogger a.linkedin:hover { background-position: 0 -192px;color:
#005772;}
#ayudadeblogger a.devart:hover { background-position:
0 -240px;color: #4C7A4A;}
#ayudadeblogger a.ytube:hover { background-position: 0 -288px;color: #A00;}
#ayudadeblogger a.rss:hover { background-position: 0 -336px;color:
#EC5601;}
</style>
<div id="ayudadeblogger">
<ul>
<li ><a href="https://www.facebook.com/pages/GrupoDelecluse/116336675191122"
class="icon fb" ><span>Visítanos
en Facebook</span></a></li>
<li ><a href="https://twitter.com/grupodelecluse"
class="icon twiter" ><span>Recomiéndanos
en Twitter</span></a></li>
<li ><a href="https://plus.google.com/104165660096684906208"
class="icon google" ><span>Síguenos
en Google +</span></a></li>
<li ><a href="http://www.pinterest.com/luischavez/"
class="icon pint" ><span>Pinterest</span></a></li>
<li ><a href="http://ec.linkedin.com/pub/luis-chavez/53/549/a91/"
class="icon linkedin" ><span>Contáctame
en LinkedIn</span></a></li>
<li ><a href="http://www.deviantart.com/"
class="icon devart" ><span>DeviantArt</span></a></li>
<li ><a href="http://www.youtube.com/"
class="icon ytube" ><span>Youtube</span></a></li>
<li ><a href="http://feeds.feedburner.com/ForoAyudaDeBlogger"
class="icon rss" ><span>Suscríbete
a nuestro RSS</span></a></li>
</ul>
</div>
|
Realiza estos cambios:
Cambia las URLs que están marcadas de
color azul por las direcciones URLs de tus páginas sociales.
Eso es todo, ahora dales un clic en “Guardar”
y ubica tu nuevo widget social donde mejor te parezca
Fácil verdad
Recuerda suscribirte a las nuevas actualización,
para que lo recibas directamente en tu correo electrónico
¿Necesitas ayuda?
Cualquier pregunta no duden en hacérmelo
saber y de inmediato les responderé
Saludos
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
0 comments:
Publicar un comentario