Cara membuat Menu Tab View dengan Efek jQuery tanpa Edit HTML

Terkait Tutorial Blog, Posting kali ini yaitu Cara membuat Menu Tab View keren dengan Efek jQuery Tanpa Edit HTML di Blog akan sama sama kita bahas. saya Menemukan Menu Tab View yang caem ini dari infodariom beberapa waktu lalu saat Blogwalking, dan Tertarik untuk memposting nya karena memiliki Beberapa Kelebihan Tersendiri, dan keunggulan dari Menu Tab View Ini diantaranya :

» Tampilanya akan Mengikuti Gaya dari Template Kita, yaitu Bentuk dan Warnanya, jadi jika tidak di kostumasi terkait warna dan bentuknya pun sudah bisa sesuai dan serasi dengan Blog kita.

» Mempunyai Efek jQuery, atau efek smooth saat kita mengalihkan Menu Tab, yang tentu menambah nilai keindahan untuk Blog kita.

» Cara Instalasi atau Pemasanganya yang sangat Mudah karena kita mengaturnya Hanya lewat Tata Letak, yang tidak Perlu Ribet Menyisipkan script ke dalam Satu Widget HTML/JavaScript.

» Tidak Memerlukan embel embel atau tambahan CSS atau script untuk dimasukkan di Edit HTML.

 

DEMO
 

Berikut Cara Membuat Menu Tab View keren dengan Efek jQuery :

» Login ke Blogger - masuk Tata Letak - Lalu Tambah Widget HTML/JavaScript, masukkan script berikut :

<style type="text/css"> .tabber { padding: 0px !important; border: 0 solid #bbb; } .tabber h2 { float: left; margin: 0 1px 0 0; font-size: 12px; padding: 3px 5px; border: 1px solid #bbb; margin-bottom: -1px; overflow: hidden; position: relative; background: #0000FF; cursor:pointer; -moz-border-radius:5px 5px 0 0; border-radius:5px 5px 0 0; } html .tabber h2.active { background: #000000; border-bottom: 1px solid #fff; } .tabber .widget-content { border: 1px solid #bbb; padding: 10px; background: #fff; clear:both; margin:0; } .codewidget, #codeholder { display:none; { </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script> <script type="text/javascript" src="http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#codeholder').bloggerTabber ({ tabCount : 3 }); }); </script><!-- Jangan hapus kode dibawah, agar widget bisa berfungsi --><div id='codeholder'> <a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank"></a></div>

» Lalu Simpan tanpa memberi judul sehingga akan Terlihat Seperti Gambar Beikut :

» Untuk Memasukkan widget ke dalam  Menu Tab view sobat Tinggal Menempatkan Di bawahnya.
Sekian dari saya semoga bermanfaat - Terima kasih.