Find What You Need

14 Mar 2010

Membuat Tab Di Kolom Sidebar Dengan Javascript

  Teknik membuat Tab di kolom sidebar ini menggunakan Javascript dan jquery. Kelebihan menggunakan javascript dan jquery ini adalah , waktu kita berpindah ke tab yang lain dilakukan dengan gerakan yang halus atau lembut . Jadi terlihat lebih luwes .


Selain itu juga supaya kolom sidebar di template yang kita pakai nantinya tidak terlalu berjajar kebawah, jika kita banyak memasang widget ataupun gadget, karena dengan menggunakan teknik tab ini dalam satu kolomnya kita bisa memasang 3-4 widget, itupun tergantung dari lebar kolom template yang kita pakai. Coba perhatikan gambar diatas, dalam 1 kolom terdiri dari 4 gadget yang berbeda.

Jika anda ingin membuatnya bisa mnegikuti cara dibawah ini :


Sigin Di draft Blogger
Dalam Dasbor masuk Tata Letak --> Edit HTML

   1. Memasukkan kode javascript dan jquery .

Copy semua kode javascript dan jquery di bawah ini :

<script src='http://sites.google.com/site/blogsbaru/jquery1.2.6min.js ' type='text/javascript'></script>
<script type='text/javascript'>
var starttab=0;   /* Tab pertama */
var endtab=3;   /* Jika ingin mengurangi / menambah Tab, rubah nilainya */
var sidebarname="sidebar1";  /* Ganti dengan nama kolom sidebar anda */
</script>
<script src='http://sites.google.com/site/albaniyu/bloggertabv1.0-min.js' type='text/javascript'></script>
</script type='text/javascript'>

Simpan diatas kode ini </head>
Kemudian simpan dulu .

   2. Memasukkan Kode CSS .

Setelah itu masukkan kode CSS untuk membuat Tab, copy kode di bawah :

/*--- Mulai Tab ----*/

.widget-wrapper2{ border:1px solid #7f7f7f;
background-color:#999999;
padding:8px;}

.widget-tab {-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-bottomleft:5px;
-webkit-border-radius-bottomright:5px;
-webkit-border-radius-topright:5px;
background:#999999;
border:1px solid #7f7f7f;
font-family:Arial,Helvetica,sans-serif; padding:15px !important; }

.widget-tab ul {margin:0px; padding:0px 20px 0px 20px;
border-bottom:1px dashed #fff }

.widget-tab ul li {list-style:none; border-bottom:1px solid #7f7f7f;
padding-top:10px; padding-bottom:10px;
font-size:13px; }

.widget-tab ul li:last-child{ border-bottom:none; }
.widget-tab ul li a { text-decoration:none; color:#3e4346; }

.widget-tab ul li a small { color:#8b959c; font-size:9px;
text-transform:uppercase;font-family:Verdana,Arial,Helvetica,sans-serif; position:relative;left:4px;top:0px;}

.tab-content ul li a:hover{color:#a59c83;}
.tab-content ul li a:hover small{color:#baae8e;}

.active-tab{background:#999999 url(http://sites.google.com/site/blogsbaru/tabinactivebg.gif) repeat-x scroll left top !important;
border-color:#CFCFCF #CFCFCF #FFFFFF #CFCFCF !important;
border-style:solid !important;border-width:1px 1px 2px !important;
color:#fff !important;}

ul.tab-wrapper{ margin:0px; padding:0px; margin-top:5px; margin-bottom:6px; }

ul.tab-wrapper li {-webkit-border-radius-topleft:5px;
-webkit-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background:#999999 url(http://sites.google.com/site/blogsbaru/tabtopbg.gif) repeat-x scroll left top;
border:1px solid #7f7f7f;color:#3e4346;
cursor:pointer; display:inline;font-family:Verdana,Arial,Helvetica,sans-serif; font-size:9px;
font-weight:bold;
line-height:2em; list-style-image:none !important;list-style-position:outside !important;list-style-type:none !important;margin-right:1px;
padding:8px 14px;text-align:center;
text-decoration:none;text-transform:uppercase; }

/*------ Akhir Tab ----*/

Setelah anda copy, simpan atau paste diatas kode ini </b:skin>
Kemudian jangan lupa disimpan simpan .

Jika anda ingin tampilan kolomnya berbentuk kotak alias tidak bersudut lancipdi browser firefox dan opera, tinggal menghapus semua kode berikut
-moz-border-radius dan -webkit-border-radius

Pada tata letak, di kolom sidebar kita tinggal memasukkan apa saja gadget yang ingin ditambahkan, dan jangan bingung dulu bila tampilan pada tata letak,kolom nya tampil seperti biasa yaitu berjajar kebawah. Cobalah dulu masukkan gadget apa saja pada kolom sidebar tsb, baru kemudian lihat hasilnya dihalaman blog kita .


Belajar Bersama

**** Semoga Bermanfaat ****

Untuk mendapatkan informasi dan postingan terbaru dari blog ini, silahkan ketikkan email anda di form berlangganan. Gratiiiis...

Berlangganan Lewat RSS

12 komentar:

R. Dhanny.Seven Pada 2 September 2010 00.35 mengatakan...

:))

ekosusilo Pada 10 September 2010 19.55 mengatakan...

Sy coba ga bs :(

FARIZ ALMIZZANI (Zhalys) Pada 16 Januari 2011 12.54 mengatakan...

saya mencobanya tetapi tdk berhasi....
tolong di jelaskan lebih terinci....
kalo bisa berikan contohnya....
mkasi...

Albani Pada 10 Maret 2011 14.51 mengatakan...

@ Mas Fariz

Contohnya seperti anda lihat di blog ini..

welcome to RIDHO'S BLOG Pada 10 Maret 2011 23.30 mengatakan...

bang bagaiman cara menambah icon di blogger,yang sepertitepat di atas ikln feedburner,kalau mau

welcome to RIDHO'S BLOG Pada 10 Maret 2011 23.31 mengatakan...

bang bagaiman cara menambah icon di blogger,yang sepertitepat di atas ikln feedburner,kalau mau tolong kirimkan ke email rydestoper@gmail.com

Albani Pada 11 Maret 2011 13.15 mengatakan...

@Ridho's

Maksudnya icon yang mana nich..

juma Pada 4 April 2011 01.31 mengatakan...

cara mengganti nama di menu sidebar

bdangkal Pada 19 April 2011 10.21 mengatakan...

saya akan coba mudah-mudahan berhasil :)

albaniyu Pada 19 April 2011 13.30 mengatakan...

@bdangkal..

terima kasih atas kunjungannya..
sering2 aja mampir disini..:D

DISCANDLE Pada 30 November 2011 09.18 mengatakan...

kok belum update postingannya oom.:))

Discandle Pada 30 November 2011 09.22 mengatakan...

Tak tunggu update postingannya. Bisa share cara membuat posisi tampilan dari halaman home berubah tempat widget atau tampilan gambarnya berpindah posisi ketika masuk halaman posting atau sub page

Posting Komentar

Biar tambah semangat nulis blognya,ketikkan saran dan komentar. Walaupun singkat tetapi saran dan komentar yang anda berikan sangat berarti buat blog ini.

Ketikkan Karakter Jika Ingin Memasang Emoticon.
:)):)];));;):D;):p:((:):(:X=((:-o:-/:-*:|8-}~x(:-tb-(:-Lx(=))

Artikel Yang Lainnya

 

My Best Friend

Mengenai Saya

Foto saya
Sebagai tempat belajar dan menyimpan arsip jika saya membutuhkannya suatu waktu, dan semoga menjadi ilmu yg Bermanfaat bagi Orang yang membacanya .

Visitor

free counters

Belajar Bersama Copyright © 2009 Template Wanaking Di Desain Ulang Oleh Albaniyu | Blogger Template