Cara pasang Chat box showhide dari atas

Postingan saya kali ini akan membahas cara memasang Cbox showhide,sebenarnya sudah banyak banget yang  membahas tutorial ini,tapi nggak ada salahnya di bahas ulang kali aja ada yang tertarik :D nah, biasanya khan kebanyakan cbox munculnya dari samping,tapi yang saya bahas kali ini muncul dari atas jadi kalo mau buka Cbox harus mendongak ke atas gitu.. wakakak,,XD..langsung saja  : Pastikan anda sudah punya akun cbox sendiri kalo belum punya silahkan daftar di sini Gratis !!
caranya:
1.LOGIN ke blogger
2. Pilih Perancangan>>Elemen laman
3. Tambahkan Gadget HTML/Java script (Jangan diberi judul)
4. Copas kode berikut :

<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(URL);
    }
    .atcontent{
    float:left;
    border:2px solid #7FFF00;
    background:url(http://lh5.ggpht.com/_yF0--u7KSSI/TKgzluISmnI/AAAAAAAAAxE/PC55GBEXvig/kembangApi.gif)#000000 repeat-x bottom center scroll;
    -moz-border-radius-topleft:10px;
    -moz-border-radius-topright:10px;
    -moz-border-radius-bottomleft:10px;
    -moz-border-radius-bottomright:10px;
    padding:10px;
    }
    .atcontent:hover{
    border:2px solid #fff;
    background:url(http://lh4.ggpht.com/_yF0--u7KSSI/TKYaaJhxVdI/AAAAAAAAAvY/nBUewsjG-Ck/bg-cbox.jpg)#000000 repeat-x bottom center scroll;
    }
    </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(http://i53.tinypic.com/oiu4n9.gif) no-repeat;">

KODE CHAT BOX DI PASANG DI SINI
   
 </div>
    </div>

    <br />
    <div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://i859.photobucket.com/albums/ab159/yudhizh/ButtonCloseWhite-BlackStroke.png" alt="close" title="Click here to Close Cbox" /></a></div>
    <div align="left"><font size="2"><a href="http://www.uttafreak-987.co.cc/2011/04/cara-membuat-buku-tamu-blog-showhide-di.html"target=_blank"><div style="color: #444444;">
    <span style="font-size: xx-small;">By Utta</span></div></a></font></div>
    </div></div>

    <center><a href="javascript:void(0);"onclick="showHideAT()"/><img border="0" src="http://lh3.ggpht.com/_yF0--u7KSSI/TKQjhw7n0fI/AAAAAAAAAuY/Kn2pdAIOzcA/BUkuTamu.png" alt="cbox" title="Click here to open Guest Book" /></a></center>

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


*Keterangan
 - Yang berwarna hijau adalah URL background kembang api dan kode warna backgroundnya (*Background dapat diganti sesuai selera sobat)
 - Yang Berwarna merah adalah background cbox
- Tang berwarna biru ganti dengan kode Cbox
- Yang berwarna kuning adalah URL icon navigasi Close

sekian semoga berhasil :)
These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Reddit
  • Spurl
  • StumbleUpon
  • Technorati

15 comments

5 April 2012 14.37

cobaiinn aahh....

hehe :DD

5 April 2012 16.48

sip kang tengkuy scriptnya

5 April 2012 18.27

all @ makasih ya :D:D

5 April 2012 20.07

yg klo di klik bsa muncul dari atas ya Sob, wah... ntr di cobain ah, mantep kayaknya... thanks for share nya sob .. :)

5 April 2012 20.30

@eka : iya benar..
sip dh :)

6 April 2012 09.56

kalau yang muncul dari tengah gmana kodenya sob? macam pop-up...makasih sebelumnya.

6 April 2012 13.29

@binkbenk : sy jg belum dpt kodenya,hehe
smntara di cari2..makasi y :)

8 April 2012 12.03

Akhirnya nemu juga yg beginian. Ijin coba ya? Baru bisa minggu depan nih sy praktekin. Masih sibuk >.<

Makasih :D

8 April 2012 13.15

@Sang manyar :Iya, sama-sama
makasi jg dah mampir :D

14 April 2012 11.44

nambah ilmu disini, gan... :)

14 April 2012 13.43

@komputer pemula : silakan :)

8 Agustus 2012 09.17

thx

1 September 2012 07.28

saya coba dulu ya gan, nuhun

20 Desember 2012 09.59

ada lagi yang gratis gan, namanya wgchat.com
bisa integrasi dengan ym gtalk dan facebook.

ada versi gratis selamanya juga

11 Mei 2013 20.07

Terima kasih, ilmunya,,salam dari pemula

Posting Komentar