Navigatable Box #2 (Modified by Own)

Hai, teman-teman! Hari ini, aku mau bagi tutorial tentang secret box, hehe... Tapi, kali ini sedikit berbeda karena ini adalah hasil modifikasi owner alias aku alias Tiara XD Mau lihat seperti apa? Klik di sini!

Gimana, keren nggak? XD Kalo tertarik, silahkan simak langkah-langkahnya dengan cermat, yaak!

Design Templ. (Denim, Simple, Picture Window, etc.)

• Dasbor > Tata Letak > Add A Gadget > HTML/Javascript
• Pastekan di kolom HTML tersebut dan save!

Classic Templ. (Blogskins)

• Dasbor > Template
• Pastekan kode secret box pada sidebar blog kamu.
• Copy this codes

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

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

a.navi{
display:inline-block;
-webkit-transition:All 0.8s ease ;
-moz-transition:All 0.84s ease ;
-o-transition:All 0.8s ease ;
padding:5px;
width:20px;
text-decoration:none;
font-family:Annoying Kettle;
font-size:7px;
text-transform:uppercase;
color: #000000;
background: #FFFFFF;
border: solid #9E9E9E 2px;
text-align:center;
opacity: 1;
border-top-left-radius: 35px;
border-top-right-radius: 35px;
}
a.navi:hover{
background: #ccc;
letter-spacing: 3px;
background-position:50% 30%;
background-size:80px;
letter-spacing:3px;
color: #fff;
-webkit-transition:All 1.5s ease;
-moz-transition:All 1.5s ease;
-o-transition:All 1.5s ease;
box-shadow:inset 0 50px 8px #fff;
}
a.navi1{
display:inline-block;
-webkit-transition:All 0.8s ease ;
-moz-transition:All 0.84s ease ;
-o-transition:All 0.8s ease ;
padding:5px;
width:20px;
text-decoration:none;
font-family:Annoying Kettle;
font-size:7px;
text-transform:uppercase;
color: #fff;
background: #9E9E9E;
text-align:center;
opacity: 1;
border-bottom-right-radius: 35px;
border-bottom-left-radius: 35px;
}
a.navi1:hover{
background: #ccc;
letter-spacing: 3px;
background-position:50% 30%;
background-size:80px;
letter-spacing:3px;
color: #fff;
-webkit-transition:All 1.5s ease;
-moz-transition:All 1.5s ease;
-o-transition:All 1.5s ease;
box-shadow:inset 0 50px 8px #fff;
}
 </style>
<div id="adv2" class="adv2">
<center><style>
.babo{background:url(yourbackground);padding:5px;border:3px solid #aaa;text-align:center;width:250px;color:#555;}
.babo:hover{border:3px solid #000;}

a.navi{
display:inline-block;
-webkit-transition:All 0.8s ease ;
-moz-transition:All 0.84s ease ;
-o-transition:All 0.8s ease ;
padding:2px;
width:30px;
text-decoration:none;
font-family:Annoying Kettle;
font-size:7px;
text-transform:uppercase;
color: #000000;
background: #FFFFFF;
border: solid #9E9E9E 2px;
text-align:center;
opacity: 1;
border-top-left-radius: 35px;
border-top-right-radius: 35px;
}
a.navi:hover{
background: #ccc;
letter-spacing: 3px;
background-position:50% 30%;
background-size:80px;
letter-spacing:3px;
color: #fff;

-webkit-transition:All 1.5s ease;
-moz-transition:All 1.5s ease;
-o-transition:All 1.5s ease;
box-shadow:inset 0 50px 8px #fff;
}
a.navi1{
border: solid #666 2px;
display:inline-block;
-webkit-transition:All 0.8s ease ;
-moz-transition:All 0.84s ease ;
-o-transition:All 0.8s ease ;
padding:2px;
width:30px;
text-decoration:none;
font-family:Annoying Kettle;
font-size:7px;
text-transform:uppercase;
color: #fff;
background: #9E9E9E;
text-align:center;
opacity: 1;
border-bottom-right-radius: 35px;
border-bottom-left-radius: 35px;
}
a.navi1:hover{
background: #ccc;
letter-spacing: 3px;
background-position:50% 30%;
background-size:80px;
letter-spacing:3px;
color: #fff;
-webkit-transition:All 1.5s ease;
-moz-transition:All 1.5s ease;
-o-transition:All 1.5s ease;
box-shadow:inset 0 50px 8px #fff;
}

#wnsb img{max-width:245px;}

 </style>
<div class="babo">
<a class="navi" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('1').innerHTML" >1</a>
<a class="navi1" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('2').innerHTML" >2</a>
<a class="navi" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('3').innerHTML" >3</a>
<a class="navi1" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('4').innerHTML" >4</a>
<a class="navi" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('5').innerHTML" >5</a> </div>

<div id="wnsb" style="width:250px;color:#aaa; padding:5px;border:3px solid #aaa;border-top:none;font:11px arial; letter-spacing:1px;background:url(your url);">
<img style="width:120px;" src="your image"><br><br>
this is own words :33
</div>

<div id="1" style="display: none;">
navigation one. replace something here...
</div>

<div id="2" style="display: none;">
you can put some codes here or anything what you want.
</div>

<div id="3" style="display: none;">
i don't know. replace this with own words or anything.
</div>

<div id="4" style="display: none;">
replace anything here! ^^

<div id="5" style="display: none;">
bye-bye. sayonara. replace this words.

</div>
</center>

• Save!

Silahkan edit-edit sendiri, ya, hehe.. Bisa dari kode warnanya hingga backgroundnya! ^^
Want to repost? Full credit to me! Thanks! ^^