EDITBLOGTEMA

Let dancing with:

CARA MEMBUAT NAVIGASI MEGA MENU BLOGGER

AvatarOleh:
megamenu
gambar megamenu
Saran: terapkan ke template bawaan blogger simple atau awsome yang sudah di modifikasi menjadi responsive dan mobile friendly. Walaupun bisa diterapkan tanpa di modifikasi namun tampilannya di hape tidak mobile friendly nantinya kami akan menyediakan template template bawaan yang sudah di modifikasi secara gratis namun minus navigasi menu demi untuk pembelajaran.

Mega menu ini dapat diterapkan dengan mudah ke dalam template template default/bawaan blogger seperti Tema awsome, perjalanan dan sederhana. Akan tetapi dengan catatan ia hanya bekerja apabila blog bersifat terbuka secara umum basis kerjanya adalah JQuery library dan Json feed API, ia hanya akan bekerja layaknya menu navigasi drop down biasa jika JavaScript di non aktifkan.

Langkah pertama: buat HTML


1. Pengaturan>Theme/Template

2. Pilih EditHTML

3. Tekan ctrl+f>pada kotak pencarian ketikan: <div class='main-outer'>

4. Masukka kode berikut ini diatas kode diatas <div class='main-outer'>


<ul class='megamenu' id='megamenuid'>

<li><a href='/'>Home</a></li> 

<li><a class='menu-target' href='#'>MEGA MENU</a>
<ul>
<li><a href='http://ganti link/url.com'>blogger</a></li>
<li><a href='http://ganti link/url.com'>widget</a></li>
<li><a href='https://www.editblogtema.net/2018/10/cara-membuat-featured-post-slider-di.html'>trik</a></li>
</ul>
</li>
<li class='search-box'>
<form action='/search' class='search-here' method='get'>
<input class='search-field' name='q' placeholder='Search Here' size='0' type='text'/>
<input class='search-button' type='submit' value=' '/>
</form>
<p class='search-alert'>Search form is empty!</p>
</li>
</ul>
<div class='clear'/>
<div class='clear'/>


Ganti kode yang disorot dengan warna kuning dengan alamat url yang akan menampilkan mega menu anda. Ingat URL yang dapat menampilkan image/gambar hanya ada beberapa jenis yang dapat di terima oleh aturan menu AJAX contoh strukturnya seperti dibawah ini:

Label URL: https://blogspotanda.com/search/label/LABELNAME

Search Query: https://blogspotanda.com/search?q=SEARCHQUERY

Label w/search query: https://blogspotanda.com/search/label/LABELAME?q=SEARCHQUERY

Atau copy-paste link label blog anda jika anda telah memasang widget "label" klik itu dan ia akan membawa anda ke link label tersebut. Misalnya kepada semua postingan berlabel "wisata".

Langkah ke dua: masukan kode JAVASCRIPT


Masukan kode dibawah ini ke dalam tag kode </head> biasanya orang meletakannya diatas kode </head>:

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

<script type='text/javascript'>

//<![CDATA[

