Home » , , » Membuat Buku Tamu dengan Efek Show Hide

Membuat Buku Tamu dengan Efek Show Hide

Redi Apri Handoko | 08.37 | 0 comments
Buku tamu berfungsi untuk meninggalkan pesan dari pengunjung yang datang ke blog kita. Kita bisa memperoleh buku tamu dari chatbox, shoutbox (berbayar), dll. Selain itu ada juga beberapa cara kita menempatkan buku tamu pada halaman blog. Semuanya itu tergantung dari selera kita masing-masing. Biasanya ada yang menempatkan buku tamu pada sidebar dan footer, namun ada juga yang menempatkan buku tamunya di sudut blog "menyembunyikan buku tamu dengan efek slide". Kali ini kita akan membuat penempatan buku tamu dengan cara Show Hide. Jika penasaran ikuti langkahnya berikut ini:

1. Masuk ke Rancangan -- Elemen Laman
2. Tambahkan gadjet lalu pilih HTML/Javascript
3. Masukan kode di bawah ini:
<style type="text/css">
#at{
position:fixed;
right:450px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:2px solid #00ff00;
-moz-box-shadow: -2px 2px 25px lime;
background:#000 no-repeat center;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
}
</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();">


<!-- Masukan Kode Cbox Anda -->

</div>
</div>
</div>
<br/>
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="https://lh5.googleusercontent.com/-r1i4MbA737M/TXe_geYYU9I/AAAAAAAAB5A/PgOy7-VjLAE/s1600/close.png" alt="close" title="Click here to Close Cbox" /></a></div>
</div>


<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script>


<div style='display:scroll; position:fixed; top:80px; left:3px;'><a href="javascript:void(0);"onclick="showHideAT()"/><img src="http://dl.dropbox.com/u/24368183/chatbox.gif" /></a>
</div>

Keterangan:
- Anda dapat mengedit kode diatas untuk tampilan dan penempatan buku tamu

4. Masukan kode buku tamu anda pada kode diatas yang berwarna merah
5. Simpan gadjet dan lihat hasilnya

Selamat mancoba, semoga artikel ini bermanfaat!
Berbagi Dengan Teman:

Posted by : Redi A.H ~ / Tutorial windows, SEO , Info gadget, Download game

Artikel Membuat Buku Tamu dengan Efek Show Hide Di posting oleh Redi A.H pada 19 Mar 2012. Terima kasih atas kunjungannya. Kritik dan saran dapat disampaikan via kontak atau komentar. Jika diperlukan Artikel ini bisa disebarluaskan melalui blog sobat, hanya mohon sebutkan sumbernya dengan tautan link aktif ke postingan ini. Terimakasih. Happy blogging!!!

0 comments:

Posting Komentar

Terimakasih atas kunjungan anda semua, sebelumnya mohon maaf kami tidak menerima komentar yang berbau tentang pornografi.
TERIMAKASIH atas partisipasinya.

 
Site Meter :
Copyright © 2011. Tutorial Windows 7 - All Rights Reserved
Proudly powered by Blogger
Thank You For Google