Membuat Mega Sajian Navigation Simple

Cara Membuat Mega Menu Navigation Simple Di blogger

Mega Menu Navigation With Thumbnail

Kali ini mas tamvan akan share lagi mega sajian navigation plus dengan gambar thumbnail yang akan menampilkan postinan blog menurut label dan disertai dengan image / thumbnail yang diambil dari postingan secara otomatis.

Mungkin kalian pernah melihat beberapa blog / website yang menggunakan sajian navigation dan pada sajian dropdownnya di sertai dengan gambar atau bagi kalian yang belum pernah melihatnya, dapat lihat di link demo berikut ini
Demo Tampilan Mega Menu Navigation With Thumbnail

Baca Juga

• Cara Membuat Menu Bar Responsive di Blog Tanpa Edit Html Pure CSS

• Menu Navigation Bar Seperti Blog Arlina Design

• Membuat Menu Bar Drop Down Responsive

Nah bagi kalian yang ingin memasangnya di blog, silahkan ikuti tutorial di blog mas tamvan ini. Tapi jangan lupa untuk membaca tutorial tips dan trik lainnya ya :)

Membuat Mega Menu Navigation Simple Di blog Plus Dengan Gambar Thumbnail

• Login ke Blogger.com

• Masuk ke Menu Template Lalu Klik Edit HTML, Cari Code </head>

• Setelah Ketemu Kalian masukan CSS dibawah ini sempurna di atasnya

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

• Sekarang Kalian Cari Lagi Kode </body> dan Masukan Javascript dibawah ini, sempurna diatasnya.

 <script type='text/javascript'>jQuery(document).ready(function($){$('#ms-tamvan').ajaxBloggerMenu({numPosts:7,defaultImg:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIb2MMohkEUCBwofYRwuEwW-c4LeMLr5k2Fjmh5vW3uBdlCAwRl6Ey1QztDOeRFAPhxOgAcz1Y-JociYnTii12ooallgRXrGTOXxvNLx2D9H5H9mTFLj-kBLYHxIX6VyoBg6iviKxLBB8/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="Cara Membuat Mega Menu Navigation Simple Di blogger Membuat Mega Menu Navigation Simple" src="',o,'" title="Membuat Mega Menu Navigation Simple"/></a></span><a title="Membuat Mega Menu Navigation Simple" 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> 

• Langkah selanjutnya pemasangan HTML untuk menampilkan mega menu akan di simpan dimana.

• sekarang tinggal pemasangan HTMLnya, Terserah kalian mau simpan di mana. Tapi Pada tutorial ini aku kita akan memasangnya di dalam body

• Sekarang, kalian cari arahan <body>. Kalo sudah ketemu, copy dan masukan HTML mega sajian dibawah ini sempurna dibawahnya

 <nav id='mega-menu'>     <ul class='ms-tamvan' id='ms-tamvan'>         <li><a href='http://mastamvan.blogspot.com/p/blog-page.html' target='_blank' title='Template Blog'><i class='fa fa-desktop'></i> Template</a></li>         <li><a href='http://mastamvan.blogspot.co.id/search/label/Widget' target='_blank' title='CSS'><i class='fa fa-code'></i> CSS</a>             <ul class='submenu'>                 <li><a href='http://mastamvan.blogspot.co.id/search/label/Blogger' target='_blank' title='Navigasi'><i class='fa fa-list'></i> Navigasi</a></li>                 <li><a href='http://mastamvan.blogspot.co.id/search/label/Tips%20Dan%20Trik' target='_blank' title='Slider'><i class='fa fa-picture-o'></i> Slideshow</a></li>                 <li><a href='http://mastamvan.blogspot.co.id/search/label/Tools' target='_blank' title='Gallery'><i class='fa fa-th'></i> Gallery</a></li>             </ul>         </li>         <li><a href='http://mastamvan.blogspot.co.id/search/label/Blogger' target='_blank' title='Blogging'><i class='fa fa-laptop'></i> Blogging</a>             <ul class='submenu'>                 <li><a href='http://mastamvan.blogspot.co.id/search/label/Widget' target='_blank' title='Widget Blog'><i class='fa fa-tablet'></i> Widget Blog</a></li>                 <li><a href='http://mastamvan.blogspot.co.id/search/label/Tips%20Dan%20Trik' target='_blank' title='jQuery'><i class='fa fa-code'></i> jQuery</a></li>             </ul>         </li>         <li><a href='http://mastamvan.blogspot.co.id/search/label/Tools' target='_blank' title='SEO'><i class='fa fa-globe'></i> SEO</a></li>         <li><a href='http://mastamvan.blogspot.co.id/p/sitemap.html' target='_blank' title='Follow'><i class='fa fa-sitemap'></i> Sitemap</a></li>         <li><a href='http://www.blogger.com/follow-blog.g?blogID=6222520536924570210' target='_blank' title='Follow'><i class='fa fa-users'></i> Follow</a></li>     </ul> </nav> 

• Kalo Sudah, Kalian Tinggal Save Dan Lihat Hasilnya
#Keterangan
Kalo Icon Di Menu Tidak Tampil, Copy Dan Masukan Css FontAwesome dibawah ini sempurna diatas arahan </head>
<link href='https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
Mega Menu ini memerlukan jquery library Kaprikornus kalo thumbnail mega menunya tidak tampil, kalian masukan arahan dibawah ini sempurna diatas arahan </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js'></script>
dan jangan lupa, ganti url labelnya dengan label blog kalian.

• Semoga bermanfaat, salam tamvan

Cukup sekian dan terimakasih, agar artikel yang aku share wacana Membuat Mega Menu Navigation Dengan Gambar Thumbnail ini bermanfaat.
Kalo ada yang galau / tidak di mengerti silahkan bertanya di kolom komentar :). cara menciptakan mega sajian dengan css, membuat mega sajian di blogger, membuat mega sajian jquery, membuat mega sajian navigation