Tutorial : Multiple Tab ( Blogskin )

Assalamualaikum . Hari ni aimi nak buat tutor macam mana nak buat multiple tab bagi pengguna blogskin . Pengguna blogskin kene pandai godek - godek code sikit kalau nak macam template punya . Hehehe . So , hari tuh aimi berjaya buat dan aimi nak share kat semua orang . INI TUTOR AIMI SENDIRI ye ? Tolong credit kalau nak copy or korang dah berjaya . Thanks :D Okay , ikut step bawah . 

contoh

1. Dashboard > Template

2. Prees F3 dan cari code </style>

3. Then , copy code di bawah .

<style>
.adv2 ul{background:url(http://i.imgur.com/LsUfp.png);padding:5px;border:1px dashed #DDDDDD;text-align:center;width:250px;color:#999}
.adv2 p{padding:5px;text-align:left;width:220px;color:#999;}
a.tablo{-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background:#fff;
width:20px;
text-decoration:none;
border:1px dashed #BBBBBB;
border-radius:2px;
color:#555;
display:inline-block;
text-align:center;
}
a.tablo:hover{background:#ccc;color:#999;}
</style>
<div id="adv2" class="adv2">
<center>
<style>
.babo{background:url(http://i.imgur.com/idEbA.png);padding:5px;border:2px dotted #F2F4F2;text-align:center;width:220px;color:#999}
a.tablo{
background:#ddd;
width:50px;
display:inline-block;
text-align:center;
color:#888;
margin-bottom:1px;
font:11px arial;
text-transform:uppercase;
letter-spacing:2px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
padding:1px;
border:1px solid #999;
}
a.tablo:hover{background:#FFffff;
border:1px solid #75a5a7;
color:#75a5a7;}
#wnsb img{max-width:225px;}

4. Paste di atas code </style>
5. Ehh , belum habis lagi . Buat tajuk sidebar baru & copy code bawah ni .

<div class="babo">
<a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('1').innerHTML" >TAJUK 1</a>
<a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('2').innerHTML" >TAJUK 2</a>
</div>
<div id="wnsb" style="width:220px;background-position:center left;background-repeat:no-repeat;background-image: url(URL GAMBAR);color:#888; padding:5px;border:2px dotted #F2F4F2;border-top:none;font:11px arial; letter-spacing:1px;">
AYAT KORANG</div>
<div id="1" style="display: none;">
<center>
ISI TAJUK SATU</div>
<div id="2" style="display: none;">
<center>
ISI TAJUK DUA</div><br>

6. Paste code di bawah tajuk sidebar korang
7 . Preview & save .

merah : tukar ikut citarasa korang
gambar boleh ambil dekat >SINI<