New AJAX Navigation Menu Widget untuk Blogger

Navigasi
AJAX Navigasi menu untuk blogger adalah widget baru yang diciptakan oleh Me di Blogger platform yang menggunakan Blogger JSON API dan AJAX. Menu navigasi ini terinspirasi dari situs lama Mashable.com. Dan sekarang saya recoded  widget ini dan menambahkan fitur disesuaikan.


Bagaimana kerjanya ?

Nah, widget ini bekerja dengan jQuery dan Blogger JSON API. Blog Anda harus untuk pengunjung umum. selain itu Blogger JSON feed API tidak akan bekerja.
Menu bekerja seperti menu drop-down normal bila javascript dinonaktifkan, Dan akan berubah menjadi menu drop-down bertenaga AJAX ketika javascript diaktifkan.


Cara Memasang Widget ini?

Pergi ke Blogger Dashboard> Pilih Blog> Pergi ke halaman Template Blog
Klik tombol Edit HTML

 CSS

Tambahkan Kode CSS sebelum ]]> </ b: skin>


/* Menu Stylings */
.w2bmenu *{margin: 0;padding: 0;}
ul.w2bmenu {list-style: none;line-height: 1;overflow: visible !important;}
ul.w2bmenu:after{margin: 0;padding: 0;content: ' ';display: block;height: 0px;clear: both;}
ul.w2bmenu li{list-style: none;position:relative;float: left;margin: 0 !important;padding: 0 !important;}
ul.w2bmenu li a{margin: 0;padding: 12px 16px !important;font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;color: #6b6b6b !important;text-shadow: 0 1px 0 #fff;font-weight: 700 !important;text-transform: uppercase !important;font-size: 12px !important;display: block !important;border: 0 none !important;}
ul.w2bmenu li a:hover,ul.w2bmenu li a.hoverover{background: #f5f5f5 !important;}
ul.w2bmenu ul{position: absolute;display: none;top: 100%;border:1px solid #ccc;}
ul.w2bmenu li:hover > ul{display: block;}
ul.w2bmenu ul li{float: none;min-width: 160px;background:#f5f5f5;text-shadow: none;}
ul.w2bmenu ul li a{padding: 12px 14px;text-transform: none;font-weight: normal;}
ul.w2bmenu ul li a:hover,ul.w2bajaxmenu ul li a.hoverover{background: #fff !important;}
ul.w2bmenu ul ul{display: none;left: 100%;top: 0;}
/* AJAX Menu Stylings */
ul.w2bajaxmenu li div.submenu {display: none;position: absolute;width: 600px;z-index: 90;left: -1px;top: 100%;overflow: hidden;min-height: 150px;background: #fff;border:1px solid #cccccc;border-top: 0 none;}
ul.w2bajaxmenu li:hover div.submenu {display: block;}
ul.w2bajaxmenu ul ,ul.w2bajaxmenu ul li{display: block !important;border: 0 none !important;margin: 0 !important;padding:0 !important;}
ul.w2bajaxmenu ul li{background: none !important;float: none !important;}
ul.w2bajaxmenu ul.verticlemenu{position: absolute;width: 33%;left:0;top:0;bottom: 0;background: #f5f5f5;}
ul.w2bajaxmenu ul.postslist {position: relative;display: block;width:65%;float: right;margin: 8px 0 !important;background: none;}
ul.w2bajaxmenu ul.postslist li{display: block;overflow: hidden;border-bottom: 1px #eee solid;position: relative;min-height: 60px;padding: 8px 8px 8px 110px !important;}
ul.w2bajaxmenu ul.postslist li:last-child{border-bottom: none 0;}
ul.w2bajaxmenu ul.postslist li .imgCont{position: absolute;left: 0;top:8px;width: 100px;height: 60px;overflow: hidden;border:1px solid #dcdcdc;font-size: 0;line-height: 0;}
ul.w2bajaxmenu ul.postslist li .imgCont img{position: relative;top:-20px;padding: 0;width: 100px;height: 100px;display: block;}
ul.w2bajaxmenu ul.postslist li a{display: block;line-height: 1.4;padding: 0 !important;}
ul.w2bajaxmenu .loader{background:url('http://i.imgur.com/SeivG.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position: absolute;top:50%;margin-top: -11px;right:5px;}
ul.w2bajaxmenu .menuArrow {border-bottom: 4px solid transparent;border-top: 4px solid transparent;border-left: 4px solid #999999;display: block;height: 0;margin-top: -4px;position: absolute;right: 11px;top: 50%;width: 0;}
#w2bajaxmenu {background: #ededed;background: -moz-linear-gradient(top, #ededed 0%, #e0e0e0 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#e0e0e0));background: -webkit-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: -o-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: -ms-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: linear-gradient(to bottom, #ededed 0%,#e0e0e0 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#e0e0e0',GradientType=0 );border: 1px solid #cccccc;}

JavaScript

Jika Blog Anda sudah memiliki jQuery plugin ini, maka jangan menambahkan plugin ini di template blog Anda,


Jika tidak tambahkan bawah baris kode sebelum </ head> tag


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

Tambahkan kode Javascript berikut sebelum </ head> tag

<script type="text/javascript" src="http://widgets.way2blogging.org/blogger-widgets/ajaxbloggermenu.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
 $('#w2bajaxmenu').ajaxBloggerMenu({
  numPosts : 4, // Number of Posts to show
  defaultImg : 'http://url-to-image.com/default-image.jpeg' // Default thumbnail Image
 });
});
</script>

HTML

Pada bagian ini Anda harus hati-hati menambahkan HTML, jika tidak maka menu tidak akan bekerja.
AJAX menu menerima tiga jenis url. Anda harus menggunakan url ini hanya dalam menu. yaitu Label, Parameter Pencarian dan Label w / Search Query.

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

Catatan: - Search Parameter harus
dikodekan Url. Anda dapat menggunakan alat ini untuk mengkodekan permintaan pencarian Anda.

Gunakan MENU ini Contoh kode dan menambahkannya dalam HTML / JavaScript gadget.


<ul id="w2bajaxmenu" class="w2bmenu">
 <li>
  <a href="#">Home</a>
 </li>
 <li>
  <a href="#">Example 1</a>
  <ul>
   <li><a href="http://yourblogdomain.blogspot.com/search/label/AdSense">Sample Label</a></li>
   <li><a href="http://yourblogdomain.blogspot.com/search/label/Gadgets?q=harish">Label w/ Search</a></li>
   <li><a href="http://yourblogdomain.blogspot.com/search?q=way2blogging">Search Query</a></li>
   <li><a href="http://yourblogdomain.blogspot.com/search?q=This+is+long+query+you+do+not+get+any+results,+so+try+others">Unknown Search</a>
  </ul>
 </li>
 <li>
  <a href="#">Example 2</a>
  <ul>
   <li><a href="http://yourblogdomain.blogspot.com/search/label/Design">Design</a></li>
   <li><a href="http://yourblogdomain.blogspot.com/search/label/Facebook?q=Like+Button">Facebook</a></li>
   <li><a href="http://yourblogdomain.blogspot.com/search/label/Templates">Templates</a></li>
   <li><a href="http://yourblogdomain.blogspot.com/search?q=Guest+Posts">Guest Posts</a></li>
  </ul>
 </li>
 <li><a href="http://yourblogdomain.blogspot.com">Normal Link</a></li>
</ul>

Kata Akhir!

Saya harap Anda menikmati widget ini. semoga berguna

Artikel Terkait

  • Floating Horizontal Bar Social Sharing untuk BlogSpot
    Situs Jejaring Sosial telah menjadi pusat kegiatan internet karena mampu menarik setiap pengguna yang menggunakan internet baik dari sekolah, kantor atau rumah. Sekarang ini setiap Orang akan suka Berbagi artikel bagus dengan komunitas sosial yang menguntungkan setiap orang dan tentunya para penyedia artikel. Ini penting untuk setiap blogger d…
  • Menu Rocking dan Rolling Rounded
    Kali ini saya menemukan menu yang unik untuk di bahas, yaitu menu bericon yang mempunyai efek melebar dan bertampilan unik hasil dari kreasi http://tympanus.net/. Menu ini memanfaatkan efek berputar dan scaling Patch jQuery dari Zachary Johnson yang dapat ditemukan di sini. Demo Download Langsung saja kita lanjut untuk mengupas menu ini…
  • Menu navigasi drop down dengan pure CSS3
    Anda pasti sudah tidak heran lagi dengan menu drop down, karena sudah banyak artikel yang membahas dan memberikan tutorial ini. kali ini saya akan berbagi sebuah menu drop down yang apik dengan css3. Ini adalah Navigation Menu Dengan Multi Level Drop Down yang dikembangkan dengan menggunakan CSS3 murni dengan efek tambahan seperti border-radiu…
  • Cara Membuat Metro UI Navigation Menu
    Apa menu METRO UI? Jika anda pernah membuka antarmuka Microsoft Windows 8, atau rentang baru dari Windows ponsel Smart, maka menu METRO UI ini bukanlah hal yang baru bagi mereka. Menu ini terinspirasi dari antarmuka navigasi Windows 8. Jika anda belum tahu, silahkan lihat screenshot berikut. Cara Membuat Menu Metro Windows 8 seperti dala…
  • Link aktif di menu dengan tag conditional
    Dapet ide yang tidak pernah terpikir, sempat senyum - senyum sendiri saat menerapkan tag conditional home untuk background <body> kenapa gak saya coba pada menu ya, hadeh... begini teorinya, misal kita mengunjungi sebuah situs/blog lalu kita menekan salah satu link menu contoh widget, semula ketika kita berada di halaman depan tidak ada …
  • Membuat widget pada menu navigasi blog
    Umumnya element widget untuk menempatkan gadget akan berada pada sidbar, header, footer dan lainnya. namun kali ini saya akan berbagi sebuah trik untuk membuat elemen widget pada menu navigasi yang mungkin aneh untuk apa tujuannya. sebenarnya cara ini saya gunakan untuk memasang sebuah formulir pencarian menggunakan jquery di blog ini yang mun…

Tidak ada komentar :

Kode klik emo: :) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p

Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT

Back to Top
Loading...