Mil Trucos Blogger

Añadir menú desplegable con buscador interno y redes sociales

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado
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 == &quot;&quot;) {this.value = &quot;e.g. Graphic Design&quot;;}' onfocus='if (this.value == &quot;e.g. Graphic Design&quot;) {this.value = &quot;&quot;;}' 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

0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

9 Comentarios

2 Pings/Trackbacks

  1. diciembre 10, 2013    

    ¡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?

  2. diciembre 10, 2013    

    Gracias

    • diciembre 18, 2013    

      Blueli ya solucionaste el problema?

      Saludos

    • diciembre 18, 2013    

      No, sigue sin funcionarme…

  3. diciembre 22, 2013    

    Instalé el menú pero desaparece el fondo del blog y queda separado de la parte superior de la pagina.

  4. marzo 7, 2014    

    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.

  5. septiembre 25, 2014    

    Buenisimo Gracias 😀

  6. […] 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 […]

  7. […] 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 […]

  1. 9 Menús para Blogger - Hogar Bloguero on agosto 4, 2015 at 7:05 pm
  2. 9 Menús para Blogger - Rocío Bloguera on enero 14, 2016 at 6:40 pm

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo