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.
Para implementarlo en vuestro Bloc solo tenéis que seguir estos pasos:
Un clic en “Plantilla”
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.
Busca este código
]]></b:skin>
Inserta las siguientes líneas de código justo arriba del código que encontraste
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;}
Busca este otro código
<body>
Un clic en “Plantilla”
Un clic en “Editar HTML”
Ahora se le abrirá el Editor HTML de su plantilla
En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor, 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 le muestra como debe aparecerle el buscador en el editor HTML de su plantilla y así pueda colocar el código en el buscador al momento que yo diga busca este código.
Busca este código
<body>
Inserta el siguiente código de menú, justo abajo del código que encontraste
<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 en negrita, y pon ahí el nombre de un tema que quieras mostrar
Y por último, borra los nombres que están marcados en negrita, 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