Cara Membuat Mega Menu Dropdown Keren di Blogger

Cara Mudah membuat Mega Menu Drop down di blogger - Mega Menu Dropdown adalah salah satu menu navigation untuk blogger,yang dimana menu ini beda dari menu biasa nya yang sering di pakai oleh para blogger di template mereka

Yang dimana Menu Mega Drop down ini menampilkan berbagi link label kategori beserta dengan gambar nya atau Thumbnail nya,sehingga kelihatan menarik,Menu Mega Drop down ini biasanya di pakai oleh Website-Website berbayar yang dimana website tersebut membagikan aplikasi dan sebagainya

Namun disini saya akan berbagi trik bagaimana cara membuat Menu Mega Drop down tersebut di template blogger,agar blog yang anda miliki semakin terlihat menarik dan juga terlihat professional,dan untuk template-template nya bisa anda unduh di halaman selanjut nya bisa anda cari di blog roomahtips ini

Banyak sekali Menu Navigation yang dapat anda gunakan untuk melengkapi Blog anda,dan disini menyediakan Menu Mega Drop Down untuk anda coba keunikan dari Menu Mega drop down ini apabila anda pasang di blog anda

Cara penyesuaian nya pun sangatlah gampang sekali cukup anda mengganti alamat blog yang sudah ada disana dengan nama blog atau URL yang anda miliki,maka dengan begitu Menu Mega Drop Down ini akan berjalan seperti biasa nya

Cara Pemasangan Menu Navigation Mega Drop Down di blog

Dan apabila anda menyukai Menu Mega Drop Down ini untuk di pasang di blog sobat,sobat bisa mengikuti tutorial pemasangan di bawah ini di antara nya

Seperti biasa silahkana anda login ke blogger dengan menggunakan email dan pasword anda
Setelah anda berada di bagian Dashboard blogger kemudian silahkan anda klik Template yang berada di bagian kiri dashboard blogger
Kemudian silahkan anda klik edit html
Setelah anda berada di bagian Edit Html silahkan anda letakan kode CSS Berikut

/*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/AVvXsEiiq-xtGrPqj2tGkzW3Yo5tCEa_xwoYbOmvK96gboMoK7YWpnggvChphsWXj3leV0J11r1rFnyGCJ__3HXzPVGVza6a7nCzSkzA4R5z0YRUnZay1wuQ1NmD770J1t7EFR6b4dICHbEeUCj_/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/AVvXsEjOqXAUrJ49xePp4v_nxu7GWuPsB9SmY73VHOkoZz7UfJL-Be9CNXF_2eWaRGyZo_yAwuSYh_cWdry-QqwSdkv4bodXr2c87133Vp4yInQtfITTIepdAbbN7zkNeNvO44mz9mG2BVctHEvA/s1600/Info.png) no-repeat;background-position:10px;border-radius:5px;text-transform:lowercase}

Setelah anda meletakan CSS nya,silahkan anda cari kode </head>,untuk memudahkan pencarian nya,silahkan anda tekan tombol Ctrl+F secara bersamaan,kemudian letakan kode berikut sebelum kode tersebut

<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>

Langkah selanjut nya,masih tetap berada di bagian </head>,silahkan anda letakan kode berikut setelah kode </head> tersebut,atau sesuaikan dengan posisi yang anda ingin kan

<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://roomahtips.blogspot.com/search/label/Blogger">Blogger</a></li>
<li><a href="https://roomahtips.blogspot.com/search/label/CSS">CSS</a></li>
<li><a href="https://roomahtips.blogspot.com/search/label/HTML">HTML</a></li>
<li><a href="https://roomahtips.blogspot.com/search/label/Tools">Tools</a></li>
<li><a href="https://roomahtips.blogspot.com/search/label/Widget">Widget</a></li>
</ul>
</li>
<li>
<a href="#">Widgets</a>
<ul>
<li><a href="/search/label/Widget">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'/>

Langkah selanjut nya silahkan anda cari kode </body> pada umum nya kode tersebut berada di bagian akhir dari kode template sobat,setelah ketemu kode tersebut,kemudian silahkan sobat letakan kode berikut sebelum kode </body> tersebut

<script src='https://rawgit.com/RoomahTips/megamenu/master/javascript.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>

Langkah terakhir yaitu Save template dan lihat hasil nya

Untuk menyesuaikan link-link navigasi nya silahkan anda sesuaikan sendiri,semoga artikel Cara Membuat Mega Menu drop down ini membantu sobat blogger dan bisa bemanfaat,salam blogger

ads