Mega Menu Bar Drop Down For Blogger

Ajax Mega Menu Bar Drop Down For Blogger

Mas Tamvan berbagi ajax menubar atau navigation mega drop down untuk blogger, mega menu drop down ini biasanya digunakan oleh website - website premium yang menyediakan berbagai macam barag elektronk atau tempat download game android, namun di blog mas tamvan ini saya bagikan secara geratis free jequery for menu mega drop down. Di menu ini kita bisa menampilkan beberapa label beserta isi dari label tersebut yang di sertai dengan gambar yang akan membuat blog kita tampil elegan dan pengunjung juga akan tertarik karena sebagian besar orang lebih suka melihat gambar ketimbang membacanya termasuk saya yang lebih suka melihat gambar.

Result

Tutorial Blogger Lainnya :

• Widget Recent Post Dengan Navigation

• Memasang Syntax Highlighter Pre Code Di Blogger

• Sitemap Blogger Responsive Seo Friendly

Tutorial Membuat Mega Menu Bar Drop Down For Blogger

Untuk tutorialnya, silahkan simak di bawah ini. Ikuti dengan benar dan tepat + jangan ada yang terlewatkan Okeh.

• Login ke Blogger.com

• Pilih Template -> Edit HTML, Cari Kode

• ]]></b:skin> Atau </style>

• Setelah ketemu, masukan CSS di bawah ini tepat di salah satu kode di atas!!

