Membuat Open the Clipboard (Notice)

Halllooooo:) Aku barusan ngecek akun ask.fm ku, nah ada yg nanya gimana cara buat tombol yang kalo di klik keluar papan rules kayak di blogku ituloh;3 atau biasa disebut juga open the clipboard, namanya Aryanti.


Nah, mau tau? Oke, ikutin tutorialnya:)

1. Sign in akun blog.

2. (Pada Dashboard) Tata Letak > Add a Gadget > Html/Javascript.

3. Copy kode di bawah ini.

<style type="text/css"> #at{ position:fixed; right:300px; z-index:+1000; top:6; } * html #at{position:relative;} .attab{ height:500px; width:30px; float:right; cursor:pointer; background:url(); } .atcontent{ float:center; background:url(Url Gambar 1) 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:1px;'> <a href="javascript:void(0);"onclick="showHideAT()"/> <img src="Url Gambar 2" alt="PUSH" title="Klik Me" /></a> </div></div></div></div>

Note: 

Hitam: diganti dengan width dan height papan rules yg nanti muncul pas di klik (kalo ngak diatur kemungkinan ada yang terpotong gambarnya, jadi di cek2 terus yah)

Merah: diganti dengan url gambar untuk papan rules.

Kuning: diganti dengan posisi gambar yang kalo di klik akan keluar papan rules (kalo punyaku kan yg gambar boneka warna pink)

Ungu: dignti dengan url gambar yg kalo di klik akan keluar papan rules (punyaku yg gambar boneka pink)

Biru: diganti dengan tulisan yang kalo kita arahkan kursor ke gambar tombol itu, akan keluar tulisan (kalo punyaku tulisannya Click Me:))

4. Selesai di edit, klik Save Changes :)

Selesai~

Cr: Salsa (cuma copy link html:))