MENÚ TODO EN UNO (ENLACES,ENTRADAS,COMENTARIOS,SEGUIDORES,BUSCADOR)

Os presento un Menú fantástico que podemos implementar facílmente en nuestros blogs. No se necesitan muchos conocimientos para instalarlo porque no hay que tocar la plantilla absolutamente para nada. Se instala en un widget/html y este menú lleva incorporado 5 widget que normalmente van colocados en la sidebar del blog, estos widget son: últimas entradas, últimos comentarios, seguidores de Facebook, seguidores de Twitter y seguidores de Google+.

Veamos como instalarlo:

1. Ir a Blogger, luego da un clic en Diseño
2. Seleciona un  widget-HTML/Javascript y pega el siguiente código en su interior.

<style type='text/css'>
#autonav {position:relative;top:0px;right:0px;left:0px;
z-index:9999;margin:0px 0px;padding:0px 0px;font:normal 12px Arial,Sans-Serif;
border-bottom:2px solid #333;-webkit-box-shadow:0px 1px 7px rgba(0,0,0,.4);-moz-box-shadow:0px 1px 7px rgba(0,0,0,.4); box-shadow:0px 1px 7px rgba(0,0,0,.4);}
#autonav ul {margin:0px 0px;padding:0px 0px;height:30px;
background-color:#424242;}
#autonav ul li {list-style:none;display:inline;
float:left;margin:0px 0px;padding:0px 0px;position:relative;}
#autonav ul li a {display:block;line-height:30px;
height:30px;overflow:hidden;margin:0px 0px;
padding:0px 15px;border-left:1px solid #ccc;
border-right:1px solid #ccc;text-decoration:none;
text-shadow:0px -1px 0px rgba(0,0,0,.4);color:white;
font-weight:bold;}
#autonav ul li a:hover {background-color:#979696;}
#autonav ul ul {position:absolute;width:260px;height:auto; top:100%;
left:0px;z-index:99;background-color:#fff;
-webkit-box-shadow:0px 1px 3px rgba(0,0,0,.7);
-moz-box-shadow:0px 1px 3px rgba(0,0,0,.7);
box-shadow:0px 1px 3px rgba(0,0,0,.7);
overflow:visible !important;display:none;}
#autonav ul ul:before {content:"";width:0px;height:0px;
border:7px solid transparent;border-bottom-color:#111;
position:absolute;top:-14px;left:24px;}
#autonav ul ul li {display:block;float:none;
margin:0 5px 5px 5px;}
#autonav ul ul li a { border:none;color:#424242;}
#autonav ul ul ul {top:0px;left:100%;}
#autonav li:hover > ul {display:block;}
#autonav ul.json-dropdown { overflow:hidden;}
#autonav ul.json-dropdown li {cursor:pointer;display:block;padding:7px 10px;
margin:0px 0px;overflow:hidden;}
#autonav ul.json-dropdown li a { line-height:14px; height:auto !important;padding:0px 0px;}
#autonav ul.json-dropdown li a:hover {text-decoration:underline; background:transparent;}
#autonav li ul li a:hover,#autonav li ul.json-dropdown li:hover {background-color:#EEECEC;}
#autonav ul.json-dropdown img.rp-thumb { padding:0px 0px;outline:none;border:2px solid #ccc;display:block;float:left;margin:0px 10px 0px 0px;width:30px;height:30px;}
#autonav .subposts span,#autonav .subcomments span {
font-family:Verdana,Arial,Sans-Serif;color:#666;
font-size:11px;}
#autonav .wide {width:350px;}
#search{position:relative;float:right;top:5px;left:20px;}
#search-box { width:220px;height:23px;border:10px;text-align:center;background:#fff ;}
</style>
<script type='text/javascript'>
//<![CDATA[
var numposts = 5,
cmtext = "Comentarios",
pBlank = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsEs2k_SN8Zgm0GTChrTm76BzAMa_3_dyIg1j7k3YdlgA-uf-18K1BB0t5WkP7X4_qNRVADwh6vM6sk1aWxmHRq4vdjnOdmKZVFin_quY9MId5EIwKnc4-3CIhvhaOuoPFNhXOHkh3_FQ/s1600/no-imagen-chica.gif",
numcomment = 5,
cmsumm = 100;
//]]>
</script>
<script src='https://googledrive.com/host/0BwZ7Sm1QQc1lTnlVZG1DS3V0N3c/menucomempost.js' type='text/javascript'></script>
<nav id='autonav'>
<ul>
<li><a href='URL DE TU BLOG'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEUDTWoMX6yxFNSKDpSDaOqMdeBw3RR9w4cUM2ZfOaXwEwvjUtaIBAmi5QIZAb-tZ5Xa7pxiSDa-xtH5-lvJgggU8d45gRWhVfkHJT5g-VBvrPcjhoVe37fa9SK_iegjuOdErHDD5J7xg/s1600/53-house.png" alt="home" height="25" width="24" /> </a></li>
<li><a href='#'>Enlace 1</a>
<ul>
<li><a href='#'>Sub-enlace1</a></li>
<li><a href='#'>Sub-enlace2</a></li>
<li><a href='#'>Sub-enlace3</a></li>
</ul>
</li>
<li><a href='#'>Enlace 2</a>
<ul>
<li><a href='#'>Sub-enlace1</a>
<ul>
<li><a href='#'>Sub Sub-enlace1</a></li>
<li><a href='#'>Sub Sub-enlace2</a></li>
<li><a href='#'>Sub Sub-enlace3</a></li>
</ul>
</li>
<li><a href='#'>Contacto</a></li>
<li><a href='#'>Sobre mí</a></li>
</ul>
<li><a href='#'>Entradas </a>
<ul class='json-dropdown subposts wide'>
<script src='http://NOMBRE-DE-TU-BLOG.blogspot.com/feeds/posts/default/?alt=json-in-script&callback=entradas'></script>
</ul>
</li>
<li><a href='#'>Comentarios </a>
<ul class='subcomentarios'>
<script src='http://NOMBRE-DE-TU-BLOG.blogspot.com/feeds/comments/default?alt=json-in-script&callback=comentarios'></script>
</ul>
</li>
<li><a href='#'>Facebook</a>
<ul class='facebook'>
<div class='fanbox'>
<iframe src=
"http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/NOMBRE-DE-FACEBOOK&width=260&colorscheme=light&show_faces=true&stream=false&
header=false&height=260"
scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:260px; height:260px;"></iframe>
</div>
</ul>
<li><a href='#'>Twitter</a>
<ul class='twitter'>
<iframe src="http://50.63.179.86/twitter/twitter.html?user=NOMBRE-DE-TWITTER&no=17&h=325&t=light& scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:260px; height:260px;" allowtransparency="true"></iframe>
</ul>
<li><a href='#'>Google+</a>
<ul class='google+'>
<div class="g-plus" data-action="followers" data-height="260" data-source="blogger:blog:followers" data-href="https://plus.google.com/u/0/ID-DE-GOOGLE+" data-width="260">
</div>
<script type="text/javascript"> window.___gcfg = {lang: 'es'};
(function() {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
</ul>
</li>
<li><form action='/search' id='search' method='get' name='searchForm' style='display:inline;'>
<input id='search-box' name='q' onblur='if (this.value == "") this.value = "Buscar...";' onfocus='if (this.value == "Buscar...") this.value = "";' size='28' type='text' value='Buscar...'/></form>
</li>
</li></li></li></ul>
</nav>

Si quieres hacer una prueba antes de colocarlo en tu blog, copia el código y pégalo Aquí

ATENCIÓN: Si usas una plantilla del Diseñador de Blogger primero necesitas seguir los pasos siguientes:
Lo primero es entrar en Diseño | Edición de HTML y busca esta línea:

<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>

Elimina lo que está en color rojo.
Es posible que tengas muchas partes como la que está en rojo, elimina todas las que encuentres.

Luego busca esta parte en la plantilla:

/* Tabs
----------------------------------------------- */

Y elimina todo lo que haya dentro de ello. Ejemplo:

/* Tabs
----------------------------------------------- */
.tabs-outer {
overflow: hidden;
position: relative;
background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0;
}
#layout .tabs-outer {
overflow: visible;
}
.tabs-cap-top, .tabs-cap-bottom {
position: absolute;
width: 100%;
border-top: 1px solid $(tabs.border.color);
}
.tabs-cap-bottom {
bottom: 0;
}
/* Headings
----------------------------------------------- */

Con esto las subpestañas podrás desplegarse sin problemas.


Configurando el menú:

1.- Modificar el color del menú y del hover:
Cambiamos el color en background-color:#424242; yel hover en background-color:#979696
Puedes ver los colores en esta tabla

2.- Cambiar el valor de las entradas y comentarios a mostrar: var numposts = 5, para las entradas ynumcomment = 5, para los comentarios.

3.- Cambiar todo lo que está en negrita 

4.- Importante: Para el Fan-box de twitter, si no lo tenéis en vuestro blog, deberéis realizar solo el primer paso de esta entrada:  Fan-box de Twitter

Imprimir artículo