Como insertar un menú desplegable con buscador incluido y redes sociales


Blogger como siempre la mejor plataforma web con la cual se puede crear miles de atractivos trucos e implementarlos en nuestro blog de blogger. El día de hoy aprenderán a insertar un menú desplegable con un buscador integrado y redes sociales incluido en nuestro menú de blogger. Lo que vamos hacer es insertar los códigos dentro del Editor HTML de nuestra plantilla, nuestro nuevo menú desplegable se mostrara arriba de la cabecera principal de nuestro blog de blogger y al momento de desplazarse hacia abajo nuestro menú desplegable se mostrara de forma estática y lo seguirá hacia a donde el usuario se desplace por su blog. Obtener este grandioso truco para blogger de menú desplegable todo incluido, es muy fácil de realizarlo, solo tendrán que seguir las instrucciones tal como lo muestro en este tutorial de como insertar un menú desplegable en blogger.

Como insertar un menú desplegable con buscador incluido y redes sociales

Además, si aún necesitas más trucos para blogger sobre menús desplegables, les dejos algunos tutoriales

  1. Como agregar un menú para mi blog de blogger con un solo widget
  2. Como hacer un Menú vertical desplegable para mi blog de blogger
  3. Como hacer un menú horizontal con submenús y buscador integrado para blogger
  4. Como insertar un Menú desplegable y un Slideshow para blogger
  5. Crear un Menú de colores para blogger
  6. Crear un menú desplegable en Blogger
  7. Menu Jquery para blogger
  8. Menú desplegable para blogger
  9. Menú desplegable para blogger Mega menú V2
  10. Menú desplegable para blogger con imágenes
  11. Menú desplegable para blogger nuevo estilo
  12. Menú desplegable para blogger nuevo estilo CSS3

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


Les gusto verdad!

Vamos a trabajar

1 Ir a blogger

2 Un clic en “Editar HTML

Como insertar un menú desplegable con buscador incluido y redes sociales

Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación

Como insertar un menú desplegable con buscador incluido y redes sociales

En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor, debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual te mostrara tal y cual deberá aparecerte el buscador en tu editor HTML de tu plantilla y así puedas colocar el código en el buscador al momento que yo diga busca este código.

Como insertar un menú desplegable con buscador incluido y redes sociales

3 Busca este código

]]></b:skin>

Inserta las siguientes líneas de código justo arriba del código que encontraste

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;}

4 Busca este otro código

<body>

Inserta el siguiente código de menú, justo abajo del código que encontraste

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

Realiza estos cambios:

He marcado de tres diferentes colores, en los cuales ustedes tendrán que realizar sus respectivos cambios

Borra los numerales que están marcados de color azul #, y pon ahí la URL del post que quieras dar a conocer

Elimina 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 marcados de color verde, por el nombre de la categoría que tú quieras

Eso es todo ahora dale un clic en “Guardar plantilla” y mira los nuevos cambios en tu blog de blogger

Fácil verdad!

Espero haber sido lo más explicativo posible, recuerda suscribirte para que recibas mis nuevas actualizaciones directamente en tu correo electrónico

¿Necesitas ayuda?

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

Saludos

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
¿Te ha resultado útil este artículo, recomiendanos?
Si



Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.

Related post

Comentarios

12 comentarios:

  1. no me funciona, todo se ve abajo como pagina lateral

    ResponderEliminar
    Respuestas
    1. Hola, el codigo funciona perfectamente, tal vez algo estas haciendo mal o algun script esta ocacionando algun problema, enviame la direccion de tu blog para poder observar el codigo y decirte donde esta el error.
      Saludos

      Eliminar
    2. Hola, a mi me pasa exactamente lo mismo. ¿Podrias ayudarme?

      Eliminar
  2. me funciono pero no jallo el whit para ponerlo menos largo la barras de menu medices cual es porfavor??

    ResponderEliminar
  3. Buenas tardes, no encuentro lo que me indicas de body entre <> me aparece pero con una barra delante de la b,¿Habria alguna forma de poner a la derecha de la barra el logo o nombre del blog?¿Se puede cambiar de color la barra?

    Gracias!

    ResponderEliminar
  4. No me funcionó. Se despliega en forma vertical.

    ResponderEliminar
  5. COMO PUEDO PONER ESTE MENU PERO QUITAR LAS REDES SOCIALES

    ResponderEliminar
  6. hermano porque el menu me distorciona la plantilla?

    ResponderEliminar
  7. Hola, no se si el código de Blogger ha cambiado, pero no me aparece la etiqueta < body >

    ResponderEliminar
  8. A mi no me sale la etiqueta body por mas que la busco

    ResponderEliminar
    Respuestas
    1. Hola María, todas las plantillas de Blogger tienen el código <body> tal vez usted no lo esta buscando correctamente, si aun no lo puede encontrar no dude en dejarme la dirección URL de su blog y con mucho gusto le indicare donde se encuentra el código

      Saludos

      Eliminar