Mega menu dengan Thumbnail untuk Blogger

Selamat datang kembali di Dunia-TTT, Kali in saya akan membagikan tutorial membuat Mega menu dengan Thumbnail untuk blogger konten visual memegang daya tarik tertentu yang website mengintegrasikan gambar ke setiap halaman, atau bahkan beroperasi hanya melalui foto. Sekarang, dengan menu navigasi AJAX widget baru, gambar dapat ditambahkan ke menu drop-down juga.

AJAX menu navigasi untuk blogger adalah widget yang dirancang khusus untuk platform Blogger. Hal ini terinspirasi dari situs Mashable jauh sebelum itu diberikan makeover. Meskipun inspirasinya polos dan sederhana, menu drop down dengan gambar adalah kesuksesan yang besar. Ia bekerja berdasarkan pada perpustakaan jQuery dan Blogger JSON Pakan API. Fungsi-wise, bekerja seperti menu drop-down normal ketika JavaScript dinonaktifkan. oleh karena itu, untuk bekerja secara online, blog harus untuk pengunjung umum, sehingga Blogger JSON Umpan API akan berfungsi seperti yang dirancang.

Fitur-Fitur

Multi-Level menu Dukungan

Menu AJAX adalah menu multi-level drop-down yang didasarkan pada daftar unordered standar HTML. Ketika menu berisi sub-menu, itu beban dengan cepat ketika pengguna berguling menu utama. Apa yang hebat tentang ini adalah bahwa hal itu menghemat lalu lintas keluar, terutama pada situs web yang menggunakan navigasi yang besar.

Compitible di browser lain

Sebagian besar aplikasi AJAX akan bekerja di browser yang berbeda bahkan dengan plugin lain atau teknologi eksklusif sudah terpasang. Menu dengan gambar bekerja dalam premis yang sama, bukannya dirancang untuk browser tertentu. AJAX baru, mega menu  drop down dengan gambar adalah pilihan ideal. Beberapa Windows browser yang didukung termasuk IE5 +, Firefox, Google Chrome, Safari Netscape 7 + dan Opera 8 +. Bila Anda menggunakan Mac, menu AJAX didukung pada Firefox, IE dan Safari. Jika JavaScript dinonaktifkan, namun menu masih dapat diakses, tapi hanya menu CSS murni.

Otomatis Sub-Menu Tampil

Dengan menu AJAX baru, Anda hanya perlu berguling item menu dan sub-menu secara otomatis akan memuat. Tidak perlu mengklik menu untuk mendapatkan sub-menu drop-down. Hal ini tidak hanya menghemat waktu navigasi yang berharga bagi pengguna, tetapi juga lalu lintas keluar.

Menu Styling

Menu AJAX dapat ditata dengan hanya mengubah megamenu.js dan gaya CSS. Yang pertama digunakan ketika javascript diaktifkan, sedangkan yang kedua adalah ketika dimatikan. Anda dapat menyesuaikan parameter menu secara manual atau Anda dapat menggunakan template siap digunakan. Ada banyak fitur lainnya, tetapi Anda tidak akan dapat menggunakannya jika Anda tidak menginstal menu mega baru dengan gambar. Apa yang perlu Anda lakukan untuk menerapkannya dalam blog atau website?

Demo

Menambahkan mega menu dengan Images / Thumbnail di Blogger

Langkah 1. Masuk ke akun Blogger Anda, kemudian masuk ke Dashboard. Pilih blog mana yang ingin anda install menu mega baru.

CSS

Langkah 2. Klik Template , kemudian tekan tombol Edit HTML. Tekan di mana saja di dalam area kode dan menggunakan fungsi CTRL + F untuk melakukan pencarian lebih cepat dan lebih mudah. Ketik tag berikut dan tekan Enter untuk temukan:

]]> </ B: skin>

Setelah Anda menemukan tag diatas, tambahkan kode di bawah ini tepat di atas/ sebelum tag diatas:

 Copy css dibawah!!!

