Menu For Beqiutors

Selasa, 25 Desember 2012

Navigation Bar

Faradina Fazira | 02.28 |


Live Preview

<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:#FFDDDD;width:50px;font:8px tt;padding:3px;text-decoration:none;color:#555; display:inline-block;text-align:center;}a.tablo:hover{background:#FF7171;color:#fff;}
::-webkit-scrollbar {background:#eee;width: 6px;height: 7px;}::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {background-color: #FFD7D7;}

@font-face {font-family:tt;src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');} </style><div style="width:250px;"><div style="background:url(http://1.bp.blogspot.com/-KwXmHRRyaMw/T57A0CeOEfI/AAAAAAAADD8/CM4-NMwYyFk/s1600/stripe_62c6ac6939f9a44527fb43f6f1c8ce64.png);width:250px;padding:2px;  "></div>
<center><a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('1').innerHTML" >Tab 1</a> <a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('2').innerHTML" >Tab 2</a> <a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('3').innerHTML" >Tab 3</a> <a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('4').innerHTML" >Tab 4</a></center><div style="background:url(http://1.bp.blogspot.com/-KwXmHRRyaMw/T57A0CeOEfI/AAAAAAAADD8/CM4-NMwYyFk/s1600/stripe_62c6ac6939f9a44527fb43f6f1c8ce64.png);width:250px;padding:2px; margin-top:5px; "></div>
<div id="wnsb" style="margin-top:5px;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>

 First, edit code ni di http://htmledit.squarefree.com/
 Paste codes yang selesai diedit tu di dalam HTML/Gadget.
 Pastikan paste di HTML/GADGET tu, jangan click 'Rich Text' . Terus save.
 Background,color, semua boleh tukar. 

Tidak ada komentar: