Cara Membuat Buku Tamu Muncul Dari Atas Jika Diklik

Assalamu'alaikum sobat wawasanfadhitya..

Kembali kali ini saya akan sharing tentang tutorial blog, yaitu cara membuat buku tamu/guest book muncul dari atas jika tombolnya diklik. Widget ini merupakan variasi dari kebanyakan buku tamu yg hanya menetap di bagian samping halaman blog yang sangat membosankan.

Widget buku tamu ini juga sedikit berbeda dari yang biasanya. Apabila yang biasa antara tombol tulisan "Buku Tamu" dan bagian buku tamunya menyatu, kalau yang ini tidak menyatu..(Lihat Contoh)

Nah jadi kalok sobat penasaran mau bikin jenis buku tamu yang satu ini, saya telah menyediakan tutorialnya.Ayo langsung aja ke TKP!!

Langkah Pertama anda harus membuat buku tamu dulu, misal:CBOX!!

Langkah Kedua:

1.Login Blogger

2.Pilih Rancangan

3.Tambah Gadget ->HTML/JavaScript

4.Copy Pastekan kode dibawah ini:

<style type="text/css">


#at{


position:fixed;


left:0px;


z-index:+1000;


}


* html #at{position:relative;}


.attab{


height:100px;


width:30px;


float:left;


cursor:pointer;


background:url();


}


.atcontent{


float:left;


border:2px solid #999;


background: #000;


-moz-border-radius-topleft:15px;


-moz-border-radius-topright:15px;


-moz-border-radius-bottomleft:15px;


-moz-border-radius-bottomright:15px;


padding:10px;


-moz-box-shadow: 0px 2px 5px 0px #f8f9b9;


}


</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:#000;">




LETAKKAN KODE BUKU TAMU SOBAT DISINI


</div>


</div>
<br />


<div align="right"><a href="javascript:void(0);"
onclick="showHideAT()"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd1kIXDug54CYiov0yZfCxHvNqwrFoV_oAxq7ZHv1tWO2wonGQ7LXeW5HoEw4VdRyOCDIn2ifZaA9CaIHhT2WDm4Vha0JZDdPCWdcHQ2jijdhjmYaNPvDWOIXGghPgdntz3sFxD3xNiJw/s1600/CLOSE.png"
alt="close" title="Click here to Close Cbox" /></a></div>
</div></div>




<script type="text/javascript">


var at = document.getElementById("at");


at.style.top = (-200-at.offsetWidth).toString() + "px";


</script>

<center><a href="javascript:void(0);"onclick="showHideAT()"/><img

border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5Zby7qxCVXFCNHDQuwph-32zLrenu2xQe_i5oS538txaBAjxxuzbGQfOEBqfIUKKs_f54gfuZOfHUhmFQCd9OxL-qS6sulNjivqe7HgTmyeyxiExB6bhYmizNbhucx15_o4YzC8his2Q/s1600/guestbook.png"

alt="Guest Book" title="Click here to open Guest Book" /></img

border="0"></a></center>

5.Ganti tulisan berwarna merah dengan kode buku tamu sobat.

6.Save

nah sekian dulu ya tutorial dari saya..

Wassalam..

jangan asal copas kalau web anda tidak mau diBLOKIR,baca aturannya disini!!!