Xceria Blogger Indonesia

Cara Membuat Kotak Chatting Tersembunyi

Kotak Chatting Tersembunyi
Cara membuat kotak chatting tersembunyi. Sebelumnya sudah pernah membahas mengenai alternatif chatting bagi pengguna shoutmix. Kali ini saya akan membahas tutorial blog mengenai kotak chatting yang tesembunyi.

Mungkin anda sudah pernah melihat kotak chatting yang tersembunyi di beberapa blog. Dimana widget chatting itu akan muncul setelah diklik. Script yang digunakan pada kotak chatting tersebut adalah javascript. Javascript memang bisa menciptakan script-script yang hebat dan kreatif.

Di posting ini anda akan mendapatkan tutorial blog mengenai cara membuat kotak chatting tersembunyi tersebut. Langsung saja ikuti tutorialnya di bawah ini.
  1. Masuk ke blogger.
  2. Pilih Layout (Tata Letak) » Page Elements (Elemen Laman).
  3. Klik tulisan Add a Gadget (Tambah Gadget).
  4. Pilih gadget HTML/JavaScript.
  5. Copy-paste kode berikut di bagian konten.

    <script type="text/javascript">
    function showHidechat(){
    var chat = document.getElementById("chat");
    var w = chat.offsetWidth;
    chat.opened ? movechat(0, 30-w) : movechat(20-w, 0);
    chat.opened = !chat.opened;
    }
    function movechat(x0, xf){
    var chat = document.getElementById("chat");
    var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
    var dir = xf>x0 ? 1 : -1;
    var x = x0 + dx * dir;
    chat.style.right = x.toString() + "px";
    if(x0!=xf){setTimeout("movechat("+x+", "+xf+")", 10);}
    }
    </script>
    <div id="chat">
    <div class="chat-click" onclick="showHidechat()"> </div>
    <div class="chatbox">
    <center>


    SCRIPT CHATTING DI SINI


    </iframe></center>
    [+]
    <span style="float:right">
    <a href="javascript:showHidechat()">
    [x]
    </a></span>
    </div></div>

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

  6. Simpan gadget.
CSS
Sekarang pada bagian css, ikuti langkah-langkah berikut.
  1. Pilih menu Layout (Tata Letak) » Edit HTML.
  2. Cari kode ]]></b:skin> kemudian copy-paste kode css berikut di atasnya.

    #chat{position:fixed; top:25px; z-index:+1000}
    * html #chat{position:relative}
    .chat-click{height:100px; width:30px; float:left; cursor:pointer; background:url(http://i42.tinypic.com/vhb3vc.jpg) no-repeat;}
    .chatbox{float:left; border:2px solid #1f54bc; background:#f0f8ff; padding:10px}
    .chatbox a {text-decoration: none;}

  3. Simpan template.

Anda bisa mengubah gambar atau warna yang ada pada tulisan berwarna biru di atas sesuai dengan keinginan.

Sekarang lihat hasilnya. Semoga membantu!

25 comments

tutorial nya mantap,aq akan mencoba nya.Bos klo ada wkt blogwalking ke tmpt ku ya,..Dan ikut gabung.Trims

balas

Wah Tengkyu mas triknya... Keep Blogging...

balas

makasih tutorialnya sob...

balas

Wah Tengkyu mas triknya... Keep Blogging...

balas

wah dapat ilmu baru nih, mau saya coba ah buat tambah2 aksesoris blog.

Oh ya bro mampir dong ke blog saya, thank ya...

balas

Wih kereen tombolnya melayang mantap betul.

salam

mampir gan http://antik-bendabertuah.blogspot.com ada benda unik

balas

makasih buat infonya...

balas

wah!!! keren bos........ makasih tipsnya

balas

buat sembunyiin yang lain juga bisa, asal tidak buat sembunyiin istgri simpanan, hehehe.....

balas

kunjungan perdana boss! kalo boleh saiya ngajak tukeran link n follower nich kalo bersedia berkunjung n add duluan yach....

di sini nich:
www.endigolabs.co.cc

thx :) :D

balas

bisa dicoba tuh ?
kayak nya manfaat BGT
thanks"Y

balas

ini yang saya cari terima kasih. link sudah dipasang tukeran yah .

balas

@masmiftahulhudarancasari >> linknya juga sudah dipasang, thanks...

balas

thanks ya...bisa diliat atapeagw.blogspot.com

balas

Makasih tutorial nya ya. . . .
Salam kenal. . ..

Kunjungi Blog Aku ya : http://ahmad-roni.blogspot.com

balas

Thanks Tutor Nya Ya

Kunjungi : http://www.nya-nyok.co.cc/

balas

kotak chating memang ampuh untuk berikan saran pendek. Akan tetapi juga tersembunyi kuranf menarik dan kurang narsis gan.

balas

Mas kalau ingin membuat kotak chating munculan bagaimana? sorry

balas

thanks banget nih buat tutorialnya, keep sharing ya.

balas

Cool. But how do make a lot of hidden box as this blog. I've tried but really crashing yes ...

balas

mas. koq gg bisa iiah?
malah mucul kode cssnya di navbar blog aku ?
apa ada kesalahan iiah ?

balas

Info dan blog yang keren. Salam..

balas

makasih bangettt buat infonya u=yang sangat bermanfaat ini ...

balas

Waduh Gak Mudeng iki Mas, Piye to???

balas
:) :( ;) :D =D :w :c :d -) -| :v =( ^: :o :C :-

Silahkan berkomentar sesuai dengan artikel. Dilarang berkomentar spam dan menulis iklan!

« »
 
Back to top