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

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

<li><a href='#'><span class='category-pto'>Noticias</span></a>

<ul>

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

</ul>

</li>

<li><a href='#'><span class='tag-pto'>Tendencias</span></a>

<ul>

<li><a href='#'>Categoría</a></li>

</ul>

</li>

</ul>

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

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

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?

TAGS: Menu desplegable

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

Recuerda suscribirte:

Related post

Comentarios

12 comentarios:

Autor

Labels

Popular post

Youtube.com/ayudadeblogger

Formulario de contactos

Diseño

Inspiración

Tecnología

AMP Carrusel video

Suscríbete completamente gratis a nuestro boletín diario

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

Recuerda suscribirte:

Related post

Comentarios

12 comentarios:

Autor

Labels

Popular post

Youtube.com/ayudadeblogger

Formulario de contactos

Diseño

Inspiración

Tecnología

AMP Carrusel video

AMP ADRASTEA

AMP DESIGN DEMO

AMP INSPIRITING

AMP DESTACADO

AMP KITCHEN

AMP FENIX

AMP MODERN

AMP ANDROMEDAD

AMP ALEX DESIGN

AMP BREAKING NEWS

AMP PRO DEMO

AMP BLOG BUILD

AMP TOUCH

AMP OCEAN FREE

AMP KILO

AMP DOMPI

AMP LANDING PAGE ONE

Suscríbete completamente gratis a nuestro boletín diario