Menú horizontal con redes sociales

 Como ya todos sabemos, lo menúes son una parte importante para nuestro blog, ya que ayuda al visitante a horientarze en nuestro sitio y le es facil para ellos encontrar el contenido relevante de nuestra web. Por lo tanto el menú que queramos utilizar en nuestro blog debe ser atractivo ante los ojos de los visitantes para así llamar la atención y hacer que se interese más en nuestro sitio.

 Anteriormente habíamos visto la forma de insertar un muy buen menú vertical con un ligero efecto de desvanecimiento al pasar el cursor, hoy me da gusto compartir con ustedes este excelente menú horizontal con redes sociales.

 Sky Blue Blogger, es un menú muy elegante con siete iconos de las redes sociales, y como su mismo nombre lo dice, generalmente es de color azul. Creado por Blogger Trix.

   Demostración   

Añadiendo el menú

Antes que nada, tenemos que añadirle los estilos CSS en nuestra plantilla, nos dirigimos a Plantilla, Editar HTML, adentro presionamos CTRL+F y buscamos ]]></b:skin> y antes pegamos los siguientes códigos CSS:

 /* Sky Blue Blogger by BloggerTrix.com translate by NovedadBlogger.net */
#topMenu{border:1px solid #7DF; border-radius:6px; background:#00AAEB; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC6itCaMzzwi7r3UvSN0lGPX4nJqWoRQ46t66thPx7gVbc7ioDHjSBNWJct3U3NIaTdQUTvDowasm-AW4goZWXSdU5nt_x-zqr9dUq8VfQMj3dgjmdw1GWFL2qsVVhzufCWiSyw4gto3s/s1600/bk_topmenu.png) 100% 0 no-repeat,-moz-linear-gradient(top, #00c1fa 0%,#0094dd 100%); /* FF3.6+*/background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC6itCaMzzwi7r3UvSN0lGPX4nJqWoRQ46t66thPx7gVbc7ioDHjSBNWJct3U3NIaTdQUTvDowasm-AW4goZWXSdU5nt_x-zqr9dUq8VfQMj3dgjmdw1GWFL2qsVVhzufCWiSyw4gto3s/s1600/bk_topmenu.png) 100% 0 no-repeat,-webkit-gradient(linear,left top,left bottom,color-stop(0%,#00c1fa),color-stop(100%,#0094dd)); /* Chrome,Safari4+*/background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC6itCaMzzwi7r3UvSN0lGPX4nJqWoRQ46t66thPx7gVbc7ioDHjSBNWJct3U3NIaTdQUTvDowasm-AW4goZWXSdU5nt_x-zqr9dUq8VfQMj3dgjmdw1GWFL2qsVVhzufCWiSyw4gto3s/s1600/bk_topmenu.png) 100% 0 no-repeat,-webkit-linear-gradient(top, #00c1fa 0%,#0094dd 100%); /* Chrome10+,Safari5.1+*/background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC6itCaMzzwi7r3UvSN0lGPX4nJqWoRQ46t66thPx7gVbc7ioDHjSBNWJct3U3NIaTdQUTvDowasm-AW4goZWXSdU5nt_x-zqr9dUq8VfQMj3dgjmdw1GWFL2qsVVhzufCWiSyw4gto3s/s1600/bk_topmenu.png) 100% 0 no-repeat,-o-linear-gradient(top, #00c1fa 0%,#0094dd 100%); /* Opera 11.10+*/background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC6itCaMzzwi7r3UvSN0lGPX4nJqWoRQ46t66thPx7gVbc7ioDHjSBNWJct3U3NIaTdQUTvDowasm-AW4goZWXSdU5nt_x-zqr9dUq8VfQMj3dgjmdw1GWFL2qsVVhzufCWiSyw4gto3s/s1600/bk_topmenu.png) 100% 0 no-repeat,-ms-linear-gradient(top, #00c1fa 0%,#0094dd 100%); /* IE10+*/background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC6itCaMzzwi7r3UvSN0lGPX4nJqWoRQ46t66thPx7gVbc7ioDHjSBNWJct3U3NIaTdQUTvDowasm-AW4goZWXSdU5nt_x-zqr9dUq8VfQMj3dgjmdw1GWFL2qsVVhzufCWiSyw4gto3s/s1600/bk_topmenu.png) 100% 0 no-repeat,linear-gradient(to bottom, #00c1fa 0%,#0094dd 100%); /* W3C */background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC6itCaMzzwi7r3UvSN0lGPX4nJqWoRQ46t66thPx7gVbc7ioDHjSBNWJct3U3NIaTdQUTvDowasm-AW4goZWXSdU5nt_x-zqr9dUq8VfQMj3dgjmdw1GWFL2qsVVhzufCWiSyw4gto3s/s1600/bk_topmenu.png) 100% 0 no-repeat,filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00c1fa',endColorstr='#0094dd',GradientType=0 ); /* IE6-9 */}
#topMenu ul.sf-menu li{border-right:1px solid #80CFFF}
#topMenu ul.sf-menu li a{color:#CBEBFE; text-shadow:#008FE8 1px 1px}
#topMenu ul.sf-menu li li a{color:#CBEBFE}
#topMenu ul.sf-menu li a:hover{color:#FFF}
#topMenu ul.sf-menu li li{}
#socialIcons li{border-left:1px solid #2BC9FD}
#topMenu{width:960px; height:46px; position:absolute; top:125px; left:0; -webkit-box-shadow:0 6px 6px -6px #999; -moz-box-shadow:0 6px 6px -6px #999; box-shadow:0 6px 6px -6px #999}
#topMenu ul.sf-menu li{float:left; padding:0 15px; font-size:12px;list-style: none;margin-left: -10px;}
#topMenu ul.sf-menu li a{text-decoration:none; text-transform:uppercase; font-weight:bold; padding:4px 0}
#topMenu ul.sf-menu li a:hover{text-shadow:none}
#topMenu ul.sf-menu li li{padding:0; border:none}
#topMenu ul.sf-menu li li a{font-weight:normal; padding:4px 12px}


