Pop-It Menu, Link di Bawah Link

Maaf untuk sementara contoh tidak dapat kami tampilkan tapi kami jamin script di atas akan bekerja.
Keterangan: Karena suatu hal kami tidak memberiukan contoh untuk semntara

Malem malem dingin tetep dikalahkan sama semangat posting yang menggebu-gebu aku harus tetep posting sob. Aku pengen pake bahasa yang resmi. Mulai... Anda pernah berjalan-jalan di berbagai web luar negeri? Ketika sebuah link di sorot, maka akan muncul link-link lain sebagai submenu (level 2) yang bisa kita klik dan mengarah pada suatu tujuan. Nah daripada pusing banget kalau disuruh menjelaskan dan memang saya tidak pinter bertutur kata langsung saja coba Anda sorot link di bawah ini sebagai contoh... ayo soroooot........


Bagus Banget Nih

Add Me


Nah, bagi yang pengen buat caranya begini, sebelumnya maaf kalo scriptnya agak panjangan yah....

1. Cari kode ]]></b:skin>
2. Letakkan script berikut di atas ]]></b:skin>
#popitmenu{
position: absolute;
background-color: white;
border:1px solid black;
font: normal 12px Verdana;
line-height: 18px;
z-index: 100;
visibility: hidden;
}

#popitmenu a{
text-decoration: none;
padding-left: 6px;
color: black;
display: block;
}

#popitmenu a:hover{ /*hover background color*/
background-color: #CCFF9D;
}

3. Cari kode ]]></b:skin> lagi
4. Taruh script yang panjangan ini di bawahnya ]]></b:skin>

<script type='text/javascript'>
//<![CDATA[
/****************************************************************************/
/* Pop-it menu- © Dynamic Drive (www.dynamicdrive.com) */
/* Pesan ini harus ada untuk penggunaan yang sah */
/* Kunjungi http://www.dynamicdrive.com/ untuk mendapatkan kode sepenuhnya */
/* Edited By : Kevin Alfonzo - http://chalforweb.blogspot.com/ */
/****************************************************************************/

var defaultMenuWidth="150px" //set default menu width.

var linkset=new Array()
//SPECIFY MENU SETS AND THEIR LINKS. FOLLOW SYNTAX LAID OUT

linkset[0]='<a href="http://www.masdoyok.co.cc">Mas Doyok</a>'
linkset[0]+='<hr>' //Optional Separator
linkset[0]+='<a href="http://www.masdoyok.co.cc">Trik Blog</a>'
linkset[0]+='<a href="http://www.masdoyok.co.cc">Tip Blog</a>'
linkset[0]+='<a href="http://www.masdoyok.co.cc">Blog Info</a>'
linkset[0]+='<a href="http://www.masdoyok.co.cc">Blog News</a>'

////Pesen www.Masdoyok.co.ccKode script berikut ini tidak perlu dirubah atau di edit

var ie5=document.all && !window.opera
var ns6=document.getElementById

if (ie5||ns6)
document.write('<div id="popitmenu" onMouseover="clearhidemenu();" onMouseout="dynamichide(event)"></div>')

function iecompattest(){
return (document.compatMode && document.compatMode.indexOf("CSS")!=-1)? document.documentElement : document.body
}

