add

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

emailEnviar por correo

0 comentarios:

Publicar un comentario en la entrada

Discusión

person_pin Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (33) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (11) Material Design Blogger (2) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios