Sabtu, 07 Desember 2013
Membuat Tabber Tab Dengan Jquery 2
Postingan sebelumnya saya pernah mengetengahkan cara membuat tabber tab atau tab view dengan bantuan JQuery part 1. Namun tabber tab tersebut memiliki beberapa keterbatasan, diantaranya tidak dapat menambahkan beberapa widget umum seperti arsip blog, label, kecuali dengan memasukkan link Widget Blogger yang saya sebutkan tadi dengan cara manual. Sedangkan tabber tab dengan JQuery part 2 ini, kita dapat menembahkan fitur atau widget tadi dengan mudah, cukup dengan mendrag/ memindahkan widget kesidebar.
Sedang kegunaan tabber tab ini sangat membantu menghemat ruang sidebar blog anda. Karena sobat dapat memberikan fitur lebih pada wilayah tunggal sidebar tidak terbatas sekedar recent post, recent comment, random posts, tapi juga label/ kategori, daftar link, profil dan banyak lagi.
Nah tertarik ingin membuat tabber tab dengan JQuery part 2 ini? Silahkan ikuti tutorial berikut:
1. Setelah sig in pada account blogger anda>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML
2. Tambahkan kode CSS berikut diatas tag atau kode ]]></b:skin>
--------------------------------- */
.widget-wrapper2{
border:1px solid #494e52;
background-color:#636d76;
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:#FFFFFF url(http://sites.google.com/site/amatullah83/bg/tabcontentbg.gif) repeat-x scroll left bottom !important;
border:1px solid #CFCFCF;
font-family:Arial,Helvetica,sans-serif;
padding:15px !important;
}
.widget-tab ul {
margin:0px;
padding:0px 20px 0px 20px;
}
.widget-tab ul li {
list-style:none;
border-bottom:1px solid #d6dde0;
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:#FFFFFF url(http://sites.google.com/site/amatullah83/bg/tabtopbg.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:#282E32 !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:#191919 url(http://sites.google.com/site/amatullah83/bg/tabinactivebg.gif) repeat-x scroll left top;
border:1px solid #464C54;
color:#FFFFFF;
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;
}
Cataan CSS diatas masih bisa anda modifikasi lagi sesuaikan dengan blog anda. Untuk mengganti warna silahkan lihat tabel kode warna disini. Image lain yang bisa sobat gunakan 
3. Tambahkan Script JQuery berikut sebelum tag atau kode </head>
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js type=text/javascript/>
Catatan: Bagi anda yang pernah menambahkan atau ditemplate anda sudah terdapat script JQuery maka langkah kedua abaikan saja,
4. Kemudian tambahkan pula script berikut dibawah script JQuery tadi:
<script type="text/javascript">
var starttab=0;
var endtab=2;
var sidebarname="sidebar1";
</script>
<script type="text/javascript" src=http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bloggertabv1.0-min.js.txt></script>
Catatan: Tab dari kode diatas terdiri dari 3 tab. Untuk menyesuaikan jumlah tab dengan keinginan sobat, silahkan ganti angka 2 dengan jumlah tab yang sobat inginkan, awal tab dimulai dengan angka 0. Sedangkan sidebarname adalah sidebar id.
5. Selanjutnya cari kode HTML berikut:
<div id=sidebar-wrapper>
<b:section class=sidebar id=sidebar preferred=yes>
Sekarang ganti tulisan berwarna merah dengan sidebar id dari tabber tab, yaitu sidebar 1
6. Selesai.
Sekarang anda bisa menambahkan widget yang diinginkan pada bagian elemen halaman, pastikan setiap widget memiliki nama. Kemudian drag ke sidebar. Simpan dan simpan lihat hasilnya diblog anda.
Resource: Blogger Tuts
Ingin mencoba membuat tabber tab full widget tanpa menggunakan JQuery seperti screen shoot dibawah ini, bisa lihat disini
Tidak ada komentar:
Posting Komentar