›

Membuat Navigasi Mega Menu Dengan Gambar di Blog

3/09/2016
Navigasi Mega Menu Dengan Gambar - Konten visual bisa menambah daya tarik tersendiri, dengan mengintegrasikan gambar ke setiap halaman web atau blog. Kini, gambar juga bisa ditambahkan ke menu 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, menu drop-down ini akan berkerja normal jika JavaScriptnya dinonaktifkan. 


Demo

Fitur Navigasi Mega Menu

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

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

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

Menu Navigasi Styling
Tampilan pada navigasi sangat menarik, Anda bisa menyesuaikan parameter menu secara manual karena navigasi ini diciptakan menggunakan javascript dan properti CSS. Dengan demikian Anda bisa dengan mudah mendesainya lagi sesuai keinginan.

Ada banyak fitur menarik lainnya pada navigasi keren ini, tetapi Anda tidak akan bisa merasakan fitur tersebut jika tidak memasangnya pada web atau blog Anda.

Pemasangan mega menu dengan gambar / Thumbnail di Blog

1. Masuk ke akun Blogger Anda, kemudian Pilih Template >> lalu Edit HTML
2. Gunakan CTRL+F untuk memudahkan pencarian, kemudiaan Anda cari ]]> </b: skin> , Setelah Anda menemukan tag tersebut, copy kode 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/AVvXsEhB4g9vm5E7PGhLDbpuiWiiaV1nV5uG2vtpB8JSnhN2h1Irl_EEfK9dJ9r6Ns3lwOWhHbG4_2q2zB8XC7hfn9Ia8Rc2vvWPrPdfLUmy9rYRyKhu6q-LlIXtnJac1baaT3Jxn6v8fNQ8JG4/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/AVvXsEgqBsOpZvy4wfXueIh4QkHMpIyvJSEJxm_n69RtHdxsM9b5amo9KNu9TWhtz4lAHKbZKxZtMKxfN2hIht90ag_w3-1khRBkq-PwLoGmU7qWJkiS0VmYkOrLnjNgYbc6sLI9_bJB9k-OGGo/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/AVvXsEg-y-IAQL18wSUkRf-zDruVvnDKjjGljBrobgB_3e2Nj5quEXDJ3N37ZLBuEWhcKiDUdMfjO-wxGmrzSSbG1r9fgH4B4xMR0yJY7AmLkZXteu7_UM8z5PJJlUR_QcXHdqw1nJUThur1Jwo/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 kode  </ head> , lalu copy kode 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($) {
 $(&#39;#megamenuid&#39;).megaBloggerMenu({
  postsNumber : 4,
  noThumbnail : &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNlt_eKX_kzMLnjCrWmJG73L7-qh7TMk_X0ugVAuat292AZM57es9zOHdhAle2Tiggvhvx-H_a4gUgGvsH7Otq8hEkDhGJLcsivuxlxn8iUXyhy9CQmyQUdMDYhf7jXfm4-FgJE1F-miQ/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>

Catatan :
  • Hapus jQuery yang saya beri warna merah jika didalam template Anda sudah ada.
  • postsNumber: 4 adalah 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/AVvXsEiNlt_eKX_kzMLnjCrWmJG73L7-qh7TMk_X0ugVAuat292AZM57es9zOHdhAle2Tiggvhvx-H_a4gUgGvsH7Otq8hEkDhGJLcsivuxlxn8iUXyhy9CQmyQUdMDYhf7jXfm4-FgJE1F-miQ/s1600/no_image_available.png "

4. Perlu Anda perhatikan, sebaiknya Anda berhati-hati saat menambahkan kode HTML karena jika salah maka drop down tidak akan berkerja. Ada tiga jenis URL yang bisa digunakan :

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 kode cari <Div class = 'main-outer'>, untuk memudahkan pencarian gunakan tombol CTRL+F . Pada setiap template berbeda-beda kodenya, cari saja yang hampir mirip dengan kode tersebut. Setelah ditemukan, copy kode 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 bisa ditemukan jika Anda sudah menambahkannya nama Label dipengaturan editor posting Anda


6. Simpan template

Proses pemasangan navigasi telah selesai, pastikan untuk memilih gambar yang menarik. Penelitian menunjukkan, jika teks yang disertai dengan gambar yang tidak menarik, tidak akan menjadi pusat perhatian pengunjung.

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

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel