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!

Comments

  1. kak,aku pernah coba tapi kok yang click on the board itu desain nya tidak kayak kakak ;( tapi kayak desain yng lain.o.. ya.. yng image itu makudnya image apa? :-?

    ReplyDelete
    Replies
    1. iyalah ._. itu kan aku bikin sendiri, bukan dibikinin orang lain. kan sumbernya beda-beda tuto itu.. jelas desainnya beda-beda atuh :O image click me sama notifnya :3

      Delete
    2. Waah, kak Mutiara bisa bahas Sunda atuuuh

      Delete
    3. bisa dong, Seizza.. :3 kumaha Seizza teh? bisa sunda juga? :)

      Delete
    4. Tiasa atuh... da aku dari Bandung ^^

      Delete
  2. Kok aku coba nggak bisa ya?? gak ada rules nya..

    ReplyDelete
    Replies
    1. iya dong.. kan harus dibikin sendiri. ^^ baru kalo udah dibikin, di upload buat dapet url image nya :)

      Delete
  3. kak kalau mau buat imagenya sendiri itu pakai apa ? sama untuk biar ada tulisannya editnya pakai apa ? makasih

    ReplyDelete
    Replies
    1. itu harus pakai aplikasi :) bisa pakai photoshop, photoscape, paint, pixlr, dan lain sebagainya. masih banyak kok aplikasi edit foto lainnya untuk nambahin text kayak gitu :3

      Delete

Post a Comment

Before leave a comment, please ensure your comment is supportive and spread positivity :)

Popular posts from this blog

Movie About Insecurity : Imperfect

Ramadhan Tiba!