Membuat Secret Box Like Mine

Sore readers xD barusan aku nerima sms dari arum, dia request tutorial menambahkan secret box kayak di blog aku;3 Wah, makasih ya udah request;) Kalo gatau apa itu secret box, coba liat di bagian atas sidebar blogku? Ada kan? Mau juga yang kyk gitu? Follow these steps;3

1. Sign in akun blog.

2. For blogskin => Template > Edit html > Taruh kode di bawah di bagian sidebar kamu aja ya.

For Template Designer/Denim => Tata Letak > Add a Gadget > Html/Java Script.

3. Copy kode di bawah, dan paste di ruang yang kamu buka tadi.

<style>
.adv2 ul{background:url(http://i.imgur.com/LsUfp.png);padding:5px;border:1px dashed #DDDDDD;text-align:center;width:250px;color:#555}

.adv2 p{padding:5px;text-align:left;width:250px;color:#555;}

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;
cursor:pointer;background:#fff;
width:20px;
text-decoration:none;
border:1px dashed #BBBBBB;
border-radius:33px;
color:#555;
display:inline-block;
text-align:center;
}

a.tablo:hover{background:#ccc;color:#fff;}

 </style>
<div id="adv2" class="adv2">
<ul><a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('1').innerHTML" >1</a>
<a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('2').innerHTML" >2</a>
<a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('3').innerHTML" >3</a>
<a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('4').innerHTML" >4</a> </ul>

<div id="wnsb" style="width:250px;">
Navigate around. Replace this with anything/your own words.
</div>

<div id="1" style="display: none;">
This navigation no.1 , remove this and replace with anything you want to be here. 
</div>

<div id="2" style="display: none;">
You can also put cbox codes here. Just anything without messing the codes.
</div>

<div id="3" style="display: none;">
This navigation no.3
</div>

<div id="4" style="display: none;">
This navigation no.4 </div></div>

4. Itu kode original dari kak wanaseoby loh, harus di edit2 dulu sesuai keinginan kamu dan sesuai tema/warna blog kamu;3 Nah, biar gasulit, kamu bisa edit kode itu dengan live preview, klik disini.
5. Udah selesai di edit? Save Changes:)

Cr: Wanaseoby