Pasang Buku Tamu Buka Tutup

Pasang buku tamu buka tutup disebelah kanan blog - Sebelumnya saya sudah pernah menjelaskan Cara Membuat Buku Tamu / Guestbook Otomatis di Blog , kali ini saya akan menjelaskan bagaimana cara membuat buku tamu buka tutup disamping kanan blog. tidak jauh beda dengan buku tamu otomatis, buku tamu yang satu ini dapat dibuka tutup dengan cara mengklik dan tidak otomatis terbuka/tertutup, lebih jelasnya lihatlah gambar dibawah ini. Tapi sebelumnya anda harus punya script kode buku tamu/ guest book terlebih dahulu, Anda bisa mendapatkannya/mendaftar chatbox disini.

Anda tertarik memasangnya ??

Silahkan ikuti langkah-langkah cara memasang buku tamu buka tutup berikut :

1. Klik Rancangan >> Elemen laman >> Tambah gadget >> HTML/Javascript
2. Masukkan semua kode dibawah ini di kotak yang di sediakan.

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://1.bp.blogspot.com/-wnWd1rP48kA/T663CJDYvZI/AAAAAAAAAVs/2KeMY8x27pg/s1600/buku+tamu.jpg') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#000000;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="280" height="268" src="http://www5.cbox.ws/box/?boxid=772205&amp;boxtag=cecpjf&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain5-772205" style="border:#000000 1px solid;" id="cboxmain5-772205"></iframe></div>
<div><iframe frameborder="0" width="280" height="85" src="http://www5.cbox.ws/box/?boxid=772205&amp;boxtag=cecpjf&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform5-772205" style="border:#000000 1px solid;border-top:0px" id="cboxform5-772205"></iframe></div>
</div>
<!-- END CBOX -->

<br/>
Mau punya buku tamu seperti ini?<br/>
Klik di
<a href="http://karaokebatak.blogspot.com/2012/05/pasang-buku-tamu-buka-tutup.html">
<b>sini</b>
</a>

<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>

</div>

</div>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

3. Ganti kode warna merah dengan kode buku tamu anda.
4. kemudian save/simpan

semoga cara memasang buku tamu buka tutup ini bermanfaat bagi anda. Horas..!!

Tweet

Artikel keren lainnya:

Ditulis oleh Unknown pada tanggal Minggu, 13 Mei 2012