Cara Membuat Widget Tab View Tanpa Edit HTML

Tentu kamu tau kan apa itu Widget Menu Tab View ? Belum tahu ? ini nih yang namanya menu tab view, silakan lihat gambarnya dibawah.. atau kamu bisa melihat menu tab view pada blog ini..

Oke, sekarang saya jelaskan kenapa postingan ini saya beri judul menu tab view termudah.. yap, karna yang bakal saya bahas disini adalah widget menu tab view termudah yang saya gunakan.. tidak ribet pemasanganya seperti menu tab view kebanyakan yang biasa dibahas di luar sana.. yang membahas tentang memasang menu tab view dengan CSS dan jQuery, bla bla bla.. lalu kamu disuruh memasang kode2 yang akan di masukan ke dalam menu tab view tersebut satu persatu secara manual.. ribet banget bukan ?
Naah.. cara membuat menu tab view ini lebih mudah pemirsaa.. kamu cukup menambahkan kode menu tab view dengan cukup menambahkan widget baru (Add Gadget).

1. Login Blogger anda.
2. Kemudian Pilih Dasboard > Tata Letak > Add Gadget > Pilih HTML/Java Script
3. Kemudian Copy Kode dibawah ini :

<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: #e0e0e0; cursor:pointer; -moz-border-radius:5px 5px 0 0; border-radius:5px 5px 0 0; } html .tabber h2.active { background: #fff; 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.mediaimpressive.blogspot.com" target="_blank"></a><p> Get this <a href="http://mediaimpressive.blogspot.com" target="_blank"><blink>widget</blink></a></p> </div>

4. Paste Kodenya dan Simpan.

Apabila Anda sudah menambahkan Kode Menu Tab View di atas, maka kamu cukup mengatur widget - widget mana yang ingin anda masukan ke Menu Tab View, Dan cara penambahannya cukup simple dan mudah, taruh atau geser widget yang ingin anda tambahkan ke bawah Widget Menu Tab View tsb. silakan lihat gambar di bawah ini:

 

Sekian dan Selamat Mencoba...

• Tweet
• Share
• Share
• Share
• Share

Info Admin Media Impressive

Terima Kasih Sebelumnya Kepada Pembaca Artikel Media Impressive, Bilamana Ada Yang Kurang Mengerti Didalam Artikel Diatas, Tanyakanlah Di Kolom Komentar. Dan Bagi Anda Yang Ingin MengCopy Paste Artikel Media Impressive Diharapkan Menyertakan Sumber.

Related Post