/*Mega Menu Bar*/
.admenus *{margin:0;padding:0}ul.admenus{list-style:none;line-height:1;overflow:visible!important}ul.admenus:after{margin:0;padding:0;content:' ';display:block;height:0;clear:both}ul.admenus li{float:left;display:inline;position:relative;font-size:14px;font-weight:400;text-transform:uppercase}ul.admenus li a{display:block;line-height:50px;padding:0 20px;text-decoration:none;color:#2c2c2c;font-family:'Oswald';font-size:13px;font-weight:400;transition:all .3s ease-in-out}ul.admenus li a:hover,ul.admenus li a.hoverover{background:#f54325;color:#fff}ul.admenus ul{position:absolute;display:none;top:100%;border:1px solid #ccc}ul.admenus li:hover > ul{display:block}ul.admenus ul li{z-index:72;float:none;min-width:160px;background:#f5f5f5;text-shadow:none}ul.admenus ul li a{text-transform:none;font-weight:400;color:#aaa;font-family:'Arial'}ul.admenus ul li a:hover,ul.adajaxmenu ul li a.hover{background:#f54325}ul.admenus ul ul{display:none;left:100%;top:0}ul.adajaxmenu li div.submenu{position:absolute;width:600px;z-index:90;left:0;top:100%;overflow:hidden;min-height:150px;background:#f0f0f0;-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:#929292;box-shadow:0 10px 7px -7px rgba(0,0,0,0.1);transition:all .3s ease-in-out}ul.adajaxmenu li:hover div.submenu{visibility:visible;opacity:1;-moz-transform:translate(0,0);-webkit-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}ul.adajaxmenu ul,ul.adajaxmenu ul li{display:block!important;border:0 none!important;margin:0!important;padding:0!important}ul.adajaxmenu ul li{background:none!important;float:none!important}ul.adajaxmenu ul.verticlemenu{position:absolute;width:33%;left:0;top:0;bottom:0;background:#202020}ul.adajaxmenu ul.postslist{position:relative;display:block;width:65%;float:right;margin:0 0 15px!important;background:none}ul.adajaxmenu ul.postslist li{display:block;overflow:hidden;position:relative;min-height:60px;padding:15px 8px 15px 110px !important}ul.adajaxmenu ul.postslist li .imgCont{position:absolute;left:0;top:15px;width:100px;height:70px;overflow:hidden;font-size:0;line-height:0;border:1px solid #929292}ul.adajaxmenu ul.postslist li .imgCont img{position:relative;top:-20px;padding:0;width:100px;height:100px;display:block}ul.adajaxmenu ul.postslist li a{display:block;line-height:1.4;padding:0!important;color:#666;font-family:'Arial';font-size:12px;transition:all .3s ease-in-out}ul.adajaxmenu ul.postslist li a:hover{color:#f54325;background:transparent}ul.adajaxmenu .loader{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX_heGr_X4QzdchPJLt-flvhrHSr_qt5bL-IbFs8U0WIZcjlzAb76U1VDE3VW09Vsz2MSqlumdu-8TvIlKti17m115yWP7THkBUfl-iUKezSEKsswVmHyMjINbzXI8cuj_bgVLVdwL7t0K/s1600/loading+%25282%2529.gif) no-repeat scroll 0 0 transparent;width:22px;height:22px;position:absolute;top:50%;margin-top:-11px;right:5px}ul.adajaxmenu .menuArrow{border-bottom:4px solid transparent;border-top:4px solid transparent;border-left:4px solid #fff;display:block;height:0;margin-top:-4px;position:absolute;right:11px;top:50%;width:0}#adajaxmenu{background:#fff;height:50px;width:100%;position:relative;border:1px solid #e6e6e6;max-width:1100px;margin:0 auto;padding:0}li.search-form{float:right!important;line-height:50px;margin:0 20px 0 0}li.search-form .searchbar{border:none;padding:10px 5px;background:#f9f9f9;color:#fff;width:130px}li.search-form .searchbar:focus{border:none;outline:none;background:#fafafa;color:#666}li.search-form .searchsubmit{background:#f54325;border:none;color:#fff;cursor:pointer;padding:10px 5px;transition:all .3s ease-in-out}li.search-form .searchsubmit:hover{opacity:.9}.search-alert{color:#f9f9f9;padding:2px 15px 2px 40px;display:none;margin:5px;background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVHJfQKMO_Zhkq_PJw8egnYOk9F5RBOeU9Y0TlLL73gom3I8M1yifZAQ6VHk9Za4Ofsn6mG7ibXjANAQDi5eMQQ5KxW3MMYIo11exqWS8clY3wAyMlEt7cugXHTGhCt4sr_2nXGqSupQfR/s1600/Info.png) no-repeat;background-position:10px;border-radius:5px;text-transform:lowercase}

• Lanjut, Sekarang Tinggal Memasukan Javascriptnya.

• Cari </body> dan masukan Javascript di bawah ini tepat di atasnya!! 

<script src='https://rawgit.com/mastamvan/backup/master/megamenu.js' type='text/javascript'></script>
<script type='text/javascript'>
jQuery(document).ready(function($) {
 $('#adajaxmenu').ajaxBloggerMenu({
  numPosts : 4, // Number of Posts to show
  defaultImg : 'http://url-to-image.com/default-image.jpeg' // Default thumbnail Image
 });
});

$(function(){
  $('.searchblog').submit(function(e){
    if($('.search-form .searchbar').val().length==0){
       $('.search-form .search-alert').fadeIn().css('display','inline-block');
      e.preventDefault();
    }
  });
});
</script>

• Nah sekarang tinggal memasukan HTML untuk memanggil perintah Javascript di atas, terserah kalian mau di pasang dimana, enah itu di Edit HTMLnya / di Tataletak.

• Tapi di sini mas tamvan akan memberikan tutorial untuk memasangnya di bawah HEAD ya.

• Cari </head> dan masukan HTML di bawah ini tepat di bawahnya!! 

<ul id="adajaxmenu" class="admenus">
    <li><a href='/'><i class='fa fa-home fa-lg'></i></a></li>    
<li>
<a href="#">Webtools</a>
<ul>
<li><a href="https://mastamvan.blogspot.co.id/search/label/Blogger">Blogger</a></li>
<li><a href="https://mastamvan.blogspot.com/search/label/CSS">CSS</a></li>
<li><a href="https://mastamvan.blogspot.com/search/label/HTML">HTML</a></li>
<li><a href="https://mastamvan.blogspot.com/search/label/Tools">Tools</a></li>
<li><a href="https://mastamvan.blogspot.com/search/label/Widget">Widget</a></li>
</ul>
</li>
<li>
<a href="#">Widgets</a>
<ul>
<li><a href="/search/label/Widgets">Widgets</a></li>
<li><a href="/search/label/SEO">SEO</a></li>
<li><a href="/search/label/CSS">CSS</a></li>
</ul>
</li>
<li>
<a href="#">Tutorials</a>
<ul>
<li><a href="/search/label/Tutorials">Tutorials</a></li>
<li><a href="/search/label/Blogger">Blogger</a></li>
<li><a href="/search/label/WordPress<">WordPress</a></li>
<li><a href="/search/label/Earning">Earning</a></li>
<li><a href="/search/label/Domain Finder">Domain Finder</a></li>
</ul>
</li>
<li><a href="/search/label/Password Maker">Password Maker</a></li>
<li><a href="/search/label/">Contact</a></li>
<li><a href="/search/label/">Contact</a></li>
<li class='search-form'>
<form action='/search' class='searchblog' method='get'>
<input class='searchbar' name='q' placeholder='Search Here' size='30' type='text'/>
<input class='searchsubmit' type='submit' value='Search'/>
</form>
  <p class='search-alert'>Search form is empty!</p>
</li>    
</ul>
<div class='clear'/>    
<div class='clear'/>

Silahkan sesuaikan / ganti /search/label/Blogger dan yang lainnya dengan link label kalian.
Kalau Mega Menunya tidak tampil, silahkan tambahkan kode dibawah ini tepat diatas kode </head>

<script type='text/javascript'>
       //<![CDATA[
       if (typeof(jQuery) == 'undefined') {document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js\"></scr" + "ipt>");}
       //]]>
</script>

• Tinggal di save dan done. salam tamvan.

Cukup sekian dan terimakasih tutorial dari mas tamvan tentang cara membuat mega drop down menu di blogger ini , semoga bermanfaat. jika da yang mau di tanyakan silahkan bertanya di kolom komentar. Kalo tidak ada yang mau di tanyakan saya sarankan untuk tetap berikan komentarnya ya :) sopaya saya jadi lebih semangat lagi.