Luis Chávez
add

Widget para blogger Menú de Redes Sociales


En Widgets para blogger voy a publicar un widget el cual podrán usarlo en su blog de blogger. A este widget se lo conoce como Menú de Redes Sociales, es fácil de implementarlo en su blog, lo que hará este widget Menú de Redes Sociales será mostrarse en la parte superior antes de la cabecera principal de su blog, esto hará que los usuarios que visitan su blog logren seguirlos por las redes sociales mas importantes como Facebook, Twitter y Google +, también tiene un desplegable el cual al hacer clic en el icono de Email, se abrirá automáticamente una ventana en el cual podrán dejarle algún mensaje directamente en su correo electrónico.  Este truco para blogger es muy sencillo de realizarlo, solo tendrán que seguir un solo paso para poder tener este espectacular widget Menú de Redes Sociales.

Widget para blogger Menú de Redes Sociales

create animated gif


A continuación mire su demostración en mi blog de demos


Ahora si a trabajar

1 Ir a blogger

2 Da un clic en “Diseño

Widget para blogger Menú de Redes Sociales

3 Abre el gadget que dice “Añadir un gadget

Widget para blogger Menú de Redes Sociales

4 Busca el widget que dice “HTML/Javascript

Widget para blogger Menú de Redes Sociales

5 Pega el siguiente código en su interior

<style>

ul#navigation {

position: fixed;

margin: 0px;

padding: 0px;

top: 0px;

right: 0px;

list-style: none;

z-index:999999;

width:721px;

}

ul#navigation li {

width: 103px;

display:inline;

float:left;

border:0;

}

ul#navigation li a {

display: block;

float:left;

margin-top: -2px;

width: 100px;

height: 25px;

background-color:#eeeeee;

background-repeat:no-repeat;

background-position:50% 10px;

border:1px solid #BDDCEF;

-moz-border-radius:0px 0px 10px 10px;

-webkit-border-bottom-right-radius: 10px;

-webkit-border-bottom-left-radius: 10px;

-khtml-border-bottom-right-radius: 10px;

-khtml-border-bottom-left-radius: 10px;

text-decoration:none;

text-align:center;

padding-top:80px;

opacity: 0.96;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);

}

ul#navigation li a:hover{

background-color:#CAE3F2;

}

ul#navigation li a span{

letter-spacing:2px;

font-size:11px;

color:#60ACD8;

font-family:trebuchet-ms, arial, tahoma, Sans-Serif;

font-weight:bold;

text-shadow: 0 -1px 1px #fff;

}

ul#navigation .rss a{

background-image: url(http://2.bp.blogspot.com/_znjmv4LDwck/Sj_axehjkOI/AAAAAAAAA9c/nk9FGYOz-X4/s400/rss_64x64.png);

}

ul#navigation .facebook a {

background-image: url(http://4.bp.blogspot.com/_znjmv4LDwck/Sj_bXRRRXzI/AAAAAAAAA98/HIXOZAkEyqY/s400/facebook_64x64.png);

}

ul#navigation .twitter a {

background-image: url(http://1.bp.blogspot.com/_znjmv4LDwck/Sj_cLDgz2cI/AAAAAAAAA-E/Nc04OTHnR48/s400/twitter_64x64.png);

}

ul#navigation .googlebookmarks a {

background-image: url(http://1.bp.blogspot.com/_znjmv4LDwck/Sj_ak6NscZI/AAAAAAAAA9M/rqTYrs6mybg/s400/google_64x64.png);

}

ul#navigation .e-mail a {

background-image: url(http://4.bp.blogspot.com/-uxEWXE85w68/UEbs8WvmppI/AAAAAAAAAlI/VpghuWXa1PU/s1600/email.jpg);

}

</style>

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js" type="text/javascript">

</script>

<script type="text/javascript">

$(function() {

var d=300;

$('#navigation a').each(function(){

$(this).stop().animate({

'marginTop':'-80px'

},d+=150);

});

$('#navigation > li').hover(

function () {

$('a',$(this)).stop().animate({

'marginTop':'-2px'

},200);

},

function () {

$('a',$(this)).stop().animate({

'marginTop':'-80px'

},200);

}

);

});

</script>

<ul id="navigation">

<li class="rss"><a href="http://feeds.feedburner.com/ForoAyudaDeBlogger" target="_blank">RSS Feed</a></li><li class="facebook"><a href="http://www.facebook.com/pages/Ayuda-de-Blogger/140889692709017" target="_blank">Facebook</a></li><li class="twitter"><a href="https://www.twitter.com/ayudadeblogger" target="_blank">Twitter</a></li><li class="googlebookmarks"><a href="https://plus.google.com/114283163993086871162" target="_blank">Google</a></li>

<li class="e-mail"><a href="mailto:ayudadeblogger@gmail.com" target="_blank">E-mail!</a></li></ul>

Realiza estos cambios:

1 Cambia el siguiente link

http://feeds.feedburner.com/ForoAyudaDeBlogger

E inserta el link completo de tu FeedBurner

2 Cambia el link de Facebook

http://www.facebook.com/pages/Ayuda-de-Blogger/140889692709017

E inserta el link perteneciente de tu Fanpage de Facebook

3 Cambia el link de Google +

https://plus.google.com/114283163993086871162

E inserta todo el link perteneciente de tu Google +

4 Cambia la dirección de email que esta marcado de color rojo

ayudadeblogger@gmail.com

E inserta tu dirección de email, eso es todo ahora dale un clic en “Guardar

Ahora ubica el widget donde tú quieras, y mira tu nuevo cambio en tu blog.

Fácil verdad!!!!!

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber y de inmediato les responderé

Saludos

4 comentarios:

  1. Genial, aunque se vería mejor sin el border-left y el border-bottom :)

    milchistes.net

    ResponderEliminar
  2. Como hiciste el slide de También te podría gustar que aparece al final de los post a la derecha

    ResponderEliminar
  3. Hola no entiendo a tu pregunta,

    Saludos.

    ResponderEliminar

Ayudadeblogger.com
Luis Chávez 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 (32) 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 (10) 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