.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/AVvXsEhOP_sV4zhYdfpslf-J20YOaee9vShklIhAvwE6GBwwRjAxlkCj9_HIm0valiRGIyYHonh_a4FqdISsqsMnrSNWKk1ynBg1CSdP4tbBv7BraASmmb1OGLqF6Hy_ie3XDrJkXUMr0taOFTM/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/AVvXsEjOWjYjdM0KfiBGsGFXSOAthr0Bnr0wz2oMjJIXub_DZDESQVeqc8AZ-ySo8R906ZGi9YbwZe8ZonL1b3bTUFt50dKuRb4Dr3h6kCHBWJ1qYeZPbT4dkqS7aY0bwNv2gRs7kcm5FydeF0w/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/AVvXsEhs6m-KK45xvm2hfMIpdBD9RYqzSAeDkIc6-56TiTHo95XtaG_WeqOyuJixcHGkf7wPe80MpNIY6caJLrUkVNBqPohIYW2L0f15cqP49gMOlL8e5UKMMdXIZVv4jVOAkfLYhyphenhyphenJ9QeNSXHI/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}

JavaScript

Langkah 3. Periksa apakah blog Anda sudah terpasang plugin jQuery. Jika tidak, Anda perlu menambahkan beberapa baris kode sebelum tag </ head>  (CTRL + F untuk mencarinya). copy dan pastekan kode di bawah ini:

<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/AVvXsEjp1DUGyfnLm5omRRzBhQa1dP1dfj5kaN94StC1fmOiOcsn9_zb9S8niTLzFNlf5nRIFiJStlsJTRgAVfwAHBAvigr4XGa_h55rdf__hNjo3AKSbyOIIy9F-ssZT_6hOq9lF3R_SzKHPX8/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

- Jika jQuery Plugin sudah ada, hapus <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>,Jika belum, yaa biarin aja,,,
- Untuk mengubah jumlah posting yang akan ditampilkan, Ubah di:

postsNumber : 4

- Untuk menambahkan/mengubah thumbnail/gambar default yang berbeda jika postingan yang tidak memiliki gambar, ganti url warna biru ini:

noThumbnail : &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp1DUGyfnLm5omRRzBhQa1dP1dfj5kaN94StC1fmOiOcsn9_zb9S8niTLzFNlf5nRIFiJStlsJTRgAVfwAHBAvigr4XGa_h55rdf__hNjo3AKSbyOIIy9F-ssZT_6hOq9lF3R_SzKHPX8/s1600/no_image_available.png&#39; 

HTML

Langkah 4. Hati-hati menambahkan kode HTML untuk memastikan bahwa drop down menu dengan gambar akan bekerja seperti yang sudah dirancang. Hanya ada tiga jenis URL bahwa AJAX menu harus digunakan dengan sesuai. 

URL Label: http://yourblogurlblogspot.com/search/label/LABELNAME 

Permintaan Pencarian: http://yourblogurl.blogspot.com/search? q = SEARCHQUERY 

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

Langkah 5. Cari baris berikut menggunakan CTRL + F:

<div class='main-outer'>

Tepat di atas tag diatas, tambahkan kode HTML berikut:

<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://ADDURLHERE.com'>LABEL NAME</a></li><li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li><li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li></ul></li><li><a class='menu-target' href='#'>MENU TITLE</a><ul><li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li><li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li><li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li></ul></li><li><a href='http://ADDURLHERE.com'>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: mengganti teks warna biru dengan url label dan teks dalam merah dengan nama label. Ini adalah contoh yang telah Anda tambahkan ke pengaturan Label editor posting Anda:

Langkah 6. Klik Simpan template agar semua perubahan diterapkan. Jika Anda tidak dapat menemukan baris dari langkah 5, pilih tab Tata Letak , klik Add Gadget , lalu pilih HTML / JavaScript Gadget. Salin kode HTML dan paste di dalam kotak ... kemudian tekan Simpan. 

Itu saja! Setelah selesai, menu AJAX dengan gambar akan ditampilkan dan siap untuk digunakan. Pastikan untuk memilih foto yang relevan dengan menu dan sub-menu sehingga website Anda akan memiliki tampilan yang kohesif dan daya tarik. Penelitian menunjukkan, bagaimanapun, teks yang disertai dengan gambar apapun, bahkan jika benar-benar tidak relevan, bisa menarik perhatian.