(function(e){var t=function(e,t){this.elem=e;this.settings=t;this.megaMenuHtml();this.ajaxcall=null;this.menulist=this.elem.find(".leftmenulist 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.menulist.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.postsNumber};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":"loading-icon"}).appendTo(this.li.closest("li"))},hideLoader:function(){this.li.closest("li").find("span.loading-icon").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\//,"/s200-c/"):n.settings.noThumbnail;r.push('<li><span class="thumb-container"><a title="',i,'" href="',s,'"><img alt="',i,'" src="',o,'"/><br />',i,"</a></span></li>")}):r.push("<h5>","No posts available.","</h5>");this.container.html(r.join(""));this.menulist.removeData("menuloaded");this.li.data("menuloaded","true")},showError:function(e){if(e.statusText==="error"){this.hideLoader();this.addArrow();this.container.html("<h5>Oops... Could not fetch the blog posts.</h5>")}},addArrow:function(){this.menulist.closest("li").find("span").remove();this.menulist.removeClass("hover-menu");this.li.addClass("hover-menu");e("<span></span>",{"class":"menu-icon"}).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("hover-menu");var r=e(this).find("ul.leftmenulist li").height()*e(this).find("ul.leftmenulist li").length;t.find("ul.rightmenulist").css({"min-height":r+"px"});n.requestFirstAjax(t)},function(){e(this).find("a:first").removeClass("hover-menu")})},megaMenuHtml:function(){this.elem.find("ul ul").remove();this.elem.addClass("megamenuid").find(">li").find("ul:first").addClass("leftmenulist").wrap(e("<div></div>",{"class":this.settings.divClass}));e("ul.leftmenulist").after(e("<ul></ul>",{"class":"rightmenulist"}))},requestFirstAjax:function(e){e=e.find(".leftmenulist li:first-child a");this.url=e.attr("href");this.container=e.closest("ul").siblings("ul");this.li=e;this.hoverOver()}};e.fn.megaBloggerMenu=function(n){var r={postsNumber:4,divClass:"megasubmenu",postsClass:"rightmenulist",noThumbnail:"/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($) {
$(&#39;#megamenuid&#39;).megaBloggerMenu({
postsNumber : 4, 

noThumbnail : &#39;https://4.bp.blogspot.com/-2FkUSG2DLkU/W7OExbR_-EI/AAAAAAAAghQ/J8o4YALCiNgS3KFyM2dOPm0vrQd4pAB1ACLcBGAs/s1600/images%2B%25283%2529%2B%25281%2529.jpeg&#39;
});
});
$(function(){
$(&#39;.search-here&#39;).submit(function(e){
if($(&#39;.search-box .search-field&#39;).val().length==0){
$(&#39;.search-box .search-alert&#39;).fadeIn().css(&#39;display&#39;,&#39;inline-block&#39;);
e.preventDefault();
}
});
});
</script>

Kode yang di sorot kuning dapat anda edit:

PostNumber : 4 dapat anda ganti angkanya, jika blog sudah memiliki plug in jQuery baris ini bisa dibuang atau di abaikan saja.

Sedangkan link image masih memakai link Editblogtema, link di awali dengan &#39; dan harus ditutup dengan &#39; juga.

Langkah ke tiga: Tambahkan CSS


Caranya sama saja dengan kedua langkah diatas:

1. Pengaturan>Theme/Template

2. Pilih EditHTML

3. Tekan ctrl+f>pada kotak pencarian ketikan: ]]></b:skin>

4. Masukka kode berikut ini diatas kode diatas ]]></b:skin>

