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.

Como añadir un widget de redes sociales

Además en anteriores publicaciones di a conocer algunos métodos de suscripción por medio de redes sociales

  1. Como agregar la barra de recomendaciones de Facebook a Blogger
  2. Como agregar un widget de redes sociales a blogger
  3. Como agregar un widget flotante Social Media en blogger
  4. Como crear botones flotantes para compartir todas las redes sociales, Crear Bar Flotante
  5. Widget de Twitter
  6. Widget de redes sociales para blogger
  7. Widget de redes sociales para blogger con efectos
  8. 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


Como añadir un widget de redes sociales

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




Share:

Related post

Disqus

Disqus comments:


Google+

Google+ comments:

Facebook

Facebook comments: