Membuat Navigasi Mega Hidangan Dengan Gambar Di Blog

Navigasi Mega Menu Dengan Gambar - Konten visual dapat menambah daya tarik tersendiri, dengan mengintegrasikan gambar ke setiap halaman web atau blog. Kini, gambar juga dapat ditambahkan ke hidangan drop-down loh sobat.

Navigasi Menu AJAX blogger merupakan widget yang dirancang khusus untuk platform Blogger.

Navigasi ini di fungsikan oleh jQuery dan Blogger JSON API. Namun, hidangan drop-down ini akan berkerja normal kalau JavaScriptnya dinonaktifkan.

Demo

Fitur Navigasi Mega Menu

Menu didukungan Multi-Level

Navigasi Menu AJAX merupakan hidangan multi-level drop-down yang didasari oleh daftar unordered standar HTML. Navigasi ini sangat ringan ketika Anda bergulir ke hidangan lain.

Kompatibilitas lintas browser
Navigasi ini di buat bukan hanya berkerja pada browser tertentu, melainkan dapat bekerja di banyak sekali browser. Beberapa browser yang mendukung navigasi ini diantaranya IE5 +, Firefox, Google Chrome, Safari Netscape 7 + dan Opera 8 +. Navigasi ini tetap dapat diakses di banyak sekali browser meskipun JavaScript dinonaktifkan, tapi hanya memakai fungsi dari CSS.

Tampilan Sub-Menu Otomatis
Navigasi mega hidangan ini didesain dengan baik, Anda tidak perlu mengklik hidangan kalau akan berpindah ke item hidangan lain, cukup arahkan kursor pada hidangan maka secara otomatis sub hidangan akan terbuka.

Menu Navigasi Styling
Tampilan pada navigasi sangat menarik, Anda dapat menyesuaikan parameter hidangan secara manual alasannya ialah navigasi ini diciptakan memakai javascript dan properti CSS. Dengan demikian Anda dapat dengan gampang mendesainya lagi sesuai keinginan.

Ada banyak fitur menarik lainnya pada navigasi keren ini, tetapi Anda tidak akan dapat mencicipi fitur tersebut kalau tidak memasangnya pada web atau blog Anda.

Pemasangan mega hidangan dengan gambar / Thumbnail di Blog

1. Masuk ke akun Blogger Anda, kemudian Pilih Template >> kemudian Edit HTML
2. Gunakan CTRL+F untuk memudahkan pencarian, kemudiaan Anda cari ]]> </b: skin> , Setelah Anda menemukan tag tersebut, copy arahan di bawah ini dan pastekan sebelumnya:

.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/AVvXsEhjVdadZ4eajSg8w5J94eBGfog0mzglKr2r2fY0CSftp4EKVDzVmMUQtSmMknASP_2DmAh7rfFblKt7leDdEAq1h2IDuCg4Iu0xE_B_BfCdQmstEVoNiIug3YGLzR6LB2u6CFoP4Vu3foA/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/AVvXsEhMVMIoISpqm-pzu1xJekYHGq-kk536e0nD-fSwJ4Qowj4etI5ylOJMT-oJcw2cD3o18JHYOyPCnSDSDQR4gNvWcGW7FeNrpSfQxATzCsAQHRHZKfKjxBpO9N1Kuu7p_ge265lu0JrWiIY/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/AVvXsEjr2jwJGssvYr76GwZZTGA75rdXOq81dx6AroX_UZI10pl7NoChO-QtGWHm5fD-Msu9UYrTMizTAhvpifQH4z0QWbItvq-hechT3MBQ7oVWQ7XqhGtEBYBXLrNJy66h6d_ah0xh_Nnjpqs/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}

3. Langkah selanjutnya, Anda cari arahan </ head> , kemudian copy arahan di bawah ini dan terapkan sebelumnya.

<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/AVvXsEg6FuEnP-3hMHaeo2cyc4q-kCIjyICqbKLpwv2maMNMEpJu8eSUm3JYJbyivVFXfckdcqGBjG_cDYy9ykPEf7jnFjl1DuSAYXoAdCABPzYHwQnITyLD2q6mr2GXO6Aio3UD1lb7jy0Fgbg/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>

Catatan :

Hapus jQuery yang saya beri warna merah kalau didalam template Anda sudah ada.
postsNumber: 4 ialah pengaturan jumlah postingan yang akan di tampilkan.
Apabila postingan Anda tidak ada gambar, untuk memunculkan thumbnail ganti url yang diberi warna biru

" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6FuEnP-3hMHaeo2cyc4q-kCIjyICqbKLpwv2maMNMEpJu8eSUm3JYJbyivVFXfckdcqGBjG_cDYy9ykPEf7jnFjl1DuSAYXoAdCABPzYHwQnITyLD2q6mr2GXO6Aio3UD1lb7jy0Fgbg/s1600/no_image_available.png "

4. Perlu Anda perhatikan, sebaiknya Anda berhati-hati ketika menambahkan arahan HTML alasannya ialah kalau salah maka drop down tidak akan berkerja. Ada tiga jenis URL yang dapat dipakai :

Label URL : http://nama.blogspot.com/search/label/LABELNAME
Search Query : http://nama.blogspot.com/search? q = SEARCHQUERY
Label w / Search Query : http://nama.blogspot.com/search/label/LABELNAME?q=SEARCHQUERY

Selanjutnya Anda cari arahan cari <Div class = 'main-outer'>, untuk memudahkan pencarian gunakan tombol CTRL+F . Pada setiap template berbeda-beda kodenya, cari saja yang hampir seolah-olah dengan arahan tersebut. Setelah ditemukan, copy arahan HTML di bawah ini dan pastekan di bawahnya :

<ul class='megamenu' id='megamenuid'>
<li><a href='/'>Home</a></li>
<li><a class='menu-target' href='#'>MENU TITLE</a>
<ul>
<li><a href='URL LABEL'>NAMA LABEL</a></li>
<li><a href='URL LABEL'>NAMA LABEL</a></li>
<li><a href='URL LABEL'>NAMA LABEL</a></li>
</ul>
</li>
<li><a class='menu-target' href='#'>MENU TITLE</a>
<ul>
<li><a href='URL LABEL'>NAMA LABEL</a></li>
<li><a href='URL LABEL'>NAMA LABEL</a></li>
<li><a href='URL LABEL'>NAMA LABEL</a></li>
</ul></li>
<li><a href='URL LABEL'>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'/>
<div class='clear'/>

Catatan : Ganti teks warna biru dengan url label dan teks warna merah dengan nama label. Label dapat ditemukan kalau Anda sudah menambahkannya nama Label dipengaturan editor posting Anda

6. Simpan template

Proses pemasangan navigasi telah selesai, pastikan untuk menentukan gambar yang menarik. Penelitian menunjukkan, kalau teks yang disertai dengan gambar yang tidak menarik, tidak akan menjadi sentra perhatian pengunjung.

Demikan tutorial dalam pemasangan Navigasi Mega hidangan dengan gambar, terima kasih sudah berkunjung dan biar bermanfaat.

Sumber http://www.websiteedukasi.com/