Blognya Reggy - Ehm..Ehm.. Cek..Cek..1..2..3.. Hai sobat, apa kabar, Setelah lama kebingungan mau update post tutorial blogspot tentang akhirnya ketemu juga, yaitu
Cara membuat show / hide guest book dari atas. Tapi yang kali ini beda loh, bukan yang saya share
Disini . Kalau yang itu kan show / hide dari kanan. Kalau ini show / hidenya dari atas. Seperti punya saya. Kalau mau lihat Demonya lihat ke bagian kanan blog saya ada gambar
Guest Book dan klik itu. Dan chat box pun keluar. Sobat ingin tau bagaimana cara membuatnya? Ikuti langkah - langkah di bawah ini:
1. Pastikan sobat sudah login pada blog sobat
2. Langsung beralih ke halaman Rancangan
3. Selanjutnya klik
Tambah Gadget dan pilih
HTML / Javascript4. Kemudian pasang kode di bawah ini
<style type="text/css">
#at{
position:fixed;
right:450px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:autopx;
width:autopx;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:2px solid #FF0000;
background: #F5F5F5;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:5px;
-moz-box-shadow: 0px 2px 5px 0px #FF0000;
}
</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:#F5F5F5;">
<!-- Taruh kode chat box sobat Disini -->
</div>
</div>
<div align="center"><a href="javascript:void(0);" onclick="showHideAT()"><input type="button" value="Close" class="close" /></a>
</div>
</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; right:0px;'><a href="javascript:void(0);"onclick="showHideAT()"/><img src="http://1.bp.blogspot.com/-dsspRx_lf3M/TvvZ4De97aI/AAAAAAAAAAw/PTp1z_YvqJE/s1600/Chat+Book.png" /></a>
</div>
5. Simpan dan lihat hasilnya
Keterangan:- Ganti tulisan yang berwarna merah dengan kode chat box sobat
- Jika sobat ingin merubah garis pinggirnya ganti kode yang berwarna biru
- Jika sobat ingin merubah tab picturenya ganti kode yang berwarna pink
- Kode yang berwarna hijau adalah kode background nya
- Sobat tiadk tau kode warna? silahkan lihat Disini
Bagaimana? sudah jelas? bila masih ada pertanyaan silahkan berkomentar oke?
Selamat Mencoba!!
