Menú estilo ModernUI con Ajax y JQuery para blogger

EsteMenúde navegación para blogger es muy nuevo widget creado por Harish(way2blogging) en la plataforma de Blogger que utiliza JSON feed Blogger API y AJAX. yo lo he mejoradodándoleuna apariencia ModernUI ,este menu sigue siendo un menunormal con capacidad desplegable donde podemos mostrar los postsegúnsea lacategoríao etiqueta pueden ver un ejemplo en esteeste Blog de Pruebas,comohabránobservado al pasar el cursor sobre el MenuCategoríase despliega las etiquetas y las ultimas entradas de cada una mostrando una imagen y el titulo de la entrada.

Instalación
nos 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 Etiquetas
una 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