Cara Membuat Menu Drop Down dengan Gambar/Thumbnail Di Blogger

Menu navigasi keren memang membuat suasana blog makin waw banget apalagi jika blog sobat banyak artikel populernya yang sering dibaca oleh para viewer. Namun jika hanya tulisan menu saja rasanya kayak ada yang kurang. Nah untuk itu saya akan memposting artikel Cara Membuat Menu Drop Down dengan Gambar/Thumbnail Di Blogger yang pastinya bisa membuat pengunjung anda makin betah ada di blog, karena menu navigasi juga berpengatruh juga bagi para pengunjung. Oke sekarang kit ke TKP. Siap 86

Masukanlah kode dibawah ini diatas ]]></b:skin> , jika tidak ada letakan diatas kode </style> anda bisa mencobanya meletakan antara ]]></b:skin> atau </style> yang mana saja yang penting sukses

Ini Kodenya

---------------------------------------------------------------------------

.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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsRDFBY8XzJdGz1Fw6668Z16qO4CMXPxAmpNSN9nJ14NYlTCUNCh9ueoWrTH6DgW-8UNn8X_t9E9bSyYGy8pcaKLsX8Lf6Ns80rChjaX5ghYgBhfRVpPxVWkcVWUUCxEmRPLuWt0qP__c/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6m3L4sy5bUUsZYbgPgDB3mIi-8KckA_KrjRuCDcZQa19TZrd2MVMY2lX34TMLDWH1B_bvubG49AtSU-NFOsVVx-Y3CYH83OdA9OOtZIaEfB9eCDmp6mYcsoOfDvGj6lWmu4okdiJPyYo/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYsVjxJapWPBscRcJG1Xi2QL_GX45Bp2xMIf8a_b3jU1tUro2oiP3ND5MJEFEKEVBnjiAimUtjAPL4nmpcGrZb07H4KM5oZGQPJQvG9sHc-_jCFedgeIW6CPwpYUvVj4y6K8OWVY70Qg4/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}

---------------------------------------------------------------------------

Selanjutnya letakan kode diatas </head> Untuk yang warna merah jika sudah ada di template sobat gak kperlu lagi di tambah

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script src='https://cdn.rawgit.com/Brando07/share/newbe/megamenu.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($) {
 $(&#39;#megamenuid&#39;).megaBloggerMenu({
  postsNumber : 4,
  noThumbnail : &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoEjtkkLYpMqgj2aPKOL6hixps_HwRKVCnwNVVe7p_pCNs5ZJYOECuUxcHm_rgEI9stz589nkSsAqAzPdYcJzPLmt9BXO209fVr6K4VY-l-uUXdESaQ20c4F3aIOAlLQE_NQi0Ec60whc/s1600/no_image_available.png&#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>

Nah selanjutnya masih menambah kode lagi, tapi yang ini untuk mengganti menu sobat yang lama sehingga maksimal tampilannya. Tapi jika ada kode  <div class='main-outer'> maka anda bisa meletakan kode menu diatas <div class='main-outer'>.

Ini Kodenya

---------------------------------------------------------------------------

<ul class='megamenu' id='megamenuid'>
<li><a href='/'>Home</a></li>
<li><a class='menu-target' href='#'>MENU TITLE</a>
<ul>
<li><a href='http://notfound126.blogspot.co.id/search/label/Drama1</a></li>
<li><a href='http://notfound126.blogspot.co.id/search/label/Drama2</a></li>
<li><a href='http://notfound126.blogspot.co.id/search/label/Drama3'>LABEL 3</a></li>
</ul>
</li>
<li><a class='menu-target' href='#'>MENU TITLE</a>
<ul>
<li><a href='http://notfound126.blogspot.co.id/search/label/Drama4</a></li>
<li><a href='http://notfound126.blogspot.co.id/search/label/Drama5</a></li>
<li><a href='http://notfound126.blogspot.co.id/search/label/Drama6</a></li>
</ul></li>
<li><a href='http://www.seocips.com/search/label/Slider'>Normal Link</a></li>
<li class='search-box'>
<form action='/search' class='search-here' method='get'>
<input class='search-field' name='q' placeholder='Search Here' size='30' type='text'/>
<input class='search-button' type='submit' value=' '/>
</form>
<p class='search-alert'>Search form is empty!</p>
</li>
</ul>
<div class='clear'/>

Nah untuk yang warna biru, kamu ganti dengan link label kamu.
Jika anda ingin menambahkan kotak pencarian maka tambahkan kode dibawah ini diatas kode <div class='clear'/>

<li class='search-box'>
<form action='/search' class='search-here' method='get'>
<input class='search-field' name='q' placeholder='Search Here' size='30' type='text'/>
<input class='search-button' type='submit' value=' '/>
</form>
<p class='search-alert'>Search form is empty!</p>
</li>
</ul>

sehingga menjadi

<li class='search-box'>
<form action='/search' class='search-here' method='get'>
<input class='search-field' name='q' placeholder='Search Here' size='30' type='text'/>
<input class='search-button' type='submit' value=' '/>
</form>
<p class='search-alert'>Search form is empty!</p>
</li>
</ul>
<div class='clear'/> 

Untuk screenshootnya klik link berikut (http://bloggermegamenu.blogspot.co.id/p/demo-page.html)