Home » » Cara Mudah Membuat/Memasang Chatbox Yang Bisa Buka Tutup/Tersembunyi

Cara Mudah Membuat/Memasang Chatbox Yang Bisa Buka Tutup/Tersembunyi

SPONSOR :



Ok sobat blogger, pada kesempatan ini saya akan sharing tentang Cara Memasang Chatbox Shoutmix Yang Bisa Buka Tutup. Ini melanjuti postingan saya sebelumnya yaitu Cara Memasang Chatbox Shoutmix Pada Blog.
Sebenarnya widget buka tutup/floating widget bisa dipasangi yang lain seperti : gambar, adsense, ataupun yang lain.
OK langsung saja, ini dia caranya :

  • Pertama... kita harus punya akun shoutmix chat, kalau belum punya bisa daftar terlebih dahulu di www.shoutmix.com. jika belum tahu cara buat akun shoutmix buka  Cara Membuat Chatbox Shoutmix Pada Blog. Atau mendaftar di cbox.ws silakan buka Cara Mendaftar Chatbox Untuk Blog di Cbox
  • Kemudian jika sudah punya akun shoutmix chat, seperti biasa login ke blogger
  • Buka Rancangan/Layout tepatnya Elemen Laman.
  • Klik Tambah Gadget, kemudian pilih Tambahkan HTML/Javascript.
  • Copy script berikut dan letakan pada kotak HTML tersebut.

    <!-- right hidden chatbox by http://jogoyitnan-free.blogspot.com/ START -->
    <style>
    #hcl {
    position:fixed;
    top:60px;
    left:3px;
    z-index:+1000;
    }
    * html #hcl {position:relative;}
    .hcltab {
    height:120px;
    width:30px;
    float:left;
    cursor:pointer;
    background:url('http://4.bp.blogspot.com/_GmDoFC87tnc/S9mFQhSm5PI/AAAAAAAAAfM/CermeFfIask/s1600/cbred.png') no-repeat;
    }
    .hclcontent {
    float:left;
    border:6px solid #B40404;
    background:#F7F8E0;
    padding:10px;
    }
    .hc-credit {font-size:9px}
    .hc-credit a {text-decoration:none}
    </style>
    <script type="text/javascript">
    function showHidehcl(){
    var hcl = document.getElementById("hcl");
    var w = hcl.offsetWidth;
    hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0);
    hcl.opened = !hcl.opened;
    }
    function movehcl(x0, xf){
    var hcl = document.getElementById("hcl");
    var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
    var dir = xf>x0 ? 1 : -1;
    var x = x0 + dx * dir;
    hcl.style.left = x.toString() + "px";
    if(x0!=xf){setTimeout("movehcl("+x+", "+xf+")", 10);}
    }
    </script>
    <div id="hcl">
    <div class="hclcontent">

    <!-- Script Chatbox -->


    <br />
    Mau seperti ini?<br />
    Click disini--->
    <a href="http://jogoyitnan-free.blogspot.com/2011/07/cara-mudah-membuatmemasang-chatbox.html">
    Tutorial Blog


    <div class="hc-credit">
    <span style="float:left">
    <!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->
    <span style="float:right">
    <a href="javascript:showHidehcl()">
    [Hide]
    </a>
    </span>
    </div>
    </div>
    <div class="hcltab" onclick="showHidehcl()"> </div>

    </div>
    <script type="text/javascript">
    var hcl = document.getElementById("hcl");
    hcl.style.left = (30-hcl.offsetWidth).toString() + "px";
    </script>
    <!-- right hidden chatbox by http://jogoyitnan-free.blogspot.com/ END -->



    Sedikit Keterangan dari diatas :
      ~ Tulisan berwarna hijau : adalah script yang digunakan dalam chatbox/shoutbox. jika belum punya akun shoutbox bisa lihat cara membuatnya di Cara Membuat Chatbox Shoutmix Pada Blog Atau bisa mendaftar di http://www.cbox.ws/ juga bisa lihat caranya di Cara Mendaftar Chatbox Untuk Blog di Cbox. Caranya tinggal hapus dan ganti dengan script shoutmix yang sudah dibuat. Disini juga bisa anda isi dengan yang lain seperti gambar atau adsense.
      ~ Tulisan berwarna biru : adalah gambar yang digunakan dalam chatbox buka tutup berikut contoh gambar yang lain jika ingin mengganti gambarnya.

    cb-blue2
    url gambar :
    http://1.bp.blogspot.com/_GmDoFC87tnc/S9mFSX2I_qI/AAAAAAAAAfs/60n9Gquxt6o/s1600/cbblue-2.png

    cb-blue
    url gambar : http://3.bp.blogspot.com/_GmDoFC87tnc/S9mFR0N8DLI/AAAAAAAAAfk/HRgxuRNSsWk/s1600/cbblue.png

    cb-green
    url gambar :
    http://1.bp.blogspot.com/_GmDoFC87tnc/S9mFRucX-HI/AAAAAAAAAfc/WmswhSn7reM/s1600/cbgreen.png

    cb-yellow
    url gambar :
    http://3.bp.blogspot.com/_GmDoFC87tnc/S9mFROZPMBI/AAAAAAAAAfU/e0Qb4B7Gr_I/s1600/cbyellow.png

    cb-yellow
    url gambar :
    http://4.bp.blogspot.com/_GmDoFC87tnc/S9mFQhSm5PI/AAAAAAAAAfM/CermeFfIask/s1600/cbred.png

      ~ Tulisan berwarna orange : adalah ukuran-ukuran pada chatbox tersebut seperti top : jarak chatbox dengan paling atas blog. height : tinggi chatbox, width : lebar chatbox, border : ukuran border (garis tepi) chatbox, border solid : warna border, background : warna background chatbox. Anda juga bisa melihat kode-kode warna yang anda inginkan di  Kode Warna.


    Sekian dari saya tentang Cara Memasang Chatbox Shoutmix Yang Bisa Buka Tutup, semoga bermanfaat dan berhasil...






    UPDATE DESEMBER 2011, berhubung Shoutmix lama sekarang sudah tidak bisa untuk mendafarkan lagi, Jadi silakan anda mendaftar ke http://www.cbox.ws/. Cara mendaftarnya hampir sama dengan shoutmix, tinggal diisi sesuai dengan perintahnya. Atau bisa buka tuorialnya berikut Cara Mendaftar Chatbox Untuk Blog di Cbox  Saya minta maaf apabila sudah membuat bingung atau menyusahkan Anda dalam tutorial ini. Terima Kasih

    Terima kasih atas kunjungan Saudara di blog kami, semoga bermanfaat :)

    23 komentar:

    COF mengatakan...

    Thanks tipsnya gan, kebetulan ane mau coba model chatbox yang seperti ini.

    ghost writer mengatakan...

    dah pernah buat.tetap ada kelemahannya.

    lina@news for us mengatakan...

    Tutorialnya bermanfaat :)

    Rizkyzone mengatakan...

    dulu juga pernah pasang tapi tak lepas lagi

    news for us mengatakan...

    Sangat bermanfaat, Kawan

    kombul mengatakan...

    wah mantap bro.. gw coba deh

    Brahmantyo mengatakan...

    kok di blog ane bisa tapi di blog sodara ane gk bisa ya gan....
    aneeeh......
    mohon pencerahannya ya sob

    RzaaL mengatakan...

    Nice Share Om :D
    Buat Nambah Nambah Ilmu :D

    Mampir Ke Sini Juga Donk :D
    http://blog-rzaal.blogspot.com/

    asdalul fauzi mengatakan...

    :}

    genteng berkwalitas mengatakan...

    thank's http://herbalherbalindo.blogspot.com/

    rafly mengatakan...

    :)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

    zhyawal mengatakan...

    Keren Sangat Bermanfaat ;;)

    Bimo Setiawan mengatakan...

    Mantep gan..... makasih... :)

    Black Techno mengatakan...

    ada lagi yang gratis gan, buatan indonesia, namanya wgchat.com
    bisa integrasi dengan ym gtalk dan facebook.
    cocok banget kalau dipasang diweb toko online.

    ada versi gratis selamanya juga

    Sugimin Lifehacker mengatakan...

    Kalo mau ganti warna font nya gimana yahh?

    ibbenk21 mengatakan...

    artikelnya sangat bagus dan sangat bermanfaat, makasih
    semoga sukses saja.. dan salam hangat buat admin blog dari ibbenk21

    Anonim mengatakan...

    visit back gan www.hootshare.blogspot.com

    koka mengatakan...

    salam kenal

    Rohib Syahputra mengatakan...

    makasih...
    sangat membantu sekali

    koekuy youtubers mengatakan...

    thx infonya,ijin copas kunjungi balik ya http://koekuy.blogspot.co.id/

    Astrid Naning Yuana mengatakan...

    klo yang dipinggir kanan gmn caranya?

    Mukena mengatakan...

    ooo githu ya cara pasangnya

    PONDOK QUR'ANI mengatakan...

    makasih infonya

    :)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

    Posting Komentar

    Blog ini sudah DoFollow, silakan berkomentar untuk mendapat backlink gratis. Mohon untuk tidak melakukan spam. Untuk semua, terima kasih atas komentarnya...