27 septiembre 2013

Menú todo en uno (enlaces,entradas,comentarios,seguidores,buscador)


menú todo en uno blogger
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.

 menú todo en uno para Blogger
<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 = "http://4.bp.blogspot.com/-atrnn2cvAI0/UjbuVLxR_wI/AAAAAAAAMqA/VzyOU2KIyhM/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="http://4.bp.blogspot.com/-evdDjp9-gkM/UkMjIO3OqFI/AAAAAAAAMrM/o5-rVylub4c/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 y numcomment = 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

Y esto es todo.  Si te ha gustado esta entrada, compártela.

Escrito por:

Mi nombre es Antonio, soy sobre todo Sevillista y apasionado con los blog desde el 2007.

Sígueme en: | Facebook | Twitter | Google+

3 comentarios

Hola amigo, gracias por compartir con nosotros tu excelente trabajo, felicitaciones, lo que pasa es que tengo un problema con los post, por que por defecto usted los puso cinco pero ami solo me sale uno, no sé como solucionarlo por favor....
Otro amigo yo tengo los comentarios de facebook en mi blog, como puedo hacer para que los comentarios de esa red social aparezcan en mi barra de menú y no los de blogger....Gracias por tu respuesta. mi blog es: www.saposoaenlanoticia.blogspot.com

Roger he estado analizando lo de las entradas y con una url de cualquiera de los blog funciona correctamente, no se el motivo por el cual solo muestra una entrada y sin título.
De todas formas, observa como tienes configurado lo del feed en configuración-otros-feed del sitio-que esté en completo.

En cuanto a lo de los comentarios de facebook, la verdad es que no tengo idea, pero creo que resulta bastante difícil poder tenerlos unificados en un solo widget.


Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"