Assalamualaikum sobat blogger…..
Kali ini saya ingin berbagi dengan Anda cara membuat konsep Mega Menu with Thumbnails keren di blog.
Contonya seerti gambar di bawah ini:
Sebetulnya konsep ini sudah banyak di gunakan di banyak template blog premium, salah satunya seperti yang saya gunakan ini. Pungsi dari konsep ini sendiri Adalah untuk mempercantik tampilan blog Anda agar pengunjung betah berlama lama di blog Anda tetepi tentunya dengan tidak mengesampingkan Artikel-artikel yang berkuaitas.
konse ini sendiri memiliki beberapa kelebihan di bandingkan jika Anda hanya menggunakan “Menu Drop down” biasa saja. Diantaranya adalah:
1. Multi level menu support
2. Cross browser compatibility
3. Automatic sub menu display
4. Menu Styling
Silahkan lihat ? Demonya di sini
Ok langsung aja ke intinya saya akan jelaskan langkah-langkahnya utuk Anda:
1. Pastikan Anda memiliki blog jika Anda ingin menggunakan konsep ini, he.. he..
Jika langkah pertama sudah anda penuhi lanjut ke langkah selanjutnya.
2. Login ke bog Anda
3. Pilih Template
4. Edit HTML
5. Masukan kode CSS yang sudah saya sapkan di bawah ini:
caranya adalah anda cari kode ]]></b:skin>
dan kemudian Letkan Kode CSS ini tepat di atasnya.
.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/AVvXsEioA8Q6duS37T6hBgzdPht24xzEL__oRTrOyFeN6y2JwBn-amdT-pEB0R9PgL3OwATCZHV51tWlg10d8JmACKhl-6yv2dDQmJVFKzOQnR3SzNUaHgOSRTFWQ2YIQ8SLpTy4mpgWMDGYFa4/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/AVvXsEiXuGNw8ZJ-dmg8FnpCZYu4MaONpX-_PBDTbkS_TZ-tazZjD_GvZmfLIEu01_ch8lh7ITBDGNoIYt04DTX1xVk1DR3aBAEsH9xKqX2fdnkPyi7scDWg5vNwH2pqZbRpZjZMwJ7muKoSowo/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/AVvXsEiKgQzyIqhzALY9_Cut0JQuzbhkGXp9pgOu3PrsyrCXs7mA4vqicB9IMTts_TZKicO2j5ZbVIs4_YpwKCNF8uyq4P7EoFc_VG-6ZoSoTbbV8kFrYJ29fM8m9Kt0SXoq27OjcvrvfAjOEok/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}
6. Cari kode </head> dan letakan kode javaScript di bawah ini tepat di atas </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script src='https://helplogger.googlecode.com/svn/trunk/megamenu.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($) {
$('#megamenuid').megaBloggerMenu({
postsNumber : 4,
noThumbnail : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS8Y0qZBQQ3khhcQ4UVbNTaaSDOOvAyPjcbWrk57jkIthSXvrhHpB7JfFr4rnV34b2Bqus1o24S34es-7GgkljCO42uuaUO2gMbQR483nMrx9KSJQekVR0ug13uix4krqXKoDYgZxkKzo/s1600/no_image_available.png'
});
});
$(function(){
$('.search-here').submit(function(e){
if($('.search-box .search-field').val().length==0){
$('.search-box .search-alert').fadeIn().css('display','inline-block');
e.preventDefault();
}
});
});
</script>
7. Untuk HTML Anda gunakan kode di wah ini ntuk mengganti kode “MENU” yang sudah Anda gunakan sebelumnya, untuk mempermudah, caranya Anda cari kode
<div class='main-outer'> dan letakan HTML di bawah ini tepat dibawahnya:
<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://artoszone.com'>LABEL NAME</a></li>
<li><a href='http://artoszone.com'>LABEL NAME</a></li>
<li><a href='http://artoszone.com'>LABEL NAME</a></li>
</ul>
</li>
<li><a class='menu-target' href='#'>MENU TITLE</a>
<ul>
<li><a href='http://artoszone.com'>LABEL NAME</a></li>
<li><a href='http://artoszone.com'>LABEL NAME</a></li>
<li><a href='http://artoszone.com'>LABEL NAME</a></li>
</ul></li>
<li><a href='http://artoszone.com'>Normal Link</a></li>
<div class='clear'/>
<div class='clear'/>
8. Ganti dan modifikasi nama Menu dan submenu sesuai dengn kebutuhan blpg Anda
9. Jika Anda ngin menambahkan kolom pencarian di samping nya tambahkan kode di bawah ini di atas kode <div class='clear'/> pada kode HTML yang saya jelaskan pada poin no 7 .
<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 hasilnya akan seperti ini
<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'/>
<div class='clear'/>
10. Pastikan Anda melihat rivewnya sebelum Anda menyimpan prubahannnya.
Jika Anda berhasil maka tampilannya kuran lebih akan seperti ini:
11. Selesai, jika masih kurang faham silahkan berikan komentar Anda
Terimakasih Semoga berhasil......
