Cara Membuat Kotak Chatting Tersembunyi

Sebelumnya saya pernah membahas mengenai cara memasang chatbox. Kali ini saya akan membahas tutorial mengenai kotak chatting yang tesembunyi. nah kok bisa (bisa dong)

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 onclick=”showHidechat()”> </div>
    <div>
    <center>

    SCRIPT CHATTING DI SINI

    </iframe></center>
    <a href=”http://blog.umy.ac.id/tutorialblogging/2010/12/07/geovisite-penghitung-pengunjung-blog/” title=”geovisite penghitung pengunjung blog” target=”_blank”>[+]</a>
    <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.

baca juga artikel lain:

tutorial blogging
memilah dan memilih judul dengan google keyword tools
pengertian keyword
mengoptimalkan seo
search engine optimization
situs komunitas blogger
microblogging
cara membuat link blogroll bergerak
cara membuat photoblog
membuat readmore pada blogger
memasang kalender cantik
posting artikel blogger via email
membuat link field di blogger
free template
cara mengganti template

4 Comments on Cara Membuat Kotak Chatting Tersembunyi

  1. I wanted to compose you a little note to help say thanks a lot again for these extraordinary suggestions you have documented on this page. This has been so unbelievably open-handed of people like you to allow unreservedly what exactly many people would have advertised for an e book to end up making some cash for their own end, most importantly considering the fact that you might well have tried it in case you wanted. The good tips also served like a great way to realize that other individuals have similar zeal the same as my own to know the truth way more related to this issue. I am sure there are many more enjoyable opportunities in the future for those who discover your blog post.

Leave a Reply

Your email address will not be published.


*


Skip to toolbar