ASMAN COUNTER

Catatan Belajar Dari Kendawangan

  • RSS
  • Delicious
  • Facebook
  • Twitter

Twitter

Membuat Tab View dengan JQuery

Posted by AWAN THE KILL - -

Kemarin kita telah belajar dengan sangat mudah Membuat Widget di Halaman Yang di Inginkan Tapi sebelum itu kita telah belajar Membuat Menu Tab View Tiga Kolom  selain berfungsi mempercantik template blog kita, Menu Tab View juga menghemat ruang dari blog kita. 

Dan satu - satunya kelemahan dari Tab View Tiga kolom yang pernah kita pelajari kemarin adalah kesulitan dalam penempatan widget bawaan dari Blogger seperti LABEL ARSIP dan lain - lain. Nah untuk menambal kekurangan tersebut kita perlu membuat Tab View dengan JQuery. 

LANGKAH LANGKAH MUDAH MEMBUAT TAB VIEW DENGAN JQUERY
1. Seperti biasa login dulu ke blogger.
2. Masuk ke DASHBOARD
3. Klik RANCANGAN  lalu pilih EDIT HTML
4. Tambahkan kode CSS berikut diatas tag atau kode ]]></b:skin>
/* Tabbed Sidebar Widgets
--------------------------------- */
.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;
}
5. Kemudian tambahkan Script JQuery dibawah ini sebelum tag atau kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/> 
Perlu di ingat sudah terdapat script JQuery pada template kita artinya kita pernah tambahkan maka langkah nomor lima abaikan saja.
 6. Kemudian tambahkan  script berikut tepat dibawah script JQuery tadi:
<script type="text/javascript">
var starttab=0;
var endtab=2;
var sidebarname="sidebar1";
</script>
<script type="text/javascript" sc='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bloggertabv1.0-min.js.txt'></script>
Ganti  angka 2 yang berwarna biru dengan jumlah tab yang kita inginkan, awal tab dimulai dengan angka 0. Sedangkan sidebarname adalah sidebar id.
7. Selanjutnya cari kode HTML seperti dibawah ini :
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
Sekarang ganti tulisan berwarna biru dengan sidebar id dari tabber tab, yaitu sidebar 1
8. SELESAI 
Sekarang kita bisa menambahkan widget yang diinginkan pada bagian elemen halaman, pastikan setiap widget memiliki nama. Kemudian drag ke sidebar. Simpan dan simpan lihat hasilnya diblog kita. Silahkan lihat contoh hasilnya pada tab view dari blog ini.