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);
//
/script
script 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
});
});
/script
Si 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.
li
a href='#' title='Contactame'Contactos/a
/li
Ahora si desea colocar mas secciones que muestren entradas solo debe de hacer lo siguiente
li
a href="#"Programacion/a
ul
li
a href="http://www.javaface-elblogdelprogramador.com/search/label/JAVA"Java/a/li
li
a href="http://www.javaface-elblogdelprogramador.com/search/label/C#"C#/a/li
/ul
/li
