Menú de navegación Widget para Blogger

Te presento un menu de navegación para Blogger. una navegación que facilitara la exploración de un suario en tu blog, Ofreciendole un paseo comodo por tu blogger los pasos son muy sencillos y te los doi a continuación . recuerda seguir todos los pasos. yo te mostrare el menu de navegación para blogger ayudándote con imágenes para un mayor entendimiento. espero te pueda ser útil y recuerda que puedes jugar con este código y personalizarlo a tu deseo.

UNA IMAGEN DE MUESTRA

VER LA DEMOSTRACIÓN

COMO SE INSTALA ESTE WIDGET

1. Vaya a Escritorio de Blogger  > Seleccione el Blog > Ir a la plantilla 

1. Haga clic en  Editar HTML botón

EL CSS

Agregue el siguiente código CSS antes de ]]></b:skin>




/* Menu Stylings */
.w2bmenu *{margin: 0;padding: 0;}
ul.w2bmenu {list-style: none;line-height: 1;overflow: visible !important;}
ul.w2bmenu:after{margin: 0;padding: 0;content: ' ';display: block;height: 0px;clear: both;}
ul.w2bmenu li{list-style: none;position:relative;float: left;margin: 0 !important;padding: 0 !important;}
ul.w2bmenu li a{margin: 0;padding: 12px 16px !important;font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;color: #6b6b6b !important;text-shadow: 0 1px 0 #fff;font-weight: 700 !important;text-transform: uppercase !important;font-size: 12px !important;display: block !important;border: 0 none !important;}
ul.w2bmenu li a:hover,ul.w2bmenu li a.hoverover{background: #f5f5f5 !important;}
ul.w2bmenu ul{position: absolute;display: none;top: 100%;border:1px solid #ccc;}
ul.w2bmenu li:hover > ul{display: block;}
ul.w2bmenu ul li{float: none;min-width: 160px;background:#f5f5f5;text-shadow: none;}
ul.w2bmenu ul li a{padding: 12px 14px;text-transform: none;font-weight: normal;}
ul.w2bmenu ul li a:hover,ul.w2bajaxmenu ul li a.hoverover{background: #fff !important;}
ul.w2bmenu ul ul{display: none;left: 100%;top: 0;}
/* AJAX Menu Stylings */
ul.w2bajaxmenu li div.submenu {display: none;position: absolute;width: 600px;z-index: 90;left: -1px;top: 100%;overflow: hidden;min-height: 150px;background: #fff;border:1px solid #cccccc;border-top: 0 none;}
ul.w2bajaxmenu li:hover div.submenu {display: block;}
ul.w2bajaxmenu ul ,ul.w2bajaxmenu ul li{display: block !important;border: 0 none !important;margin: 0 !important;padding:0 !important;}
ul.w2bajaxmenu ul li{background: none !important;float: none !important;}
ul.w2bajaxmenu ul.verticlemenu{position: absolute;width: 33%;left:0;top:0;bottom: 0;background: #f5f5f5;}
ul.w2bajaxmenu ul.postslist {position: relative;display: block;width:65%;float: right;margin: 8px 0 !important;background: none;}
ul.w2bajaxmenu ul.postslist li{display: block;overflow: hidden;border-bottom: 1px #eee solid;position: relative;min-height: 60px;padding: 8px 8px 8px 110px !important;}
ul.w2bajaxmenu ul.postslist li:last-child{border-bottom: none 0;}
ul.w2bajaxmenu ul.postslist li .imgCont{position: absolute;left: 0;top:8px;width: 100px;height: 60px;overflow: hidden;border:1px solid #dcdcdc;font-size: 0;line-height: 0;}
ul.w2bajaxmenu ul.postslist li .imgCont img{position: relative;top:-20px;padding: 0;width: 100px;height: 100px;display: block;}
ul.w2bajaxmenu ul.postslist li a{display: block;line-height: 1.4;padding: 0 !important;}
ul.w2bajaxmenu .loader{background:url('http://i.imgur.com/SeivG.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position: absolute;top:50%;margin-top: -11px;right:5px;}
ul.w2bajaxmenu .menuArrow {border-bottom: 4px solid transparent;border-top: 4px solid transparent;border-left: 4px solid #999999;display: block;height: 0;margin-top: -4px;position: absolute;right: 11px;top: 50%;width: 0;}
#w2bajaxmenu {background: #ededed;background: -moz-linear-gradient(top, #ededed 0%, #e0e0e0 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#e0e0e0));background: -webkit-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: -o-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: -ms-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: linear-gradient(to bottom, #ededed 0%,#e0e0e0 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#e0e0e0',GradientType=0 );border: 1px solid #cccccc;}

EL CÓDIGO JAVASCRIPT

añadir la siguiente línea de código antes de  </head> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

añadir el siguiente codigo antes de  </head> 

<script type="text/javascript" src="http://widgets.way2blogging.org/blogger-widgets/ajaxbloggermenu.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
	$('#w2bajaxmenu').ajaxBloggerMenu({
		numPosts : 4, // Number of Posts to show
		defaultImg : 'http://url-to-image.com/default-image.jpeg' // Default thumbnail Image
	});
});
</script>

EL HTML

En esta sección debe agregar el código HTML . agrego el codigo en HTML / JavaScript gadget.

<ul id="w2bajaxmenu" class="w2bmenu">

<li>

<a href="#">Home</a>

</li>

<li>

<a href="#">EJEMPLO1</a>

<ul>

<li><a href="http://yourblogdomain.blogspot.com/search/label/AdSense">ETIKETA1</a></li>

<li><a href=" http://yourblogdomain.blogspot.com/search/label/SEO
">ETIKETA2</a></li>

<li><a href=" http://yourblogdomain.blogspot.com/search/label/JUANITO">ETIKETA3</a></li>

<li><a href=" http://yourblogdomain.blogspot.com/search/label/JUEGOS">ETIKETA4</a>

</ul>

</li>

<li>

<a href="#">EJEMPLO2</a>

<ul>

<li><a href="http://yourblogdomain.blogspot.com/search/label/JUANITO1">ETIKETA1</a></li>

<li><a href=" http://yourblogdomain.blogspot.com/search/label/JUANITO2">ETIKETA2</a></li>

<li><a href="http://yourblogdomain.blogspot.com/search/label/JUANITO3">ETIKETA3</a></li>

<li><a href=" http://yourblogdomain.blogspot.com/search/label/JUANITO4">ETIKETA4</a></li>

</ul>

</li>

<li><a href="http://yourblogdomain.blogspot.com">UN LINK NORMAL</a></li>

</ul>

Y bueno eso seri todo. recuerden que pueden manipular las etiketas . o pueden hacer una entrada relacionada con sus mejores blogs y etikerlas como blogs recomendados o también pueden hacer con búsquedas . eso depende de cada uno de ustedes :) espero que le sea útil este menú de navegación para blogger.  a proposito disculpen la falta de ortografia en etiquetas por etiketas , es solo un estilo mio:) nos vemos pronto