add

Widgets para Blogger – Metro social


Con Blogger tendrá la oportunidad de realizar un sin fin de trucos para Blogger y así mejorar el diseño de su blog. Este nuevoWidgets para Blogger funciona perfectamente ya sea en una página web o en Blogger. Es un simple código que vamos a colocarlo en un widget y ubicarlo donde mejor nos parezca. La funcionalidad de este widget metro social es muy práctica, ya que los usuarios que visitan sus blogs o páginas web optaran por suscribirse en sus perfiles sociales y suscribirse para recibir sus nuevas actualizaciones. No le causara ningún daño en la estructura de su blog, tiene una carga ligera y optimizada para todos los navegadores web.

Widgets para Blogger – Metro social


Además, si necesitan más Widgets para Blogger, les dejos algunos post que publique anteriormente


A continuación pueden ver su demostración en el siguiente blog, el widget metro social está ubicado en el sidebar


Les gusto verdad!

Vamos a trabajar

1 Ir a Blogger

2 Un clic en “Diseño


3 Abre un gadget “Añadir un gadget

Widgets para Blogger – Metro social

4 Busca el widget que dice “HTML/Javascript” abrelo


5 Ingresa el siguiente código en su interior

<div class='metro-social'>
<li><a class="fb" href=https://www.facebook.com/tratamientosporansiedad rel="nofollow"></a></li>
<li><a class="tw" href=https://www.twitter.com/trastornoansied></a></li>
<li><a class="gp" href="https://plus.google.com/105165843323659030487"></a></li>
<li><a class="pi" href=http://pinterest.com rel="nofollow"></a></li>
<li><a class="in" href=https://www.linkedin.com rel="nofollow"></a></li>
<li><a class="yt" href=http://www.youtube.com/></a></li>
<li><a class="fd" href=http://trastornodeansiedadgeneraliza.blogspot.com/feeds/posts/default rel="nofollow"></a></li>
</div>
<style>
.metro-social{width:295px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:68px;height:70px}
.metro-social .gp{width:69px;height:70px;background:url(//goo.gl/oT0kF) no-repeat center center #da4a38}
.metro-social .pi{background:url(//goo.gl/7olxx) no-repeat center center #d73532;width:68px;height:69px}
.metro-social .in{background:url(//goo.gl/PhFhj) no-repeat center center #0097bd;width:69px;height:69px}
.metro-social .yt{background:url(//goo.gl/zcwjB) no-repeat center center #e64a41;width:140px;height:69px}
.metro-social .fd{background:url(//goo.gl/lhBP1) no-repeat center center #e9a01c;width:140px;height:69px}
.metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}
.metro-social li:hover .pi{background:url(//goo.gl/IORvy) no-repeat center center #d73532}
.metro-social li:hover .in{background:url(//goo.gl/2zHrm) no-repeat center center #0097bd}
.metro-social li:hover .yt{background:url(//goo.gl/I1c4a) no-repeat center center #e64a41}
.metro-social li:hover .fd{background:url(//goo.gl/CjzDP) no-repeat center center #e9a01c}
</style>

Realiza estos cambios:

He marcado de dos colores en los lugares que ustedes tendrán que realizar sus respectivos cambios

Cambia las URLs que están marcadas de color azul por la dirección URL de tu perfil social

Y por último borra la URL que está marcada de color rojo y pon ahí la URL de tu método de suscripción de tu FeedBurner.

Eso es todo, es momento de dar un clic en “Guardar” y ubica tu nuevo widget metro social donde tú quieras

Fácil verdad!

Recuerda suscribirte y así recibirás mis nuevas actualizaciones diarias 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

2 comentarios:

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