Cara Membuat Simple Tabber di Sidebar

Untuk memasang simple tabber di sidebar ikuti tutorial berikut ini

1. Login dulu ke blogger atau klik di sini
2. Pilih template
3. Pilih edit template
4. Centang Expand widget template
5. Copy script di bawah ini dan letakkan di atas kode ]]></b:skin>

widget-wrapper2{
    border:1px solid #494e52;
    background-color:#636d76;
    padding:10px;
}
  
.widget-tab {
    background:#c9dbdd;
    font-family:Arial,Helvetica,sans-serif;
    padding:5px !important;
} 

.widget-tab ul {
    margin:0px;
    padding:0px 5px 0 5px;
}

.widget-tab ul li {
    list-style:none;
    border-bottom:1px dotted #a4bddf;
    padding-top:4px;
    padding-bottom:4px;
    font-size:12px;
}

.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTLnwyAxOim29BwrDoPd41ZdegQWywa1StP7oA39uaP_Pr86soJPTppSgOpAd95Ju-1BJSx5MiqnJgecCD7WNuQfFvrtPQsr4O3Zxrge5lHhInaZOgsFPRvKk8Zd3YTmFQ1av3nhQ7NNY/s1600/sidebar.png) repeat-x scroll left bottom !important;
    color:#282E32 !important; 
}
  
ul.tab-wrapper {
    margin:0px; padding:0px;
    margin-top:5px;
    margin-bottom:6px;
}
  
ul.tab-wrapper li{
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixUyUGF9Nnzkxkr6FjKpkUJtcWEoypsmzFyAnFFqn8Gy90c_lfyUBPAJxyIX19CFEyzbFohbB-ungpQEyM_4-EFv12gdKz-eemlhOno542QhlcO1l0kMLpszH3g9V8wQekW1Cuk2Pe9ks/s1600/menu-m1.png) repeat-x top;
    color:#FFF;
    cursor:pointer;
    display:inline;font-family:Verdana,Arial,Helvetica,sans-serif;
    font-size:9px;
    font-weight:700;
    line-height:2em;
    list-style-image:none!important;
    list-style-position:outside!important;
    list-style-type:none!important;
    margin-right:1px;
    text-align:center;
    text-decoration:none;
    text-transform:uppercase;
    padding:8px 14px
}

6. Copy script di bawah ini dan letakkan di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
    var starttab=0;
    var endtab=3;
    var sidebarname=&quot;sidebar&quot;;
</script>

<script src='http://johnytemplate.googlecode.com/files/tabber.js' type='text/javascript'/>

7. Dan yang terakhir simpan/save template.

Selamat mencoba