Mega Sajian Dengan Thumbnail Untuk Blogger
Selamat tiba kembali di Dunia-TTT, Kali in saya akan membagikan tutorial menciptakan Mega sajian 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 sajian navigasi AJAX widget baru, gambar sanggup ditambahkan ke sajian drop-down juga.
AJAX sajian navigasi untuk blogger yaitu widget yang dirancang khusus untuk platform Blogger. Hal ini terinspirasi dari situs Mashable jauh sebelum itu diberikan makeover. Meskipun inspirasinya polos dan sederhana, sajian drop down dengan gambar yaitu kesuksesan yang besar. Ia bekerja menurut pada perpustakaan jQuery dan Blogger JSON Pakan API. Fungsi-wise, bekerja ibarat sajian drop-down normal saat JavaScript dinonaktifkan. oleh alasannya yaitu itu, untuk bekerja secara online, blog harus untuk pengunjung umum, sehingga Blogger JSON Umpan API akan berfungsi ibarat yang dirancang.
Fitur-Fitur
Multi-Level sajian Dukungan
Menu AJAX yaitu sajian multi-level drop-down yang didasarkan pada daftar unordered standar HTML. Ketika sajian berisi sub-menu, itu beban dengan cepat saat pengguna berguling sajian utama. Apa yang jago wacana ini yaitu bahwa hal itu menghemat kemudian lintas keluar, terutama pada situs web yang memakai navigasi yang besar.
Compitible di browser lain
Sebagian besar aplikasi AJAX akan bekerja di browser yang berbeda bahkan dengan plugin lain atau teknologi pribadi sudah terpasang. Menu dengan gambar bekerja dalam premis yang sama, bukannya dirancang untuk browser tertentu. AJAX baru, mega sajian drop down dengan gambar yaitu pilihan ideal. Beberapa Windows browser yang didukung termasuk IE5 +, Firefox, Google Chrome, Safari Netscape 7 + dan Opera 8 +. Bila Anda memakai Mac, sajian AJAX didukung pada Firefox, IE dan Safari. Jika JavaScript dinonaktifkan, namun sajian masih sanggup diakses, tapi hanya sajian CSS murni.
Otomatis Sub-Menu Tampil
Dengan sajian AJAX baru, Anda hanya perlu berguling item sajian dan sub-menu secara otomatis akan memuat. Tidak perlu mengklik sajian untuk mendapat sub-menu drop-down. Hal ini tidak hanya menghemat waktu navigasi yang berharga bagi pengguna, tetapi juga kemudian lintas keluar.
Menu Styling
Menu AJAX sanggup ditata dengan hanya mengubah megamenu.js dan gaya CSS. Yang pertama dipakai saat javascript diaktifkan, sedangkan yang kedua yaitu saat dimatikan. Anda sanggup menyesuaikan parameter sajian secara manual atau Anda sanggup memakai template siap digunakan. Ada banyak fitur lainnya, tetapi Anda tidak akan sanggup menggunakannya kalau Anda tidak menginstal sajian mega gres dengan gambar. Apa yang perlu Anda lakukan untuk menerapkannya dalam blog atau website?
 |
