Right Click Menu - Klik Kanan Muncul Menu Pilihan Kita

Nah, kalu kemarin-kemarin saya telah posting berbagai variasi link mulai dari pop-it, URl rotator, yang hanya satu list tetapi link bisa muncul bergantian sampai link hover. Pokoknya macem-macem, sekarang saya posting rightclickmenus, yaitu akan muncul menu ketika seseorang klik kanan pada blog kita. Bukan menu standart tetapi menu yang bisa kita atur sendiri :D. Ada syaratnya yang mau make... comment dulu ya hehehehehehe :D

Yang belum jelas silahkan lihat contoh di blog percobaan saya, klik http://blogtipblogtrik.blogspot.com/

Nah, ngerti kan maksud saya??? Langsung saja bagi yang pengen buat....
1. Login ke blogger
2. Menuju Tata Letak
3. Edit HTML
4. Cari kode ]]></b:skin>
5. Letakkan kode di bawah ini di atasnya

.rightclickmenu { position: absolute;
width: 100px;
top: 0px;
left: 0px;
background-image: url(http://2.bp.blogspot.com/_xJ97vQ_VYFo/SozqxB5PHOI/AAAAAAAAAr4/w0V12Aas8IY/s320/w.jpg);
visibility: hidden;
border: 1px solid;
border-color: #eeeeee #666666 #666666 #eeeeee;
padding: 2px;
z-index: 5;
filter: alpha(opacity=0);
-moz-opacity:1
}
.menuitem {
padding: 2px 4px 2px 4px;
color: #fff000;
text-decoration: none;
font-family: ms sans serif;
font-size: 11px;
font-weight: normal;
display: block;
}
.seperator {
border-top: 1px solid #999999;
border-bottom: 1px solid #eeeeee;
margin: 2px;
}
a.menuitem:hover {
color: #ffffff;
background-color: transparent;
background-image: url(http://2.bp.blogspot.com/_xJ97vQ_VYFo/SozqxB5PHOI/AAAAAAAAAr4/w0V12Aas8IY/s320/w.jpg);
}
</style>
<script type="text/javascript">
// Copyright 2002 Eddie Traversa, etraversa@dhtmlnirvana.com, http://dhtmlnirvana.com
// Free to use as long as this copyright notice stays intact.
// Courtesy of SimplytheBest.net - http://simplythebest.net/scripts/

var ie5 = (document.getElementById&&document.all);
var n6 = (document.getElementById&&!document.all);
var x,y,el,pageW,pageH;
if (n6) document.addEventListener("mouseup",showMenu,false);
if (ie5) document.attachEvent("oncontextmenu",showMenu);
if (ie5) document.attachEvent("onclick",showMenu);

function showMenu(event) {
if (document.getElementById) {
pageW = document.body.offsetWidth;
pageH = document.body.offsetHeight;
x = event.clientX
y = event.clientY
el = document.getElementById("rightclickmenu");
if ((ie5&&event.type=="contextmenu")||(n6 && event.which>1)) {
if ((x+parseInt(el.offsetWidth))>=pageW) {
x = parseInt(el.offsetWidth);
y = parseInt(el.offsetHeight);
}
el.style.top=y+"px";
el.style.left=x+"px";
fadeIn();
return false;
}
if ((ie5&&event.type=="click")||(n6 && event.which==1)) {
el.style.visibility="hidden";
fade_index = 0;
}
}
}
document.oncontextmenu=new Function("return false") ;
fade_index = 0;

function fadeIn() {
if(ie5 || n6) {
document.getElementById('rightclickmenu').style.visibility = 'visible';
if(ie5) {
document.getElementById('rightclickmenu').filters.alpha.opacity = fade_index;
}
if(n6) {
document.getElementById('rightclickmenu').style.MozOpacity = fade_index/100;
}
fade_index += 3;
goIn = setTimeout("fadeIn()", 50);
if(fade_index >= 100)
clearTimeout(goIn);
}
}
</script>

6. Lalu cari kode </body>
7. Letakkan kode berikt di atasnya

<div class='rightclickmenu' id='rightclickmenu'>
<a class='menuitem' href='http://www.masdoyok.co.cc'>MasDoyok</a>
<div class='seperator'/>
<a class='menuitem' href='http://www.masdoyok.co.cc'>Beranda</a>
<a class='menuitem' href='http://www.masdoyok.co.cc/search/label/free%20template/'>Free Template</a>
<a class='menuitem' href='http://www.masdoyok.co.cc/search/label/blog'>BlogTrick</a>
<a class='menuitem' href='http://www.masdoyok.co.cc/search/label/Info'>BlogInfo</a>
<a class='menuitem' href='http://www.masdoyok.co.cc/search/label/Award'>Award</a>
</div>

Apa yang perlu kamu ganti?
Gantilah alamat URL dan label
contoh:
<a class='menuitem' href='http://www.masdoyok.co.cc'>MasDoyok</a>

yang berwarna orange adalah URl kamu dan yang berwarna merah adalah label...

Untuk membuat garis seperti contoh, lihat lagi contoh
anatara Mas Doyok dan Beranda terdapat garis
caranya tambahkan kode garis berikut:
<div class='seperator'/>

Kalau sudah simpan template... selamat mencoba :D