Cara Membuat Mega Menu Dropdown + Thumbnail

Cara Membuat Mega Menu Dropdown + Thumbnail - Mega Menu Dropdown adalah salah satu Menu Navigasi untuk blogger agar mempermudah para pengunjung untuk mencari informasi yang dicari dan diinginkan.

Ada banyak sekali Menu Navigasi, baik berupa dropdown atau turunan, ada juga yang horizontaol+thumbnaillnya.

Baca juga : Cara Buat Mega Menu + Thumbnail Horizontal

Telah admin jelaskan, selain mempermudah para pengunjung untuk mencari informasinya, mega menu dropdown juga berfungsi untuk menaruh label/category, jadii fungsi utamanya agalah mempermudah pengunjung mencari informasi.

Mega Menu Dropdown juga jika dipasang di sebuah blog, maka blog sobat akan terlihat lebih professional dan menarik, jadii akan menarik para pengunjung.

Admin membagikan mega menu dropdown ini bukan untuk memberatkan blog, melainkan membuat blog menjadi semakin professional, dan sama sekali tidak memberatkan blog.

Untuk mempersingkat waktu, mari simak saja tutorialnya.

1. Login Ke Blogger Menggunakan Email sobat
2. Lihat Tab Tema > Edit html
Lalu...
Masukkan Script CSS dibawah ini tepat diatas Kode ]]></b:skin>

/*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:linear-gradient(-45deg, #23A6D5, #23D5AB);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:linear-gradient(-45deg, #23A6D5, #23D5AB)}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/AVvXsEiYvYmDLji3UHfM0Ld_LiABZ4QfHL0s4cntuZvCz6sGAYeGa4bLQPRqmXcYmbcSUQjVOdym6NdbyhYIpF0r-CThxayZT4OiuS7OYSSm9kxM_MZzjA5ceWma_sjGhKt00lptWbl35AxNVzVE/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/AVvXsEhjXLzVql0PzuXapgr_yBrH6k8N3ouCV-tU2a24qpr89hvq_m5FYYSPO5dHMP5JDsui9HokKX3kg_mSccKGQ_RNfA1AStawPFDQzVwelWtr9FnN26u-VEw1OLA1EZOaIIkxxrAfbbGd0boN/s1600/Info.png) no-repeat;background-position:10px;border-radius:5px;text-transform:lowercase}

Masukkan Jquery 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>");}
       //]]>a
</script>

Dan Terakhir Masukkan Widget Mega Menu HTML ini dibagian yang ingin anda tampilkan. Atau letakkan Dibawah Header Blog Anda

<ul class='admenus' id='adajaxmenu'>
    <li><a href='/'><i class='fa fa-home fa-lg'/></a></li>    
<li>
<a href='#'>Webtools</a>
<ul>
<li><a href='/search/label/Teknologi'>TEKNOLOGI</a></li>
<li><a href='/search/label/CMD'>CMD</a></li>
  <li><a href='/search/label/Freeware'>FREEWARE</a></li>
<li><a href='/search/label/Tools'>Tools</a></li>
<li><a href='/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>

Simpan Tema Dan lihat Hasilnya!
Mungkin sekian saja tutorialnya, sampai bertemu di Tutorial Menarik lainnya, Semoga bermanfaat buat sobat semua.
Salam Blogger+_+