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.
Además, si aún necesitas más trucos para
blogger sobre menús desplegables, les dejos algunos tutoriales
- Como agregar un menú para mi blog de blogger con un solo widget
- Como hacer un Menú vertical desplegable para mi blog de blogger
- Como hacer un menú horizontal con submenús y buscador integrado para blogger
- Como insertar un Menú desplegable y un Slideshow para blogger
- Crear un Menú de colores para blogger
- Crear un menú desplegable en Blogger
- Menu Jquery para blogger
- Menú desplegable para blogger
- Menú desplegable para blogger Mega menú V2
- Menú desplegable para blogger con imágenes
- Menú desplegable para blogger nuevo estilo
- 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”
Ahora se te abrirá el editor HTML de tu
plantilla, se mostrara igual como la imagen que esta a continuación
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.
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 == "") {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>
|
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
no me funciona, todo se ve abajo como pagina lateral
ResponderEliminarHola, 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.
EliminarSaludos
Hola, a mi me pasa exactamente lo mismo. ¿Podrias ayudarme?
Eliminarme funciono pero no jallo el whit para ponerlo menos largo la barras de menu medices cual es porfavor??
ResponderEliminarHola, no entiendo a tu pregunta.
EliminarBuenas 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?
ResponderEliminarGracias!
No me funcionó. Se despliega en forma vertical.
ResponderEliminarCOMO PUEDO PONER ESTE MENU PERO QUITAR LAS REDES SOCIALES
ResponderEliminarhermano porque el menu me distorciona la plantilla?
ResponderEliminarHola, no se si el código de Blogger ha cambiado, pero no me aparece la etiqueta < body >
ResponderEliminarA mi no me sale la etiqueta body por mas que la busco
ResponderEliminarHola 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
EliminarSaludos