Navigate Box (Mine Version)

بِسْــــــــــــــــــمِ ﷲِالرَّحْمَنِ الرَّحِيم

       ► Telah direquest oleh Sis polo. 

      ► Yang button atas tu maknanya yang ini lah .

      ► Before we start the tutorial, I want to credit to Sis Wana for the codes. 

- Copy kod bawah ni, kod ni saya telah edit supaya nampak macam saya punya.

<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:230px;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:230px;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 #A2C898;
color:#A2C898;}

#wnsb img{max-width:235px;}
 </style>
<div class="babo">
<a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('1').innerHTML" >STATUS</a>
<a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('2').innerHTML" >CBOX</a>
<a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('3').innerHTML" >POST</a>
</div>

<div id="wnsb" style="width:230px;background-position:center left;background-repeat:no-repeat;background-image: url(http://i588.photobucket.com/albums/ss327/romanticmorning/blockquote.png);color:#888; padding:5px;border:2px dotted #F2F4F2;border-top:none;font:11px arial; letter-spacing:1px;">
Klik mana yang awak nak. Bersesuaian dengan tajuk lah.
</div>

<div id="1" style="display: none;">
<marquee><img style="padding:0px;border:0px;" src="http://media.tumblr.com/tumblr_m2hcitnNZ61qdlkyg.gif"\> <b>STATUS :</b> Mencari follower ke 1000. Haa siapa tu? Lambat lagi ke? ;)
</marquee>
</div>

<div id="2" style="display: none;">
<center><b>RULES :</b> Tekan Enter sekali aje, sebab dia kena refresh</center>
<center>CBOX CODE or anything</center><center><a href="https://twitter.com/NiniesF" class="twitter-follow-button">Follow @NiniesF</a><script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
</div>

<div id="3" style="display: none;">
<center>
<div style="border:1px solid #efefef;background:transparent; width:198px; overflow-x:hidden; overflow-y:scroll;padding:5px; height:100px;text-align:left; ">
<bloggerpreviousitems>
<li><a  href="<$BlogItemPermalinkURL$>">
<$BlogPreviousItemTitle$></li>
</a>
</BloggerPreviousItems>

      Pergi ke  http://htmledit.squarefree.com/ dan pastekan kod atas tu di dalam nya. Edit mana yang patut. Tak tau nak edit macam mana? Bagitahu saya, okey? Lepas tu, kalau dah siap, paste kan di bahagian sidebar. Sukahati lah bagi blogskin. Tapi bagi template designer, paste di dalam ruangan HTML/JAVASCRIPT . Senang, kan? Nak lagi senang jangan tukar apa-apa. Haha LOL :P.

      Please, comment if you used this tutorial. Thanks :3 
Jadi besar pula widht entry saya. Maybe sebab banyak coding kut :'(

---

THANKS FOR READING. DROP YOUR COMMENT PLEASE?

---