Cara membuat show / hide guest book dari atas

Cara membuat show / hide guest book dari atas

cara membuat chat box show / hide dari atas
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 / Javascript
4. 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!!
Cara membuat show / hide guest book dari atas
Writter: Reggy
DMCA.com Orang pandai tau tata krama. Dilarang copy paste artikel tanpa seizin penulis!

13 comments Skip to comments

iya sob. biar ga monoton..
hehe, nice post. :)

@maulana; iya akan saya follow balik..
lain kali kalau berkomentar jangan memakai anchor text..
cukup blablabla.blogspot.com / semacamnya (tanpa http://) :D

kalau ane sih dipisah pakai cara postingan khusus chatting sob. coz supaya ga makan memori lebih pada blog.

. @fazri: memang gan..
tapi setelah ane coba" biasa loadingnya
malah ringan loadingnya.. :D

Waahh.... sangat2 membantu gan.. thanks banget uda d share gan...
btw d tggu follow back nya gan... follower #41

thanks banget gan.... :)

wah keren gan.. terimaksih ats tutorialnya...sukses selalu..

kog masi muncul tulisane close ya gan ... ???
apanya tuuh ... ???

Berkomentarlah dengan baik dan sopan. Dilarang oot dari artikel diatas. Komentar yang menyertakan link aktif maupun statis termasuk promosi akan langsung kami hapus.
Show Konversi Kode Hide Konversi Kode Show Emoticon Hide Emoticon