Navigatable Box (Modified by Own)

Assalamualaikum~ 

Hai hai! Lama gak ketemu #CumaLimaHariDoankKok... Ya, hari ini, Fathya akan posting: Navigatable Box!!!

Readmore:

APA ITU NAVIGATABLE BOX?:

G tahu :| Fathya gak tahu apa itu Navigatable box. Karna belum pernah nyoba pake. Mau cari tahu tapi males #PakeBangetz Yang terlalu kepo, ikuti aja tutorialnya 

#CieeYangTerpancingUntukNyoba  Atau, kalian boleh lihat PREVIEWnya diSINI

BAGAIMANA CARA MEMBUAT NAVIGATABLE BOX?:

IKUTI STEPNYAAA!!!!!!!

#Selow aja bambank -_-

• 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!

CREDIT:

Ikuti dan Fathya akan melakukan hal yang sama! 👇👇👇
1.Follow Blog Fathya!
2.Sering-sering Comment!
3.Like teruuus! UwU