function showmenu(e, which, optWidth){
if (!document.all&&!document.getElementById)
return
clearhidemenu()
menuobj=ie5? document.all.popitmenu : document.getElementById("popitmenu")
menuobj.innerHTML=which
menuobj.style.width=(typeof optWidth!="undefined")? optWidth : defaultMenuWidth
menuobj.contentwidth=menuobj.offsetWidth
menuobj.contentheight=menuobj.offsetHeight
eventX=ie5? event.clientX : e.clientX
eventY=ie5? event.clientY : e.clientY
//Find out how close the mouse is to the corner of the window
var rightedge=ie5? iecompattest().clientWidth-eventX : window.innerWidth-eventX
var bottomedge=ie5? iecompattest().clientHeight-eventY : window.innerHeight-eventY
//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<menuobj.contentwidth)
//move the horizontal position of the menu to the left by it's width
menuobj.style.left=ie5? iecompattest().scrollLeft+eventX-menuobj.contentwidth+"px" : window.pageXOffset+eventX-menuobj.contentwidth+"px"
else
//position the horizontal position of the menu where the mouse was clicked
menuobj.style.left=ie5? iecompattest().scrollLeft+eventX+"px" : window.pageXOffset+eventX+"px"
//same concept with the vertical position
if (bottomedge<menuobj.contentheight)
menuobj.style.top=ie5? iecompattest().scrollTop+eventY-menuobj.contentheight+"px" : window.pageYOffset+eventY-menuobj.contentheight+"px"
else
menuobj.style.top=ie5? iecompattest().scrollTop+event.clientY+"px" : window.pageYOffset+eventY+"px"
menuobj.style.visibility="visible"
return false
}

function contains_ns6(a, b) {
//Determines if 1 element in contained in another- by Brainjar.com
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function hidemenu(){
if (window.menuobj)
menuobj.style.visibility="hidden"
}

function dynamichide(e){
if (ie5&&!menuobj.contains(e.toElement))
hidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
hidemenu()
}

function delayhidemenu(){
delayhide=setTimeout("hidemenu()",500)
}

function clearhidemenu(){
if (window.delayhide)
clearTimeout(delayhide)
}

if (ie5||ns6)
document.onclick=hidemenu
//]]>
</script>

Nah, panjaaaaaang kan... Sebelum klik save aku terangin dulu yang berwarna merah... yang tidak berwarna merah tak perlu di rubah... aku tulis ulang

linkset[0]='<a href="URL1">LAbel</a>'
linkset[0]+='<hr>' //Optional Separator
linkset[0]+='<a href="URL2">LAbel</a>'
linkset[0]+='<a href="URL3">LAbel</a>'
linkset[0]+='<a href="URL4">LAbel</a>'
linkset[0]+='<a href="URL5">LAbel</a>'

Nah ini merupakan kode submenu yang nantinya akan ditampilkan, ganti URL 1 sampai 5 sesuai keinginanmu dan jangan lupa ganti juga labelnya.
Lalu apa yang berwarna hijau?
Kalau kamu tadi lihat di atas pada contoh antara submenu mas doyok dan dan bawahnya ada garis pembatas kan? Nah, yang hijau itu untuk membuat garis pembatas.

-Klik Save Template kalau sudah selesai edit.

Lalu, script di bawah ini yang mesti kamu masukin di postingan atau sidebar:

<a href="#" onMouseover="showmenu(event,linkset[0])" onMouseout="delayhidemenu()">MENU UTAMA</a><br>

Nah, gampang kan aslinya... ganti MENU UTAMA dengan nama link utama (link level satu)
Ada satu lagi: Lalu bagaimana kalau kita mau membuat link lagi seperti ini?
Gampang! Perhatikan yang berwarna merah tebal, linkset[0], ingat gak di script atas tadi ada juga yang pakai linkset[0]. Nah, itu menunjukkan kalau dua script ini berhubungan. Kalau pengen buat link model semacam ini yang lain kita tinggal menambahkan script lagi pada script utama misal...

linkset[1]='<a href="URL1">Label</a>'
linkset[1]+='<a href="URL2">Label</a>'
linkset[1]+='<a href="URL3">Label</a>'

dan letakkan di bawah:

linkset[0]+= ..... yang paliiiiiiiiiiiiing akhir

Nah, pada postingan tinggal kamu ganti juga
linkset[0] nya menjadi linkset[1] untuk menghubungkan script

Hal yang sama untuk membuat link semacam ini selanjutnya, tinggal tambah lagi script utama, gonta ganti angka pada linkset, dan yang penting disesuaikan dengan script yang ditempel di posting atau sidebar...

Oke dah, memang panjang nih sob... tapi pasti kalian bisa la wong aku yang newbie aja bisa hehehehe. Aku percaya dan selamat mencoba...