Navigate Able Box Like Mine #2

        Percuma ya kayaknya aku ngepost ini, soalnya udah pada tau dari page source aku -_- But it's okaay, because this is for My little sister, Miku.. the most honest blogger*applause* LIVE PREVIEW

• Letakkan kode ini di HTML/JavaScript, maupun di sidebarmu.

<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">

<center><style>

.babo{background:url(http://i.imgur.com/idEbA.png);padding:5px;border:3px solid #F2F4F2;text-align:center;width:250px;color:#555}

a.tablo{

-webkit-transition: all 0.3s 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:#F2F4F2;

width:20px;

text-decoration:none;

border:3px solid #fff;

color:#fff;

box-shadow:1px 1px 3px #eee;

border-radius:33px;

display:inline-block;

text-align:center;

font:16px calibri;

}

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

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

 </style>

<div class="babo">

<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> </div>

<div id="wnsb" style="width:250px;color:#ccc; padding:5px;border:3px solid #F2F4F2;border-top:none;font:11px arial; letter-spacing:1px;">

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;">

The third page

</div>

<div id="4" style="display: none;">

This forth page

</div>

</center>

• Ubah kode tadi sesukamu, tapi jangan di hapus, kamu ganti Url background sama kode warnanya saja.

Email ThisBlogThis!Share to XShare to FacebookShare to Pinterest