Menambahkan mega sajian dengan Images / Thumbnail di Blogger
Langkah 1. Masuk ke akun Blogger Anda, kemudian masuk ke Dashboard. Pilih blog mana yang ingin anda install sajian mega baru.
CSS
Langkah 2. Klik Template , kemudian tekan tombol Edit HTML. Tekan di mana saja di dalam area isyarat dan menggunakan fungsi CTRL + F untuk melaksanakan pencarian lebih cepat dan lebih mudah. Ketik tag berikut dan tekan Enter untuk temukan:
]]> </ B: skin>
Setelah Anda menemukan tag diatas, tambahkan isyarat di bawah ini sempurna 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/AVvXsEhpjZJzbfubXo8FF4O77ZRRycndutToaxG39nOCc121DziF4H3P8WKFzfMmH1orj8-3dFRhUyY5a8XBf_ZbQKfyuDbmplv6Jj6X7CjFeA3tTiciofwBFKxN5UTG0IL0qfHtjLh-hC_pAT8/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/AVvXsEhHnvgnQPyU3sCF9VyJtTPv1DlfhTJyM2_yOM54b5AbUTcfQPAE6AbHuFDo7s9-fAWrDP73gYx3Yqezj_uvbh0W-mrJ3xzIEGAZ1nqWdVpA8vFfHx-5Rdb-y7WJAm2u_gvYEwUqB4JMN9s/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/AVvXsEgiuvMobJ5_EElh5APyCPG-ZeE0k13UsIUVYTWLL2fGngfeNOwNHUycNqwp6ceKBmx1FCrlBh0JvYHyI1oESlz_MeURg43WTcoB5xSTtcPJRiWYjJnbF0E3YUmmBrQ0Yj-1qd3K_AKyu88/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 isyarat sebelum tag </ head> (CTRL + F untuk mencarinya). copy dan pastekan isyarat 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($) { $('#megamenuid').megaBloggerMenu({ postsNumber : 4, noThumbnail : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvfot48UlVnot5ss5NCHV3VxC41hBI48Xt63umpD5_yv_IcGTLutGdMeZzZpaaoXKePQ-M5A1vQhf1vkUVzjKQZmfCyAaSXkewhqutAzm_JOH06B_nNwHU2XGz7DJkbSO0Qw4SXuKEid0/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
- 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 kalau postingan yang tidak mempunyai gambar, ganti url warna biru ini:
noThumbnail : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvfot48UlVnot5ss5NCHV3VxC41hBI48Xt63umpD5_yv_IcGTLutGdMeZzZpaaoXKePQ-M5A1vQhf1vkUVzjKQZmfCyAaSXkewhqutAzm_JOH06B_nNwHU2XGz7DJkbSO0Qw4SXuKEid0/s1600/no_image_available.png'
HTML
Langkah 4. Hati-hati menambahkan isyarat HTML untuk memastikan bahwa drop down sajian dengan gambar akan bekerja ibarat yang sudah dirancang. Hanya ada tiga jenis URL bahwa AJAX sajian harus dipakai 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 memakai CTRL + F:
Tepat di atas tag diatas, tambahkan isyarat HTML berikut:
Catatan: mengganti teks warna biru dengan url label dan teks dalam merah dengan nama label. Ini yaitu pola yang telah Anda tambahkan ke pengaturan Label editor posting Anda:
Langkah 6. Klik Simpan template agar semua perubahan diterapkan. Jika Anda tidak sanggup menemukan baris dari langkah 5, pilih tab Tata Letak , klik Add Gadget , kemudian pilih HTML / JavaScript Gadget. Salin kode HTML dan paste di dalam kotak ... kemudian tekan Simpan.
<div class='main-outer'>
Tepat di atas tag diatas, tambahkan isyarat 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 yaitu pola yang telah Anda tambahkan ke pengaturan Label editor posting Anda:
Langkah 6. Klik Simpan template agar semua perubahan diterapkan. Jika Anda tidak sanggup menemukan baris dari langkah 5, pilih tab Tata Letak , klik Add Gadget , kemudian pilih HTML / JavaScript Gadget. Salin kode HTML dan paste di dalam kotak ... kemudian tekan Simpan.
Itu saja! Setelah selesai, sajian AJAX dengan gambar akan ditampilkan dan siap untuk digunakan. Pastikan untuk menentukan foto yang relevan dengan sajian dan sub-menu sehingga website Anda akan mempunyai tampilan yang kohesif dan daya tarik. Penelitian menunjukkan, bagaimanapun, teks yang disertai dengan gambar apapun, bahkan kalau benar-benar tidak relevan, sanggup menarik perhatian.
Sumber https://duniatutorials.blogspot.com/