#socialIcons{position:absolute; right:0;  margin:0 0}
#socialIcons li{float:left; padding:0 10px;list-style: none;}
#socialIcons li a{display:block; text-indent:-9999px; width:24px; height:19px}
#socialIcons li a:hover{background-position:0 -19px}
#socialIcons .twitter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhExm3pSk8rLRopOTmuR1B2VgpbeoIDb-WRGpVW4awT76cYO1fQBJe3qex62bMksd_FfsZ5FOXD9TErHrvfRmhsA6fg9MgiDHRBV5XfkBulDXvf2Bq3MluavKjuIThbZLr7xsajp7kKll0/s1600/ico_twitter.png) 0 0 no-repeat}
#socialIcons .facebook{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3TN2JFz7cbdvQY6qbQqfPPNV13rxkeiAVftq3FQMA9jJqeIJwIt8Jy6l4uA873NRlrEDMFyCIXWk0-C6NO2D4RIOd5twn9R_QEAX8RtaLGPk1Xbp4OGVBPM7nM8aV6sacoxFqBjrJtzc/s1600/ico_facebook.png) 0 0 no-repeat}
#socialIcons .flickr{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmiQyJ2Aq3x5dQgoW-GaPbC5GShnCTWYVMYKDgQ4d3-OOeGHodrR6wXYm9EK4F_E7tZImiaCO-se4vWUo1y7Oo5Ddp7W4EKGL6_oS7Ab_fi9_DdNXhR-o0KGTOOiL8U14YlO5fnBiUitk/s1600/ico_flickr.png) 0 0 no-repeat}
#socialIcons .linkedin{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuiD6xbtAkaoClxWtlUjwrLBgzhPE8DunJs0KAgnVi3MqeSAkvFn2LSoWFkYUbkx4Q5BSd2l3p00qwYXS3v_XPvHd_41q6uQxd1z1DMDGLKUAWXCo7yqA8jw6GkQmnfX69t859HleVIlk/s1600/ico_linkedin.png) 0 0 no-repeat}
#socialIcons .vimeo{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga6nqkKwu3pxJcPyuOm7RQghkBqq6gHcDc57GjV5QPhyphenhyphen1WQn3zOPmTnAwiE1gowS_-g2QI6-WGfYkV0NMMongkvh9a0Co3If56uDdYmyWFnis0fIyREV-f61Ch9EQlvdF3LWV1jZeAFoA/s1600/ico_vimeo.png) 0 0 no-repeat}
#socialIcons .googleplus{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-Owfkh462frnKlRQ_CaEmmxQnokriRKIOnmatGVMPRbQjgf64-47fetCZL_DEWoP6ygB-Jkv7R98kKyTKAX0rMWz-xpvWrZbNfj37iIqLB1HwNRo4O-s4YeCWHxwNRbAlahnmc1MLK4k/s1600/ico_google.png) 0 0 no-repeat}
#socialIcons .rss{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5vIKL4-ZAlTTw9H_onllOlHQPEp062sJS8JQl5kawa00mWJ5urlR4P40TaOOhNcNA_tPLVx3ZkEkTrmiCq3L6aXoyCrvqSmPQj5uARKVUbbgG1SChxxJpESzi6Ls_zXXjaKgQkFfk6x4/s1600/ico_rss.png) 0 0 no-repeat}

Guardamos la plantilla y nos redirigimos a Diseño, Añadir Gadget, HTML/Javascript, y en el cuadro pegamos:

 <div id="topMenu">
<ul class="sf-menu sf-js-enabled sf-shadow" id="menu-topmenu">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<ul id="socialIcons">
<li><a class="twitter tooltip" href="#twitter"  target="_blank">Twitter</a></li>
<li><a class="facebook tooltip" href="#facebook" target="_blank">Facebook</a></li>
<li><a class="linkedin tooltip" href="#linkedin" target="_blank">LinkedIn</a></li>
<li><a class="googleplus tooltip" href="#google-plus" target="_blank">Google+</a></li>
<li><a class="flickr tooltip" href="#flickr" target="_blank">Flickr</a></li>
<li><a class="vimeo tooltip" href="#vimeo" target="_blank">Vimeo</a></li>
<li><a class="rss tooltip" href="#rss"  target="_blank">RSS Feed</a></li>
</ul>
</div>

Solo encárgate de modificar lo resaltado en rojo por las URLs que correspondan, y lo de naranja son los títulos del menú.

Add Comment

 

Gadgets, Social