Blog Tutorial membuat widget tab view keren

Blog Tutorial: Kali ini goperpus ingin berbagi cara mudah membuat widget tab view yang dinamis dan simple. Kenapa saya bilang mudah,dinamis dan simple? karena cara pasangnya sangat mudah, dan hasilnya'pun sangat dinamis dan simple. contohnya bisa anda lihat seperti gambar dibawah ini:

Okey,Jika anda tertarik dan ingin memasang widget tab view di situs/blog anda, silahkan ikuti langkah - langkah dibawah ini:
1 .Biasakan berdoa (menurut kepercayaan masing - masing) sebelum melakukan sesuatu.
2 .Login ke akun blog/situs yang anda kelola.
3 .Pilih Rancangan > Elemen Laman > Add gadget (HTML/JavaScript).
3 .Copy script dibawah ini dan paste pada gadget. Untuk meng'Copy silahkan tekan Select All Text, setelah itu tekan Ctrl + c di keybord anda.

 <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.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank"></a><p>Get this <a href="http://goperpus.blogspot.com" target="_blank"><blink>widget</blink></a></p></div

4 .Setelah anda paste, di kolom widget Html/Java Script, silahkan anda simpan/klik simpan/save.
5 .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:

6 .Setelah anda atus seperti gambar diatas, silahkan anda simpan/klik save template dan setelah itu silahkan anda lihat hasilnya.

Bagaimana hasilnya?? Mudah bukan???
Ket: tabCount : 3 , bisa anda ubah sesuai dengan selera anda. jika anda ingin memasukan 4 tab, silahkan ganti tabCount : 3 menjadi tabCount : 4

Demikain tutorial cara mudah membuat widget tab view keren,simple dan dinamis.
Jika artikel ini bermanfaat buat anda, silahkan anda share ke temen - temen anda.
Dan jangan lupa membaca artikel terkait lainya....



Terima Kasih dan Semoga Sukses.
widget blog,blog tutorial,blog seo,tips seo

Posted by pur on - Rating: 4.5

Title : Blog Tutorial membuat widget tab view keren
Description : Blog Tutorial : Kali ini goperpus ingin berbagi cara mudah membuat widget tab view yang dinamis dan simple . Kenapa saya bilang mudah,dinam...

Tweet