Navigateable Box vers 4

Assalamu'alaikum~

Salsa udah kembali dari hiatus. Kangen deh udah lama gak ngepost tutorial. Sekarang juga Salsa lagi sibuk*alah sok sibuk ._.*

Tutorial ini di request oleh Zahra, temen kecil Salsa di blog. Tampilan menu tab itu kayak gini

Ikuti Step nya :

 

•  Copy kode di bawah ini yaw ;)

<div id='polskahekjor'> <style type="text/css"> div.P0L5K4 div.C0D3R {height: 24px; overflow: hidden;float:left; } div.P0L5K4 div.C0D3R a:hover { background-color: #eee; } div.P0L5K4 div.C0D3R a.Active{background:#000;color:#fff;} div.P0L5K4 div.N0T4C0D3R { clear: both; border: 0px solid #bce8f6; overflow: hidden; background-color: #eee;} div.P0L5K4 div.N0T4C0D3R div.h3ll0c0d3r { height: 100%; padding: 0px; overflow: hidden; } div.P0L5K4 div.N0T4C0D3R div.h3ll0c0d3r div.BL0g3R { padding: 3px 5px; } div.P0L5K4 div.C0D3R a { background:#ccc; float: left;border-radius:11px 11px 0px 0px; display: block; width: 33%; text-align: center; vertical-align: middle; height: 24px; padding-top: 3px; text-decoration: none; font-family: "Arial", Serif; font-size: 12px; font-weight: 900; color: #151515;} </style> <script type='text/javascript'> //<![CDATA[ function P0L5K4_C0D3R(P4WN3D, id) { var P0L5K4 = document.getElementById(P4WN3D); var C0D3R = P0L5K4.firstChild; while (C0D3R.className != "C0D3R" ) C0D3R = C0D3R.nextSibling; var TT = C0D3R.firstChild; var i = 0; do { if (TT.tagName == "A") { i++; TT.href = "javascript:P0L5K4_J3R('"+P4WN3D+"', "+i+");"; TT.className = (i == id) ? "Active" : ""; TT.blur(); } } while (TT = TT.nextSibling); var N0T4C0D3R = P0L5K4.firstChild; while (N0T4C0D3R.className != 'N0T4C0D3R') N0T4C0D3R = N0T4C0D3R.nextSibling; var h3ll0c0d3r = N0T4C0D3R.firstChild; var i = 0; do { if (h3ll0c0d3r.className == 'h3ll0c0d3r') { i++; if (N0T4C0D3R.offsetHeight) h3ll0c0d3r.style.height = (N0T4C0D3R.offsetHeight-2)+"px"; h3ll0c0d3r.style.overflow = "auto"; h3ll0c0d3r.style.display = (i == id) ? 'block' : 'none'; } } while (h3ll0c0d3r = h3ll0c0d3r.nextSibling); } function P0L5K4_J3R(P4WN3D, id) { P0L5K4_C0D3R(P4WN3D, id); } function P0L5K4_H4CKR3W(P4WN3D) { P0L5K4_C0D3R(P4WN3D, 1); document.write('');} //]]> </script> <form action="P0L5K4.html" method="get"> <div id="P0L5K4" class="P0L5K4"> <div style="width: 100%;" class="C0D3R"> <a>Tab 1</a> <a>Tab 2</a> <a>Tab 3</a></div><div style="width: 100%; height: 300px;color:#151515;" class="N0T4C0D3R"> <div class="h3ll0c0d3r" style='background:#fff;'> <div class="BL0g3R"> CODE HERE! 1</center></center></center></center></center></div> </div> <div class="h3ll0c0d3r" style='background:#fff;'> <div class="BL0g3R"> CODE HERE! 2</center></center></center></center></div> </div> <div class="h3ll0c0d3r" style='background:#fff;'> <div class="BL0g3R"> CODE HERE! 3<center> </div> </div> </div> </form> <script type="text/javascript">P0L5K4_H4CKR3W('P0L5K4');</script> </div>

*Adjust code :
Merah  : Itu kode warna html, silahkan ubah sesukamu~!
Biru      : Ubah dengan tulisan mu~! (ex : Followers, Ask Me, etc.)
Oranye : Ubah dengan kode mu~!

• Pastekan di tab HTML/JavaScript
• Save
• Done! ^^ 

Email ThisBlogThis!Share to XShare to FacebookShare to Pinterest