Cara Membuat Simple Tabber di Sidebar

Cara Membuat Simple Tabber di Sidebar -  Pada prinsif kerja dan kegunaannya 11-12 dengan Tabview di sidebar. Hanya saja pembuatan Tabview terlalu rumit dan memakan waktu, sedangkan Simple Tabber cukup menambah widget yang akan kita tempatkan di Tabber Sidebar. Kita ga harus menambahkan scroll satu persatu pada widget karena widget yang masuk Tabber Sidebar ini akan otamatis ter-scroll.

Membuat Simple Tabber ini saya dapati di penggantian template Sport News karya Kang Dadang Herdiana. Hanya saja saya tambahkan gambar gif pada background widget tabnya, hingga tab aktif-nya berwarna biru menyala. Jika Tabber-nya ingin seperti Tabber Cinta Deras maka URL gambarnya sobat ganti dengan kode warna. Kode Warnanya silahkan buka disini.

Tengoklah gambar Tata Letak dalam Rancangan Widget, perhatikan penempatan widget Twitter, Populer, News, Archive dan Statistik. Sobat mau nambah widget ? Bisa sobat, asal pintar-pintar menerapkan Judul untuk Tabber-nya agar tidak menumpuk, maksudnya jangan dikasih judul yang terlalu panjang.

Kita langsung saja ke Cara Membuat Simple Tabber di Sidebar, silahkan ikuti langkah berikut :

1. Letakan kode dibawah ini diatas 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(https://lh5.googleusercontent.com/-f1sbxd32hf4/TYHwwcOup9I/AAAAAAAAAXg/0QJaVM2aKJE/s1600/tabcontentbg.gif) repeat-x scroll left bottom !important;
border:1px solid #CFCFCF;
font-family:Arial,Helvetica,sans-serif;
padding:15px !important;
height:250px; /* Tinggi yang diinginkan */
width:auto;
overflow:auto;
}
.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:#AB9466 url(http://3.bp.blogspot.com/-dqIN4bEirUI/UAJL8_KeOAI/AAAAAAAAFcc/H8MQN7wJWcc/s1600/navbg.png) 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://1.bp.blogspot.com/-RU9ZkczTIQQ/UAJEzpQxZbI/AAAAAAAAFb0/qn44d9Q4QdE/s1600/topbar1.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;
}

2. Lalu masukan lagi kode di bawah ini diatas kode </head>

<!-- jQuery Call -->
<script src='http://sabilajavascript.googlecode.com/files/JqueryMin.js' type='text/javascript'/>
<!-- End of jQuery Call -->
<script type='text/javascript'>
var starttab=0;
var endtab=3;
var sidebarname=&quot;sidebar&quot;;
</script>
<script src='http://sabilajavascript.googlecode.com/files/BloggerTab.js' type='text/javascript'/>

3. Kalau sudah Pratinjau mengatakan "Yes", Save / Simpan template.
Mudah khan ? Semoga bisa bermanfaat dan tentunya bisa diterapkan di blog sobat !

Catatan:

Bila ada yang masih remang-remang menangkap penjelasan ini, silahkan hubungi link pencerahan yang lebih signifikan disini.

Penulis : Raihan Marie Ramadhan ~ Sebuah blog yang menyediakan berbagai macam informasi

Artikel Cara Membuat Simple Tabber di Sidebar ini dipublish oleh Raihan Marie Ramadhan pada hari Sunday, July 15, 2012. Semoga artikel ini dapat bermanfaat.Terimakasih atas kunjungan Anda silahkan tinggalkan komentar.sudah ada 6 komentar: di postingan Cara Membuat Simple Tabber di Sidebar