Cara Membuat Tab View Otomatis di Sidebar

 By: Putra IT

Berawal pada saat saya mencoba mengotak-atik/mengedite beberapa template yang saya temukan, dan tanpa sengaja saja melihat template yang namanya 'Revive-Red', dan tidak sengaja saya menemukan tampilan 'Tab View' pada template tersebut. dan akhirnya saya berniat mencobannya pada template saya yg masih belum memiliki 'Tab View' dibagian sidebar saya.dan saya mencoba untuk membuatnya, Eh,.. akhirnya saya bisa memsangnya secara otomatis..

Maka dari itu, disini saya ingin sekali memberikan tutorial 'Cara Membuat Tab View Otomatis di Sidebar',..

Dan jika Sobat Masih penasaran dengan tampilan 'Tab View' nya seperti apa?? anda bisa lihat langsung pada template 'Revive-Red' disini. sobat tinggal perhatikan Pada bagian sidebarnya. nah seperti itu yang akan kita buat di sidebar kita masing-masing.

Baiklah langsung saja kelangkah pembuatannya :

1. Login ke akun blogspot,
2. Klik Design/Rancangan >> Edit HTML >> Klik Expand Templates Widget,
3. Lalu cari kode : ]]></b:skin>  ,  lalu copy kode berikut ini  tepat diatasnya :

    .widget-wrapper2{
    border:1px solid #494e52;
    background-color:#F1EFEF;
    padding:8px;
    }
    .widget-tab {
    font-family:Arial,Helvetica,sans-serif;
    }
    .tab-content ul li a:hover {
    color:#a59c83;
    }
    .tab-content ul li a:hover small {
    color:#baae8e;
    }
    .active-tab{
    color:#FFF !important;
    background:#BF1E2D !important;
    padding-top:10px;
    -moz-border-radius:10px 10px 0 0;
    border:5px solid #171615;
    border-bottom:none;
    }
    ul.tab-wrapper {
    margin:0px;
    padding:0px;
    margin-top:5px;
    margin-bottom:-2px;
    }

    ul.tab-wrapper li {
    -moz-border-radius:10px 10px 0 0;
    border:5px solid #171615;
    border-bottom:none;
    background:#282828;
    color:#FFFFFF;
    cursor:pointer;
    display:inline;
    font-family:Arial,Helvetica,sans-serif;
    font-size:13px;
    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 10px;
    text-align:center;
    text-decoration:none;
    }

4. Selanjutnya cari kode :  </head>  lalu copy code di bawah ini :  dan letakkan di atas kode :  </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
var starttab=0;
var endtab=2;
var sidebarname=&quot;sidebar&quot;;
</script>
<script src='http://introbloggerscripts.googlecode.com/files/bloggertabv1.0-min.js' type='text/javascript'/>

6. Terakhir Save Templates.. dan lihat hasilnya.

SELAMAT MENCOBA !!!