Los menús desplegables son una genial forma de ahorrar espacio en nuestros blogs porque se le pueden agregar múltiples enlaces y funciones en un solo lugar evitando así que tengamos que utilizar espacios como el sidebar o similares que pueden ser reservados por ejemplo para agregar publicidad.
En el día de hoy les compartiré un espectacular menú desplegable que trae un buscador interno e iconos de suscripción de las principales redes sociales.
Para agregar este truco ve a Plantilla, Editar HTML y pega antes de ]]></b:skin> lo siguiente:
body#layout .section-title,body#layout #navbar2-mid,body#layout #slider,#navbar,.date-header,.feed-links,.post-location,.post-share-buttons,.post-icons{display: none !important;}
body#layout #rside-area{width:260px}
body#layout #topnav {height: 44px;}
body,h1,h2,h3,h4,h5,ul,li,a,p,span,img,dd{margin:0;padding:0;text-decoration:none;border:none;outline:none}
body, .body-fauxcolumn-outer {background: #F9F9F9; color: #333333; font:14px/25px Open Sans,Helvetica Neue,Arial,Helvetica,sans-serif; line-height:22px;}
h1, h2, h3, h4, h5, h6 {color: #444444; font-family:"Open Sans",sans-serif; font-weight: bold; margin-bottom: 8px; }
h1 {font-size:28px}
h2 {font-size:24px}
h3 {font-size:22px}
h4 {font-size:20px}
h5 {font-size:18px}
h6 {font-size:16px}
a { color:#C30217;}
a:hover { color:#000; text-decoration:underline;}
#header-area { background:#A81010; height: 46px; box-shadow:0 5px 8px -1px rgba(0, 0, 0, 0.2); width:100%; position:fixed; z-index:9999; }
#header-rex{width:1002px; margin: 0 auto;}
#header-place {height: 144px; margin: 0 auto; width: 1002px; z-index: 2; }
#header{margin:29px 0 0 12px; border:0 solid $bordercolor; color:$pagetitlecolor; float:left;width:350px; z-index:9999;}
#header,#header a { color: #fff }
#header a:hover {}
#header-inner{margin:35px 0 0 8px;}
#header h1 {font-weight: bold; color:#A81010; margin:0 5px 0; padding:8px 0px 0px 0px; font-family:cambria,georgia,times,times new roman,serif; font-size:40px;line-height:36px; }
#header h1 a,#header h1 a:visited{color:#C20217;text-decoration:none}
#header h1 a:hover{color:#B94040;}
#header img {border:none;max-height:108px; width:330px; padding-top:0px}
#header .description {padding-left:7px; color:#666; line-height:14px; height:20px; font-size:16px; font-weight:bold; padding-top:0px;margin-top:12px; }
#header-rside{float:right;margin-right:0px;padding-right:0px;}
#header-rside .widget{float:right; margin-top:80px; margin-right:12px}
.ftmenu,.ftmenu {list-style:none;margin:0;padding:0}
.ftmenu{float:left;margin:0px 0 0;}
.ftmenu ul{position:absolute;top:-999em;width:160px; border-radius:3px; box-shadow:0 0 3px rgba(0, 0, 0, 0.25);}
.ftmenu ul li{width:100%}
.ftmenu li:hover{visibility:inherit}
.ftmenu li{float:left;position:relative;background:none}
.ftmenu a{display:block;padding:12px 18px; margin:0 2px; position:relative;text-decoration:none; font-weight:bold; font-size:15px; text-transform: uppercase;}
.ftmenu li:hover ul,.ftmenu li.fube ul{left:0;top:48px;z-index:99}
.ftmenu li li a{padding:7px 1em}
.ftmenu a,.ftmenu a:visited{color:#fff}
.ftmenu li li{background:#2F2F2F}
.ftmenu li li li{background:#181818}
.ftmenu li:hover,.ftmenu li.fube,.ftmenu a:focus,.ftmenu a:hover,.ftmenu a:active{outline:0}
.ftmenu li li:hover,.ftmenu li li.fube,.ftmenu li li a:focus,.ftmenu li li a:hover,.ftmenu li li a:active{background:#000}
ul.ftmenu li:hover li ul,ul.ftmenu li.fube li ul,ul.ftmenu li li:hover li ul,ul.ftmenu li li.fube li ul{top:-999em}
ul.ftmenu li li:hover ul,ul.ftmenu li li.fube ul,ul.ftmenu li li li:hover ul,ul.ftmenu li li li.fube ul{left:10em;top:0}
.main-pto{ background: transparent url(http://2.bp.blogspot.com/-JendriKKbUU/Ui06kggLs2I/AAAAAAAAB7w/PtOBeAVGGiM/s1600/main-page.png) no-repeat 0 1px; display: block; text-indent: -9999px; width: 20px;}
#brute { float: right; }
#nav-bar{margin:0 3px 0 12px;}
#nav-bar .ftmenu li li { background: #393939; list-style:none;}
#nav-bar .ftmenu li li li { background: #2f2f2f; }
.category-pto { background: transparent url(http://4.bp.blogspot.com/-JmMeqPkKyu4/Ui06lVUekOI/AAAAAAAAB74/2jj6filUmOM/s1600/3+line+icon.png) no-repeat 0 0; padding-left: 20px; }
.tag-pto { background: transparent url(http://1.bp.blogspot.com/-4NqMVqLzPec/Ui06mAKrEfI/AAAAAAAAB8A/8S9Es32NiD8/s1600/snippet+icon.png) no-repeat 0 0; padding-left: 20px; }
.pages-pto{ background: transparent url(http://3.bp.blogspot.com/-n-i7FLYP6xU/UiungVToLDI/AAAAAAAAB6A/DgzpnBCRKTE/s1600/pages.png) no-repeat 0 -4px; display: block; text-indent: -9999px; width: 10px }
.follow-pto { background: transparent url(http://4.bp.blogspot.com/-37MwkS4Cess/UiunhaniQhI/AAAAAAAAB6I/E-bembSzOMw/s1600/follow.png) no-repeat 0 -4px; padding-left: 0px; display: block; text-indent: -9999px; width: 73px;}
.search-pto { background: transparent url(http://4.bp.blogspot.com/-0aNKNGl3LOs/Uetsy6cMAjI/AAAAAAAABsg/hr5c_6N5q_U/s1600/search.png) no-repeat 0 -4px; padding-left: 20px; display: block; height: 27px; text-indent: -9999px; width: 72px;}
.rss-tco {background: transparent url(http://1.bp.blogspot.com/-baPEplcJGtM/Uiu5GaXNCLI/AAAAAAAAB6Y/UuYRGL4pxk8/s1600/rss.png) no-repeat 0 -1px; padding: 0px 0 0 31px; position:absolute;}
.facebook-tco {background: transparent url(http://3.bp.blogspot.com/-rZHtAYI82to/Ui0jByFEKsI/AAAAAAAAB64/zoUQmXuMCgA/s1600/facebook.png) no-repeat 0 -1px; padding: 0px 0 0 31px; position:absolute;}
.twitter-tco {background: transparent url(http://4.bp.blogspot.com/-ZrrFccnGAho/Ui0jBYDoLVI/AAAAAAAAB6w/8fU1zuHm9mE/s1600/twitter.png) no-repeat 0 -1px; padding: 0px 0 0 31px; position:absolute;}
.google-tco {background: transparent url(http://3.bp.blogspot.com/-twSYe01PTMQ/Ui0j65KrZxI/AAAAAAAAB7I/i7ciy-mJUG4/s1600/google+.png) no-repeat 0 -1px; padding: 0px 0 0 31px; position:absolute;}
.newsletter-tco {background: transparent url(http://1.bp.blogspot.com/-HiAsxEs7934/Ui0jAXOeEHI/AAAAAAAAB6o/ddZ99eboGZU/s1600/email.png) no-repeat 0 -1px; padding: 0px 0 0 31px; position:absolute;}
.pinterest-tco {background: transparent url(http://3.bp.blogspot.com/-YxCfs4HfjxA/Ui0jDRq39tI/AAAAAAAAB7A/cVpEHle9TTI/s1600/pinterest.png) no-repeat 0 -2px; padding: 0px 0 0 31px; position:absolute;}
.bonet{background: transparent;}
#nav-bar a:hover, #nav-bar a:active { color: #A81010; }
#nav-bar ul li a:hover, #nav-bar ul li.fube a {}
#nav-bar a:link, #nav-bar a:visited { color: #CACACA; }
#nav-bar a:hover, #nav-bar a:active { color: #2FA694; }
#nav-bar .ftmenu li li:hover, #nav-bar .ftmenu li li,
#nav-bar .ftmenu li li a:focus, #nav-bar .ftmenu li li a:hover, #nav-bar .ftmenu li li a:active {background: #ffffff;color: #000;}
#nav-bar a:link, #nav-bar a:visited { color: #FFFFFF;}
#nav-bar li li a:link, #nav-bar .ftmenu li li a:visited { color: #666666; font-weight:normal; font-size:18px; text-transform: none;}
#nav-bar .ftmenu li li { background: #FFFFFF; }
#nav-bar .ftmenu li li li { background: #045F7D; }
#nav-bar .ftmenu li li:hover, #nav-bar .ftmenu li li.fube,
#nav-bar .ftmenu li li a:focus, #nav-bar .ftmenu li li a:hover,
#nav-bar .ftmenu li li a:active {color: #C30217;}
#nav-bar ul li:hover ul,#nav-bar ul li.fube ul {left:0;top:46px;width:190px;}
.search-form{padding: 15px; z-index: 9999;}
.menu-search ul{width: 280px !important; position:absolute; margin: 0 0 0 -170px;}
.sf-sub-indicator {
background: url("http://demo.theme-junkie.com/wordplus/wp-content/themes/wordplus/images/ico-primary-arrow-down.png") no-repeat scroll 0 0 transparent;
display: block;
overflow: hidden;
position: absolute;
right: 2px;
text-indent: -999em;
top: 8px;
width: 10px;
}
#brute li {background:url("http://1.bp.blogspot.com/-QWhouzPqR64/Ui1JWmGEQMI/AAAAAAAAB8Y/MnIJa9G1rEg/s1600/divider.png") no-repeat scroll left top transparent;}
#socialize-submenu{left: -193px;
width: 255px;
z-index: 3000;}
#socialize-submenu li{height: 17px;
padding:4px 0 30px;
text-transform: uppercase;
width: 140px;}
.site-meta ul ul{background: none repeat scroll 0 0 #F5FCFD;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
display: none;
float: left;
left: -58px;
padding: 10px 0;
position: absolute;
top: 65px;
width: 140px;
z-index: 2000;}
.site-meta ul{ float: left;
list-style: none outside none;
margin: 0;
padding-left: 0;}
#brute li a{
font-family: "Open Sans",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 31px;
transition: color 0.2s ease 0s;}
#search-area {background-color: #FFFFFF;
border-radius: 5px 5px 5px 5px;
float: right;
height: 22px;
margin: 12px;
padding: 1px 0 1px 6px;
width: 162px;}
#search-area input { background:none; border:none; color:#666666; font-size:11px; width:119px;}
#search-area input:last-child { background:url(http://3.bp.blogspot.com/-_irDiN7H9wY/URoUObi3heI/AAAAAAAAAU8/HeBgNkjIHE8/s1600/strc.png) no-repeat;
height: 21px; float: right; margin-right:15px; width:20px;
cursor: pointer;; border:none; color:#555555; }
#search-icon{}
#searchform{text-indent:3px;}
Ahora pega arriba de <body> lo siguiente:
<div id='header-area'> <div id='header-rex'> <div id='nav-bar'> <ul class='ftmenu'> <li class='bonet'><a expr:href='data:blog.homepageUrl'><span class='main-pto'>Home</span></a></li> <li><a href='#'><span class='category-pto'>Noticias</span></a> <ul> <li><a href='#'>Categoría</a></li> <li><a href='#'>Categoría</a></li> <li><a href='#'>Categoría</a></li> <li><a href='#'>Categoría</a></li> <li><a href='#'>Categoría</a></li> <li><a href='#'>Categoría</a></li> </ul> </li> <li><a href='#'><span class='tag-pto'>Deportes</span></a> <ul> <li><a href='#'>Categoría</a></li> <li><a href='#'>Categoría</a></li> <li><a href='#'>Categoría</a></li> <li><a href='#'>Categoría</a></li> <li><a href='#'>Categoría</a></li> <li><a href='#'>Categoría</a></li> </ul> </li><li><a href='#'><span class='tag-pto'>Tendencias</span></a> <ul> <li><a href='#'>Categoría</a></li> <li><a href='#'>Categoría</a></li> <li><a href='#'>Categoría</a></li> <li><a href='#'>Categoría</a></li> <li><a href='#'>Categoría</a></li> <li><a href='#'>Categoría</a></li> </ul> </li> </ul> <ul class='ftmenu' id='brute'> <li><div id='search-area'> <form action='/search' id='searchform' method='get'> <input name='q' onblur='if (this.value == "") {this.value = "e.g. Graphic Design";}' onfocus='if (this.value == "e.g. Graphic Design") {this.value = "";}' type='text' value='Buscar'/> <input id='search-icon' type='Submit' value=''/> </form> </div></li> <li><a href='#'><span class='pages-pto'>Pages</span></a> <ul> <li><a href='#'>Tendencias</a></li> <li><a href='#'>Noticias</a></li> <li><a href='#'>Contactos</a></li> <li><a href='#'>Economía</a></li> </ul> </li> <li class='menu-search'><a href='#'><span class='follow-pto'>follow</span></a> <ul class='sub-menu' id='socialize-submenu'> <li class='rss'><a href='SU URL DE FEEDBURNER' target='_blank'><span class='rss-tco'>Rss Feeds</span></a></li> <li class='facebook'><a href='SU URL DE FACEBOOK' target='_blank'><span class='facebook-tco'>Facebook</span></a></li> <li class='pinterest'><a href='SU URL DE PINTEREST'><span class='pinterest-tco'>Pinterest</span></a></li> <li class='email'><a href='SU URL DE NEWSLETTER' target='_blank'><span class='newsletter-tco'>Email</span></a></li> <li class='twitter'><a href='SU URL DE TWITTER' target='_blank'><span class='twitter-tco'>Twitter</span></a></li> <li class='googleplus'><a href='SU URL DE GOOGLE+'><span class='google-tco'>Google+</span></a></li> </ul> </li> </ul> </div> <div class='clear'/> </div> </div>
Reemplaza los numerales que están marcados de color verde #, y pon ahí la URL del post que quieras.
Reemplaza los nombres que están marcados de color azul y que dicen ‘SU URL DE FEEDBURNER´ por las URLs de los perfiles de tus redes sociales
Borra los nombres que están marcados de color rojo, y pon ahí el nombre de un tema que quieras mostrar
Y por último, borra los nombres que están resaltados en negrita, por el nombre de la categoría o etiqueta que tú quieras.
Como ven este truco truco es muy fácil de añadir y lo mejor de todo es que le da a cualquier blog un toque muy profesional.
Via: Ayudadeblogger
9 comentarios
Blueli · diciembre 10, 2013 a las 3:37 pm
¡Hola! He aplicado el tutorial tal como dicen y la barra se ve bien el problema es que desaparece mi header :/ ¿Qué puede pasar?¿Cómo puedo solucionarlo?
Blueli · diciembre 10, 2013 a las 3:38 pm
Gracias
Hayder Juvinao · diciembre 18, 2013 a las 2:13 pm
Blueli ya solucionaste el problema?
Saludos
Blueli · diciembre 18, 2013 a las 4:44 pm
No, sigue sin funcionarme…
Centro de Redaccion · diciembre 22, 2013 a las 3:38 am
Instalé el menú pero desaparece el fondo del blog y queda separado de la parte superior de la pagina.
Annabella Giovannetti · marzo 7, 2014 a las 10:10 pm
Muy bonito el menú, nada más lo vi y me enamoré. Ya intenté ponerlo pero no me funciona. La imagen de mi cabecera la hace pequeñísima y no me permite agrandarla, tengo un código con un aviso movible como el que tienes tú en la parte de arriba de tu blog y las letras me las hizo gigantes haciendo que todo se saliera de proporción :/ Me gustaría que pudieras ayudarme o algo porque de verdad me encantó el menú, era justo lo que buscaba.
Pablo González · septiembre 25, 2014 a las 3:14 am
Buenisimo Gracias 😀
9 Menús para Blogger - Hogar Bloguero · agosto 4, 2015 a las 7:05 pm
[…] También es sencillo de poner en el Blog, siguiendo los pasos que nos dejan en la entrada Mil Trucos Blogger: Añadir menú desplegable con buscador interno y redes sociales […]
9 Menús para Blogger - Rocío Bloguera · enero 14, 2016 a las 6:40 pm
[…] También es sencillo de poner en el Blog, siguiendo los pasos que nos dejan en la entrada Mil Trucos Blogger: Añadir menú desplegable con buscador interno y redes sociales […]