Multi Tabbed Tabview Widget Blogs

Tutorial kali ini kita akan belajar lagi tentang bagaimana menambahkan elemen halaman atau kolom full widget pada sidebar template blogger dengan menggunakan CSS, XHTML dan JavaScript hanya dalam Empat 4 langkah simple, Berikut sebuah screenshot simple hasil dari tuturial ini :

Tampilannya mirip Tab View Sederhana yang triknya pembuatannya pernah di bahas sebelumnya hanya saja pembahasan tabvie ini lebih simple dan mudah. Dan saya namakan Advance Multi Tabbeg Tabview, ok langsung aja bekerja ok :

Sebelumnya backup terlebih dahulu blog anda

Langkah pertama : masuk di blog anda Klik layout – Edit HTML, dan klik Expand your widgets template

Langkah kedua : cari kode seperti ]]></b:skin> kemudian copy paste kode script dibawah ini sebelum atau di atas kode ]]></b:skin>

/*--------Tabber ---------------------------------*/
#tabsidebar-wrapper{
width: 400px;
/* This will manage the width of the tab content. Usually this be same as your sidebar*/
float: left;
margin: 0px 0px 0px 0px;
}
.tabberlive .tabbertabhide {
display:none;
}
.tabber {display:none;}
/*--------------------------------------------------
.tabber = before the tabber interface is set up
.tabberlive = after the tabber interface is set up
--------------------------------------------------*/
.tabberlive {
margin-top:0em;
margin-bottom:0em; 
}
/*--------------------------------------------------
ul.tabbernav = the tab navigation list
li.tabberactive = the active tab
--------------------------------------------------*/
ul.tabbernav
{
margin:0;
padding: 3px 0;
margin-bottom: 5px;
font: bold 12px Verdana, sans-serif;
}
ul.tabbernav li
{
list-style: none;
margin: 0;
display: inline;
}
ul.tabbernav li a
{
padding: 3px 0.5em;
margin-left: 3px;
border: 2px solid #000;
background: #000;
text-decoration: none;
font-size : 13px;
font-weight: bold;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px
}
ul.tabbernav li a:link { color: #FFFFFF; }
ul.tabbernav li a:visited { color: #667; }
ul.tabbernav li a:hover
{
color: #000;
background: RED;
border-color: #000;
}
ul.tabbernav li.tabberactive a
{
color: #000;
background-color: #fff;
border-bottom: 2px solid #000;
}
ul.tabbernav li.tabberactive a:hover
{
color: #000;
background: RED;
border-bottom: 2px solid #000;
}
/*--------------------------------------------------
.tabbertab = the tab content
Add style only after the tabber interface is set up (.tabberlive)
--------------------------------------------------*/
.tabberlive .tabbertab {
padding:0px;
border-top:0;
/* If you don't want the tab size changing whenever a tab is changed
you can set a fixed height */
/* height:250px; */
/* If you set a fix height set overflow to auto and you will get a
scrollbar when necessary */
/* overflow:auto; */
}
/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
display:none;
}
.tabberlive .tabbertab h3 {
display:none;
}

Langkah ketiga : cari kode </head> kemudian copy  kode dibawah ini dan paste tepat dibawah atau setelah kode </head>

<script src='http://sites.google.com/site/suharjo21/file-cabinet/www.suharjo21.blogspot.com.js' type='text/javascript'/>

Langkah ke empat : cari kode <div id='sidebar'> atau <div id='sidebaratas'> atau apapaun sidebarnya,  kemudian letakkan kode tepat dibawah <div id='sidebar'> :

<div id='tabsidebar-wrapper'>
<div class='tabber' id='tab1'>
<div class='tabbertab'>
<b:section class='sidebaratas' id='tabbertab1' preferred='yes' showaddelement='yes'/>
</div>
<div class='tabbertab'>
<b:section class='sidebaratas' id='tabbertab2' preferred='yes' showaddelement='yes'/>
</div>
<div class='tabbertab'>
<b:section class='sidebaratas' id='tabbertab3' preferred='yes' showaddelement='yes'/>
</div>
</div>
</div>

Jadi kodenya seperti ini terlihat

<div id='sidebaratas-wrapper'>
<div id='tabsidebar-wrapper'>
<div class='tabber' id='tab1'>
<div class='tabbertab'>
<b:section class='sidebaratas' id='tabbertab1' preferred='yes' showaddelement='yes'/>
</div>
<div class='tabbertab'>
<b:section class='sidebaratas' id='tabbertab2' preferred='yes' showaddelement='yes'/>
</div>
<div class='tabbertab'>
<b:section class='sidebaratas' id='tabbertab3' preferred='yes' showaddelement='yes'/>
</div>
</div>
</div>

Dan klik Save Templates
Sekarang pergi ke Edit HTML => Page Elements, dan terlihat gambar seperti dibawah ini

 Selesai sudah… selamat mencoba, jangan lupa komentarnya