Menambahkan Fitur Mega Menu Navigation

Pada Tutorial berikut akan membahas tentang Menu Navigation dengan gambar thumbnail yang akan menampilkan postingan pada blog berdasarkan label dan disertai dengan image / thumbnail yang diambil dari postingan secara otomatis.

Sebagian Blog maupun website yang memakai Menu Navigation dan pada menu dropdown di sertai dengan gambar atau bagi anda yang belum pernah melihatnya, bisa mencoba menggunakan menu Navigation di blog yang saya gunakan ini. 

Berikut panduan dari tutorial singkat ini.

1. silahkan buka Blogger > Template > Edit HTML > Kemudian cari kode </head> atau </style> ,
2. selanjutnya copykan kode CSS berikut ini tepat diatasnya⏫.

<style type="text/css">
/*Mega Menu Navigation dengan Thumbnail gambar PiratesCode */
#mega-menu{background:#222 none repeat scroll 0% 0%;width:100%;margin:0 auto;padding:0;border-bottom:5px solid #63C4F1;display:block}
#mega-menu a{text-decoration:none!important}
#mn-megapc{position:relative;width:100%;margin:0 auto;font-size:18px;font-weight:400;text-transform:uppercase}
.mn-megapc *{margin:0;padding:0}
ul.mn-megapc{list-style:none;line-height:1;overflow:visible!important;padding:0}
ul.mn-megapc:after{content:' ';display:block;height:0;clear:both;margin:0;padding:0}
ul.mn-megapc li{border-left:1px solid #000;box-shadow:1px 0 0 #333 inset;list-style:none;position:relative;margin:0 auto!important;padding:0!important;display:inline-block}
ul.mn-megapc li a{color:#fff;display:block!important;line-height:60px;margin:0;padding:0 15px!important}
ul.mn-megapc li a:hover,ul.mn-megapc li a.hoverover{background:#333}
ul.mn-megapc ul{z-index:999;position:absolute;display:none;top:100%;border:1px solid #ccc}
ul.mn-megapc ul li{min-width:160px;box-shadow:none;background:none!important;float:none!important}
ul.mn-megapc ul li a{border-bottom:1px solid #000;box-shadow:0 1px 0 0 #333;padding:12px 14px}
ul.mn-megapc ul li a:hover,ul.mn-megapc ul li a.hoverover{color:#000!important;background:#63C4F1}
ul.mn-megapc ul ul{display:none;left:100%;top:0}
ul.mn-megapc li div.submenu{box-shadow:3px 3px 5px #333;display:none;position:absolute;width:600px;left:-1px;top:100%;overflow:hidden;min-height:150px;background:#f9f9f9;border:none;z-index:999}
ul.mn-megapc ul,ul.mn-megapc ul li{display:block!important;border:none;margin:0!important;padding:0!important}
ul.mn-megapc ul.verticlemenu{position:absolute;width:33%;left:0;top:0;bottom:0;background:#222}
ul.mn-megapc ul.postslist{position:relative;display:block;width:65%;float:right;background:#f9f9f9;margin:8px 0!important}
ul.mn-megapc ul.postslist li{display:block;overflow:hidden;box-shadow:0 1px 0 0 #fff;border-bottom:1px #eee solid;position:relative;min-height:60px;padding:5px 5px 5px 110px!important;margin-right:10px!important}
ul.mn-megapc ul.postslist li:last-child{border-bottom:none;box-shadow:none}
ul.mn-megapc ul.postslist li .imgCont{position:absolute;left:0;top:8px;width:100px;height:50px;overflow:hidden;border:1px solid #eee}
ul.mn-megapc ul.postslist li .imgCont img{position:relative;top:-20px;width:100px;height:100px;display:block;padding:0}
ul.mn-megapc ul.postslist li a{color:#000!important;border:none!important;background:none;display:block;line-height:1.4;box-shadow:none;padding:0!important;text-decoration:none;font-size:15px}
ul.mn-megapc .loader{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilfb_DH9zxJj2_AjC9-aLYcSPGcd8efJILBp-Qdzu91Zs0ef6BC4vnRQnuue3hvtAVUtVqamA4CGRnbJSun9GWqlIvrDpF_eMJuTc68eQDlZ_iE8InYo0wEyTZ4iRdKybgTHxJ4TkExT0/h120/loading.gif) no-repeat scroll 0 0 transparent;width:22px;height:22px;position:absolute;top:50%;margin-top:-11px;right:5px}
ul.mn-megapc .menuArrow{border-bottom:10px solid transparent;border-top:10px solid transparent;border-left:10px solid #000;display:block;height:0;margin-top:-10px;position:absolute;right:11px;top:50%;width:0}
ul.mn-megapc li:hover > ul,ul.mn-megapc li:hover div.submenu{display:block}
</style>

3. Sekarang Cari kode </body> dan Masukan kode Javascript berikut ini, tepat diatasnya⏫.

<script type='text/javascript'>jQuery(document).ready(function($){$('#mn-megapc').ajaxBloggerMenu({numPosts:7,defaultImg:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVAQ-ibVvNdRH6fuvFtiE2FD12wm96ioxJl73FKarek4p1C6JbDGn3kCDw1VCv98RfINIqaPhSMMUKwc0F1-lT9B0PWsq27X5gCV273I9QNzG8I8mi0MtKxnBvtQLqGLfe8XTgQwdbb3Y/w140-h140-p/no-image.png'})});</script>
<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.$t>0?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('<li><span class="imgCont"><a href="',s,'"><img alt="',i,'" src="',o,'" title="',i,'"/></a></span><a title="',i,'" href="',s,'">',i,"</a></li>")}):r.push("<h5>","Sorry!!, No Posts to Show", "</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("<h5>Error!! Could not fetch the Blog Posts!</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("navmenublue").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>

4. Tahap selanjutnya pemasangan HTMLnya. Pada tutorial ini saya akan memasangnya di dalam body

5. Sekarang, anda cari kode <body>. Apabila sudah ketemu, copy dan masukan HTML mega menu berikut ini tepat dibawahnya⏬.

 <nav id='mega-menu'>
    <ul class='mn-megapc' id='mn-megapc'>
<li><a expr:href='data:blog.homepageUrl' title='Home'><i class='fa fa-desktop'/> Home</a></li>

        <li><a href=' ' target='_blank' title='Other Categories'><i class='fa fa-laptop'/> Tutorial</a>
            <ul class='submenu'>
                <li><a href='http://jasabuatsoftware.blogspot.com/search/label/Blogger' target='_blank' title=' Blogger'><i class='fa fa-code'/> Blogger</a></li>
                <li><a href='http://jasabuatsoftware.blogspot.com/search/label/Database' target='_blank' title=' Database'><i class='fa fa-code'/> Database</a></li>
                <li><a href='http://jasabuatsoftware.blogspot.com/search/label/Networking' target='_blank' title=' Network'><i class='fa fa-sitemap'/> Network</a></li>
                <li><a href='http://jasabuatsoftware.blogspot.com/search/label/Techno' target='_blank' title='Techno'><i class='fa fa-tablet'/> Techno</a></li>
                <li><a href='http://jasabuatsoftware.blogspot.com/search/label/Tips%20dan%20Trik' target='_blank' title=' Tips dan Trik'><i class='fa fa-code'/> Tips dan Trik</a></li>
            </ul>
        </li>
        <li><a href='http://jasabuatsoftware.blogspot.com/search/label/Blogger' target='_blank' title='Blogging'><i class='fa fa-laptop'></i> Blogging</a>
            <ul class='submenu'>
                <li><a href='http://jasabuatsoftware.blogspot.com/search/label/Techno' target='_blank' title='Techno'><i class='fa fa-tablet'/> Techno</a></li>
                <li><a href='http://jasabuatsoftware.blogspot.com/search/label/Tips%20dan%20Trik' target='_blank' title=' Tips dan Trik'><i class='fa fa-code'/> Tips dan Trik</a></li>
            </ul>
        </li>
        <li><a href='http://jasabuatsoftware.blogspot.com/p/contact-us.html' target='_blank' title='Contact Us'><i class='fa fa-globe'/> Contact Us</a></li>
        <li><a href='http://jasabuatsoftware.blogspot.com/p/blog-page.html' target='_blank' title='Donate me'><i class='fa fa-sitemap'/> Donate me</a></li>
        <li><a href='http://www.blogger.com/follow-blog.g?blogID=1303242264977236075' target='_blank' title='Follow'><i class='fa fa-users'/> Follow</a></li></i> Follow</a></li>
    </ul>
</nav>
 

Keterangan
Apabila Icon pada Menu Tidak Tampil, Copy Dan Masukan CSS Font Awesome terbaru dibawah ini tepat diatas kode </head>
<link href='http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css' rel='stylesheet'/>
Mega Menu ini memerlukan jquery library Jadi apabila thumbnail Mega Menunya tidak tampil, anda harus masukan kode dibawah ini tepat diatas kode </head>

 <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js' type='text/javascript'/>