Click On The Board

Kali ini, aku mau posting tutorial lagi. Sebenernya hiatus, tapi hari ini aku libur, jadi free--HAHA
Banyak banget yang request tutorial sama aku. Salah satunya click on the board. Bingung? Lihat blogku sebagai contoh! Ada tulisan click me kah di tepi kanan blogku? Ada? Klik aja, ada rules nya kan? Yup, itulah yang sering disebut click on the board. Dulu pernah ada yang request, tapi aku lupa siapa namanya, jadi gak kupost--HAHA //gak lucu xD

Eh, taunya sekarang ada yang request lagi, namanya Gifta. Yuk, Gifta dan kawan-kawan yang penasaran sama caraku membuat click on the board, simak baik-baik, ya! Kalau tidak, hasilnya nanti bisa hancur ^^

Oke, kode-kodenya special credit sama Kak Atin karena aku memang pake tutorial Kak Atin, haha. Biar kalian nggak bingung sama Bahasa Melayu Kak Atin, makanya aku nggak repost tutonya.

• Blogskins/ Classic template : Paste bawah code </style>
• Simple/Designer Template : Paste dalam Add a Gadget > HTML/JavaScript

Copy kode di bawah ini

<style type="text/css">
#at{
position:fixed;
right:350px;
z-index:+1000;
top:6;
}
* html #at{position:relative;}
.attab{
height:500px;
width:30px;
float:right;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
background:url(http://i.imgur.com/l9R9RO3.png)
no-repeat 0 0 transparent;
width:800px;
height:700px;center scroll ;
padding:56px 0 20px 5px;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:url() no-repeat;">
<center><div id="author">
<a href="javascript:void(0);" onclick="showHideAT()">
</a></div></center></div>
<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-500-at.offsetWidth).toString() + "px";
</script>
<style type='text/css'>
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;F
opacity: 0.5;
-khtml-opacity: 0.5;}
a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>
<div style='display:scroll; position:fixed; top:100px; right:5px;'>
<a href="javascript:void(0);"onclick="showHideAT()"/>
<img src="http://i.imgur.com/NpWHr1W.gif"
alt="PUSH" title="KLIK ME" /></a>
</div></div></div></div>

oren : jarak hover drop down

merah : image 

hijau : title tooltips

Biar ngeditnya gampang, kalian bisa live preview di sini. Nah, untuk image notice dan image push nya, kalian bisa klik ini.
Oke, sekian tutorial dariku ^^ Semoga bermanfaat dan berhasil yaa!