.megamenu *{margin:0;padding:0;font-family:'PT Sans Narrow'}ul.megamenu{list-style:none;line-height:1;overflow:visible !important}ul.megamenu:after{margin:0;padding:0;content:' ';display:block;height:0px;clear:both}ul.megamenu li{float:left;display:inline;position:relative;text-transform:uppercase}ul.megamenu li a.menu-target:after{content:"";width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:3px solid #fff;font-size:0;line-height:0;bottom:22px;right:5px;position:absolute}ul.megamenu li a{display:block;line-height:50px;padding:0px 20px;text-decoration:none;border-left:1px solid #000;box-shadow:1px 0 0 0 rgba(255, 255, 255, 0.1) inset;color:#d9d9d9;font-size:14px;transition:all 0.3s ease-in-out}ul.megamenu li a:hover{background:#111111;color:#fff}ul.megamenu ul{position:absolute;display:none;top:100%}ul.megamenu li:hover > ul{display:block}ul.megamenu ul li{z-index:72;min-width:149px;float:none;background:#000;text-shadow:none}ul.megamenu ul li a{text-transform:none;font-weight:normal}ul.megamenu ul li a:hover,ul.megamenuid ul li a.hover{background:#E0E0E0;color:#444}ul.megamenu ul ul{display:none;left:100%;top:0}ul.megamenuid li div.megasubmenu{background:#F9F9F9;position:absolute;width:830px;z-index:90;left:0;top:100%;overflow:hidden;min-height:150px;-moz-transform:translate(0,30px);-webkit-transform:translate(0,30px);-o-transform:translate(0,30px);transform:translate(0,30px);transform-origin:50% 0;visibility:hidden;opacity:0;color:#888;box-shadow:0 10px 7px -7px rgba(0,0,0,0.1);transition:all 0.3s ease-in-out}ul.megamenuid li:hover div.megasubmenu{visibility:visible;opacity:1;-moz-transform:translate(0,0);-webkit-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}ul.megamenuid ul,ul.megamenuid ul li{display:block !important;border:0 none !important;margin:0 !important;padding:0 !important}ul.megamenuid ul li{background:none !important;float:left !important}ul.megamenuid ul.leftmenulist{position:absolute;width:18%;left:0;top:0;bottom:0;background:#EEEEEE;border-right:1px dashed #e5e5e5 !important}ul.megamenuid ul.leftmenulist a{border-left:none !important;color:#555}ul.megamenuid ul.rightmenulist{position:relative;display:block;width:81%;float:right;margin:0px 0px 0px !important;background:none}ul.megamenuid ul.rightmenulist li{display:block;overflow:hidden;position:relative;min-height:210px;padding:5px 17px 5px 0px !important}ul.megamenuid ul.rightmenulist li .thumb-container{left:0;width:100%;height:100%;position:absolute;overflow:hidden;font-size:0;line-height:0}ul.megamenuid ul.rightmenulist li .thumb-container img{position:relative;top:10px;padding:0;width:100%;height:100%;display:block}ul.megamenuid ul.rightmenulist li a{display:block;border-left:none !important;padding:0px 5px !important;line-height:1.4;color:#777;font-weight:bold;font-size:14px}ul.megamenuid ul.rightmenulist li a:hover{color:#000;background:transparent}ul.megamenuid .loading-icon{background:url('http://2.bp.blogspot.com/-N9HNU11nhiA/Va-NLcGF0lI/AAAAAAAALW4/HzSlCK7PGeY/s1600/wait.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position:absolute;top:50%;margin-top:-11px;right:5px}ul.megamenuid .menu-icon{border-bottom:4px solid transparent;border-top:4px solid transparent;border-left:4px solid #777;display:block;height:0;margin-top:-4px;position:absolute;right:11px;top:50%;width:0}#megamenuid{background:rgba(0, 0, 0, 0) -moz-linear-gradient(center top , #3d3d3d, #212121) repeat scroll 0 0;background:-webkit-linear-gradient(top,#3d3d3d,#212121);background-color:#3d3d3d;box-shadow:1px 1px 0 0 rgba(255, 255, 255, 0.1) inset;height:50px;width:100%;position:relative;max-width:1000px;margin:0 auto;padding:0px}#megamenuid h5{font-size:16px;margin-top:70px;text-align:center}#megamenuid h5:before{content:"";position:absolute;top:50px;left:50%;width:5px;height:2px;margin-left:-4px;border-left:2px solid black;border-right:2px solid black}#megamenuid h5:after{content:"";position:absolute;top:55px;left:50%;width:10px;height:5px;margin-left:-7px;border-top:2px solid black;border-left:2px solid black;border-right:2px solid black;border-radius:8px 8px 0px 0px}li.search-box{float:right !important;line-height:35px;margin:7px 10px 0 0}li.search-box .search-field{border:none;padding:3px;background:#3F3F3F;color:#fff;width:135px;font-size:13px}li.search-box .search-field:focus{border:none;outline:none;background:#4C4C4C;color:#fff}li.search-box .search-button{background:url('http://4.bp.blogspot.com/-VJqk_zzkAuw/VazlDH_goDI/AAAAAAAALVM/t-AjU3ix55k/s1600/search.png') no-repeat;border:none;cursor:pointer;padding:5px 10px;transition:all 0.3s ease-in-out}li.search-box .search-button:hover{opacity:0.9}.search-alert{background:#E84C3D url(http://3.bp.blogspot.com/-TQMok5egm8c/Va44AXnjg3I/AAAAAAAALV8/eq_8ICAlH2I/s1600/search-info.png) no-repeat;background-position:5px;text-transform:capitalize;color:#fff;margin:-5px;padding:0px 15px 0px 40px;display:none;border-radius:5px}

Begitu cara membuat Navigasi blog dengan MEGA MENU lihat demo (demo tidak ditampilkan untuk hape karena megamenu diperuntukan untuk layar yang lebih besar)
Demo bisa diperbaiki untuk layar mobile/hape pada kesempatan berikutnya. Ini hanya untuk pembelajaran.
CARA MEMBUAT NAVIGASI MEGA MENU BLOGGER

12 komentar

  1. Keren 👍
    Semuanya dijabarkan secara detil kode-kodenya.
    Sangat informatif

    BalasHapus
  2. Kalau dipasang kode ini pasti jadi gede bener menu blognya dan orang jadi mudah banget untuk menavigasinya,..ea 😀,sip mantap mas

    BalasHapus
    Balasan
    1. itu tidak gede, itu hanya muncul kalau kursor mouse ditaroh pada menu "megamenu" begitu kursor dilepas navigasi mormal kembali. Navigasi model ini diterapkan pada template sorapink

      Hapus
    2. Mantap mas 😀

      Hapus
  3. Saya masih awam tentang modifikasi kode HTML dan template, ngertinya cuma kode standar blogger/blogspot hehe.. Tapi melihat sekilas, sepertinya yang mas buat memiliki kelebihan yaitu blog akan terlihat lebih informatif, desain yang lebih ringan tapi kekinian, mungkin saja loading-nya lebih cepat. Thx ilmunya

    BalasHapus
    Balasan
    1. Terimakasih, mas. Tapi kode kode yang saya tampilkan tidak mutakhir, misalnya:

      Tidak responsive dan mobile, perlu perbaikan, kode kode itu sudah tua. Tapi saya sudah membuat yang lebih responsive, mobile dan ikut up to date program.

      Hapus
  4. Lebih mudah ya navigasi per menu nya.
    Gak perlu di klik, udah muncul.

    Bagus sih, tapi masih takut nyobanya hahahaha.
    Mungkin kalau ada waktu luang deh dipraktekin setelah di save dulu template sekarang :)

    BalasHapus
  5. kalau di tampilan blog yang baru, saya cari main-outer kok gak ada ya ? apa kalau di blogspot yang baru namanya ganti ?

    BalasHapus
    Balasan
    1. ya yang ini buat template lama namun yang kak Minami request sebenarnya adalah navbar fixed kalau gak
      kami telah memposting caranya di:

      https://www.editblogtema.net/2019/12/cara-membuat-navbar-dengan-menu.html

      Hapus
    2. makasih infonya....iya saya maunya buat navbar yang ada di postingan https://www.editblogtema.net/2019/04/rahasia-mudah-membuat-menu-navigasi.html, tapi kalau di postingan itu kan gak dropdown, makanya saya coba cari tutorialnya untuk bisa buat menu navbar yang fixed tapi juga bisa dropdown . di web ini ada gak tutorial seperti itu ?

      Hapus
    3. Kami sudah memposting 3 postingan salah satunya aku sendiri yang tulisnya sisanya Sofyan Yaan

      Cara membuat navigasi menu dengan dropdown plus tombol pencarian ikuti link:

      https://www.editblogtema.net/2019/11/cara-membuat-navigasi-menu-blogger-yang.html

      Hapus

Tinggalkan komentar:

kembali ke atas