Instalaciónnos dirigimos a Pantilla EdiciónHTML una vez dentro ,CTRL-F y buscamos /b:skin antes de esta linea peque lo siguiente .
.modern *{margin: 0;padding: 0;}ul.modern {list-style: none;line-height: 1;}ul.modern:after{margin: 0;padding: 0;content: ' ';display: block;height: 0px;clear: both;}ul.modern li{ position:relative; float: left; margin: 0 !important; padding: 0 !important;}ul.modern li a{/*estilo del texto menu y items*/ text-decoration:none; margin: 5px; padding: 12px 18px !important; color: #fefcff !important; font:20px Georgia; display: block !important; border: 0 none !important; background: #2d85f2; }ul.modern li a:hover{background: #c638ef !important;}/*hover menus*/ul.modern ul{ position: absolute; display: none; top: 100%; border:1px solid #ccc;}ul.modern ul li{ float: none; min-width: 160px; background:#f03d46; text-shadow: none; }ul.modern ul li a{padding: 12px 14px;font-weight: normal;}ul.modern ul li a:hover{/*hover items*/ background: #c638ef !important; }ul.modern ul ul{display: none;left: 100%;top: 0;}/* MENU TIPO AJAX */ul.menumodern li div.submenu {/*estilo contenedor de los post*/display: none;position: absolute;width: 600px;z-index: 90;left: -1px;top: 100%;overflow: hidden;min-height: 150px;background: #f2f2f2;border:1px solid #cccccc;border-top: 0 none;}ul.menumodern li:hover div.submenu {display: block;background: #e3e2e2;box-shadow: 0px 0px 2px #000;}ul.menumodern ul ,ul.menumodern ul li{display: block !important;border: 0 none !important;margin: 0 !important;padding:0 !important;}ul.menumodern ul li{ background: none !important; float: none !important;}ul.menumodern ul.verticlemenu{/*estilo contenedor de las categorias o items*/ position: absolute; width: 33%; left:0; top:0; bottom: 0; background: #f2f2f2; }ul.menumodern ul.postslist { position: relative; display: block; width:65%; float: right;margin: 8px 0 !important; background: none; }ul.menumodern ul.postslist li{display: block;overflow: hidden;border-bottom: 1px #eee solid;position: relative;min-height: 60px;padding: 8px 8px 8px 110px !important;}ul.menumodern ul.postslist li:last-child{border-bottom: none 0;}ul.menumodern 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;box-shadow: 0px 0px 2px #000;}ul.menumodern ul.postslist li .imgCont img{ position: relative; top:-20px; padding: 0; width: 100px; height: 100px; }ul.menumodern ul.postslist li a{ font:17px Georgia; display: block; line-height: 1.4; padding: 0 !important; background: #6907b5; text-align:left; }ul.menumodern ul.postslist li a:after{ content:""; position:absolute; top:13px; left:106px; width:0; border-top:10px solid #6907b5; border-left:10px solid transparent; }ul.menumodern ul.postslist li a:hover:after{ content:""; position:absolute; top:13px; left:106px; width:0; border-top:10px solid #c638ef; border-left:10px solid transparent; }ul.menumodern .loader{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcHET74QitnQeklrtVGD03E4GbA-EMtayWtUkwZ0rsUKdSg4Md-BOn6q9aE7sGoK19SlCjVOY4XmLdAEqtiBhrgRjzFi_HhU4A_xlwf1_iQN_Wlh7C80pwtHYpX5HuyQlXX-6Azg5KFD8/s16/ajax-loader.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position: absolute;top:50%;margin-top: -11px;right:5px;}ul.menumodern .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;}#menumodern {overflow:visible; display:inline-block; position: fixed;top: -2%;left:0%;width: 100%;background: #1d70f8;box-shadow: 0px 0px 2px #000;}este es el estilo del menu si los colores no son de su agrado hay partes comentadas donde podrá cambiar cada parte del menu.ahora busque la siguiente etiqueta
/head y antes de esta pegue el siguiente script(no olvide tener instalado el JQuery para que pueda funcionar el menu sin problemas).
script type="text/javascript"//![CDATA[(function(e){var t=function(e,t){this.elem=e;this.settings=t;this.addAjaxHtml();this.ajaxcall=null;this.lielem=this.elem.find(".verticlemenu li a");this.menuHelper(this.elem);this.addEvents()};t.prototype={regex:{islabel:new RegExp("/search/label/","g"),issearch:new RegExp("[?&]q=","g"),labelsearch:new RegExp("(http://[^/]+)/search/label/([^/?&]+).*[?&]q=([^$&]+)(?:[^$]+)?","g"),label:new RegExp("(http://[^/]+)/search/label/([^/?&$]+)","g"),search:new RegExp("(http://[^/]+)/search/?[?&]q=(.*)","g")},addEvents:function(){var t=this;this.lielem.hover(function(){if(e(this).data("menuloaded")!=="true"){t.li=e(this);t.url=t.li.attr("href");t.container=t.li.closest("ul").siblings("ul");t.hoverOver()}},function(){t.hoverOut()})},hoverOver:function(){var t=this;this.getAJAXUrl();if(!this.ajaxUrl)return;this.ajaxcall=e.ajax({type:"GET",url:t.ajaxUrl,dataType:"jsonp",data:t.ajaxData,beforeSend:function(){t.showLoader()},success:function(e){t.hideLoader();t.addArrow();t.showPosts(e)},error:function(e){t.showError(e)}})},hoverOut:function(){this.ajaxcall.abort();this.hideLoader()},getAJAXUrl:function(){if(this.url){var e=this;this.ajaxData={alt:"json","max-results":this.settings.numPosts};this.url.search(this.regex.islabel)!==-1&&this.url.search(this.regex.issearch)!==-1?this.ajaxUrl=this.url.replace(this.regex.labelsearch,function(t,n,r,i){e.ajaxData.q=i;return[n,"/feeds/posts/default/-/",r,"/"].join("")}):this.url.search(this.regex.islabel)!==-1&&this.url.search(this.regex.issearch)===-1?this.ajaxUrl=this.url.replace(this.regex.label,function(t,n,r){delete e.ajaxData.q;return[n,"/feeds/posts/default/-/",r,"/"].join("")}):this.url.search(this.regex.islabel)===-1&&this.url.search(this.regex.issearch)!==-1?this.ajaxUrl=this.url.replace(this.regex.search,function(t,n,r){e.ajaxData.q=r;return[n,"/feeds/posts/default"].join("")}):this.ajaxUrl=!1}else this.ajaxUrl=!1},showLoader:function(){e("span/span",{"class":"loader"}).appendTo(this.li.closest("li"))},hideLoader:function(){this.li.closest("li").find("span.loader").remove()},showPosts:function(t){var n=this,r=[],i,s,o;t.feed.openSearch$totalResults.$t0?e.each(t.feed.entry,function(t,u){i=u.title.$t;e.each(u.link,function(e,t){t.rel==="alternate"?s=t.href:s="#"});o=u.media$thumbnail?u.media$thumbnail.url.replace(//s72-c//,"/s100-c/"):n.settings.defaultImg;r.push('lispan class="imgCont"img alt="',i,'" src="',o,'"//spana rel="nofollow" title="',i,'" href="',s,'"',i,"/a/li")}):r.push("h5","Sorry!!,No hay post que cargar","/h5");this.container.html(r.join(""));this.lielem.removeData("menuloaded");this.li.data("menuloaded","true")},showError:function(e){if(e.statusText==="error"){this.hideLoader();this.addArrow();this.container.html("h5Error!! No se pudo obtener las publicaciones de blog!/h5")}},addArrow:function(){this.lielem.closest("li").find("span").remove();this.lielem.removeClass("hoverover");this.li.addClass("hoverover");e("span/span",{"class":"menuArrow"}).appendTo(this.li.closest("li"))},menuHelper:function(t){var n=this;t.find("li").hover(function(){var t=e(this);t.find("a:first").addClass("hoverover");var r=e(this).find("ul.verticlemenu li").height()*e(this).find("ul.verticlemenu li").length;t.find("ul.postslist").css({"min-height":r+"px"});n.requestFirstAjax(t)},function(){e(this).find("a:first").removeClass("hoverover")})},addAjaxHtml:function(){this.elem.find("ul ul").remove();this.elem.addClass("menumodern").find("li").find("ul:first").addClass("verticlemenu").wrap(e("div/div",{"class":this.settings.divClass}));e("ul.verticlemenu").after(e("ul/ul",{"class":"postslist"}))},requestFirstAjax:function(e){e=e.find(".verticlemenu li:first-child a");this.url=e.attr("href");this.container=e.closest("ul").siblings("ul");this.li=e;this.hoverOver()}};e.fn.ajaxBloggerMenu=function(n){var r={numPosts:4,divClass:"submenu",postsClass:"postslist",defaultImg:"/default.png"},i=e.extend({},r,n);return this.each(function(){var n=new t(e(this),i)})}})(jQuery);///scriptscript type="text/javascript"jQuery(document).ready(function($) { jQuery.noConflict(); jQuery('#menumodern').ajaxBloggerMenu({ numPosts : 6, // numeros de post o entradas a mostrar defaultImg : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsXRLIOIgXYUX4OLzapD9jTcOdv-3BSOIZgk0UzqUxhZTTr30km_bW3d5L0NHu0UAXMd6lyiiLRkrIWzHzOu_K3HoDmB7Ex_-pSq2vWs7f815qTyrAsVSjTH4be7xsBLKZaOaPslP_4Ss/s90/no-avatar.png' // //imagen por defecto });});/scriptSi llegara a teneralgúnproblema con elmenúque no despliega su contenido elimine elcódigojQuery.noConflict(); y reemplaze el jQuery por la variable $
Construcciónde losMenúsy las Etiquetasuna vez ya instalado el estilo(Css) y los script, procedemos a crear el menu para ello busque la etiqueta
/body , recuerde realizar la busqueda con CTRL-F.despuésde esta etiqueta peque el siguientecódigo.
ul id="menumodern" class="modern" li a expr:href='data:blog.homepageUrl' title='Inicio'Inicio/a /li li a href="#"Categorias/a ul lia href="http://www.javaface-elblogdelprogramador.com/search/label/JAVA"Java/a/li lia href="http://www.javaface-elblogdelprogramador.com/search/label/Programas"Programas/a/li lia href="http://www.javaface-elblogdelprogramador.com/search/label/Tutoriales"Tutoriales/a/li lia href="http://www.javaface-elblogdelprogramador.com/search/label/Blogger"Blogger/a/li /ul /li /ul
comopodráobservar en losvínculosde laseccióncategoríacolocamos ladirecciónde la etiqueta ocategoríaque desee mostrar en elmenú¿Como obtenemos estasdirecciónes?. solo basta que tenga instalado en su blogg el gadget etiquetas y dar clic a una de ellas en la parte superior del navegadorapareceráladirecciónque necesitamos.Si se desea colocar masmenússolo deben de añadir el siguientecódigo.
lia href='#' title='Contactame'Contactos/a/li
Ahora si desea colocar mas secciones que muestren entradas solo debe de hacer lo siguiente
lia href="#"Programacion/aullia href="http://www.javaface-elblogdelprogramador.com/search/label/JAVA"Java/a/lilia href="http://www.javaface-elblogdelprogramador.com/search/label/C#"C#/a/li/ul/li
