Wednesday 10 July 2013

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

12 comments:

  1. thanks ya sa, requestku udah di bahas :) bermanfaat banget loh =D

    ReplyDelete
  2. oh iya sa, cara ngambil code link follower gimana? maap banyak tanya, masih newbie ,-, xD

    ReplyDelete
  3. cara buat code search gimana sa?

    ReplyDelete
    Replies
    1. Ada kok udah Salsa post, cari aja di "Tutorial"

      Delete
  4. kalo cara masukin isinya gimana? sesuai judul

    ReplyDelete
    Replies
    1. Ya itu kan ada "Tab 1", ada juga "CODE HERE". Tulisan code here yang pertama itu kakak ganti jadi code tab 1. Misalnya, Kakak pengen bikin tab search, ganti Tab 1 jadi "Search", terus ganti juga Code Here yang pertama jadi code html search button.

      Delete
    2. OOO, makasih, saya masih newbie...hehehehe....baru buat blog

      Delete
  5. Oh ya kak,. Ini gak bisa buat Jadi Page ya?? :(

    ReplyDelete
  6. Kak Salsa makasih yaa! Ini tutornya aku cari dari duluu! Tengkyu bingittt... :D

    ReplyDelete
  7. kak ijin share di blogku ya^^ aku bakalan credit kog^^

    ReplyDelete
  8. Kak Salsa, kok kalo mau nge klik tab yg lain nggak bisa? ._. Yg bisa kebuka cuman 1 tab kak

    ReplyDelete

 
Copyright © 2013-2017 By Anugerah Mullia Ulfa Salsabella. All Rights Reserved.