Cara membuat chatbox blog dengan tombol close

Cara membuat chatbox blog dengan tombol close - hello sobat ,lama kagak posting di blog ini, nahh berhubung lagi free dan ada ide buat nulis artikel lagi kali ini saya akan membagikan Cara membuat chatbox blog dengan tombol close tentunya dengan tampilan yang responsif.

pastinya kalian sudah tau apa itu chatbox atau biasa disebut shoutbox, buku tamu dlln. yang ada pada sebuah blog maupun situs-situs lain, umumnya ini sebagai pesan langsung yang berisikan informasi ke pada pemilik website maupun blog itu sendiri dengan memberikan kesempatan bagi pengunjung berkomentar pada situsnya melalui layanan shoutbox ini.

Cara membuat chatbox blog dengan tombol close
soutbox / chatbox ini memberikan kesan sendiri bahwa blog tersebut masih aktif dan masih banyak yang berkunjung dengan adanya sebuah pesan - pesan di shoutbox tersebut, dengan begitu sangat membantu untuk kemajuan visitor kedepannya.

Cara membuat chatbox blog dengan tombol close.

cara membuatnya cukup mudah hanya perlu mendaftarkan diri ke situs penyedia shoutbox ini setelah itu ambil kodenya/skripnya dan terapkan pada widget template blog anda, jika anda belum mempunyai shoutbox tersebut langsung saja mendaftar di sini http://www.smartchatbox.com/users/register/1 .

situs tersebut merupakan situs yang menyediakan shotbox dengan nama "smartchatbox" yang sedang saya pakai di blog ini. langsung saja mendaftar disana, beberapa yang menyediakan shoutbox ini ada yang berbayar, jadi situs tersebut yang saya rekomendasikan bagi anda yang ingin membuat shoutbox secara gratis.

Cara mendaftar di smartchatbox :

  • menuju kesitus http://www.smartchatbox.com/users/register/1.
  • isi email , password yang tercantum pada form situs tersebut.
  • buat ukuran widget shoutbox anda. (kalau saya sendiri memakai ukuran width 260px dan height = 400px.)
  • isi Url situs anda. pada form Your website
  • Pilih jenis tampilan dan warna shotbox..
  • terakhir, Buat nama anda dan password anda untuk login nantinya ke shotbox di situs anda nantinya. ada dua pilhan di sana , ada admin dan moderator.
  • jika sudah klik GENERATE CODE OF MY SMART CHATBOX. 
  • akan ada halaman baru untuk pengaturan font dan tombol, jika tidak perlu langsung saja klik FINISH.
sampai disini anda telah menadapatkan sebuah code smartchatbox. jangan di close terlebih dahulu atau boleh simpan kode tersebut di notepad .( lanjut ke cara penerapan pada template blog untuk memodifikasinya menjadi smartchatbox yang keren ).
skrip kode widgetnya seperti ini :
<script type="text/javascript" src="//www4.smartchatbox.com/shoutbox/start.php?key=723378471"></script>

Cara Memasang Smartchatbox blog dengan tombol close.

setelah anda tadi mendaftar dan mempunyai sebuah widget shoutbox dari situs smartchatbox, sekarang saatnya menerapkannya pada blog anda. simak berikut ini :
  • Menuju ke Menu Blogger anda.
  • Klik Template - Edit HTML.
- Temukan Kode ini <style>
    - Salin Kode dibawah ini dan letakkan tepat di bawah <style> atau diatas penutupnya </style> :
    /*----------------chatbox---------------------*/
    #chat,#chat:after,.chatbox{transition:all .4s ease-in-out}
    #chat,#close-chat,.minim-button,.maxi-button,.chat-text{font-weight:700;cursor:pointer;font-family:Arial,sans-serif;text-align:center;height:20px;line-height:20px}
    #chat,#close-chat,.chatbox{border:1px solid #A8A8A8}
    #chat:after,#chat:before{position:absolute;border-style:solid;content:""}
    .chatbox{position:fixed;bottom:0;right:50px;margin:0 0 -1500px;background:#fff;border-bottom:none;padding:28px 10px 10px;z-index:100000}
    #close-chat{position:absolute;top:2px;right:2px;font-size:24px;border:1px solid #dedede;width:20px;background:#fefefe;z-index:2}
    #minim-chat,#maxi-chat{position:absolute;top:0;left:0;width:100%;height:20px;line-height:20px;cursor:pointer;z-index:1}
    .minim-button{position:absolute;top:2px;right:26px;font-size:24px;border:1px solid #dedede;width:20px;background:#fefefe}
    .maxi-button{position:absolute;top:2px;right:26px;font-size:24px;border:1px solid #dedede;width:20px;background:#fefefe;}
    .chat-text{position:absolute;top:5px;left:10px;font-size:16px;}
    #chat {width: 40px;border-radius: 3px;padding: 2px 8px;font-size: 12px;background: #3B6281 none repeat scroll 0% 0%;transform: translateZ(0px);position: fixed;float: right;right: 100px;color: #FFF;bottom: 10px;z-index: 999;}
    #chat:before{border-width:10px 11px 0 0;border-color:#3B6281 transparent transparent;left:7px;bottom:-10px}
    #chat:after{border-width:9px 8px 0 0;border-color:#3B6281 transparent transparent;left:8px;bottom:-8px}
    #chat:hover{background:#ddd;-webkit-animation-name:hvr-pulse-grow;animation-name:hvr-pulse-grow;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate}
    #chat:hover:after{border-color:#ddd transparent transparent!important}
    .animated-chat{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
    @-webkit-keyframes tada{0%{-webkit-transform:scale(1)}
    10%,20%{-webkit-transform:scale(.9)rotate(-3deg)}
    30%,50%,70%,90%{-webkit-transform:scale(1.1)rotate(3deg)}
    40%,60%,80%{-webkit-transform:scale(1.1)rotate(-3deg)}
    100%{-webkit-transform:scale(1)rotate(0)}
    }
    @keyframes tada{0%{transform:scale(1)}
    10%,20%{transform:scale(.9)rotate(-3deg)}
    30%,50%,70%,90%{transform:scale(1.1)rotate(3deg)}
    40%,60%,80%{transform:scale(1.1)rotate(-3deg)}
    100%{transform:scale(1)rotate(0)}
    }
    .tada{-webkit-animation-name:tada;animation-name:tada}
    @-webkit-keyframes hvr-pulse-grow{to{-webkit-transform:scale(1.1);transform:scale(1.1)}
    }
    @keyframes hvr-pulse-grow{to{-webkit-transform:scale(1.1);transform:scale(1.1)}
    }

    - Selanjutnya Temukan kode ini <body> :
    - Salin kode dibawah ini dan letakkan dibawah kode <body> atau diatas penutup </body> :
    <!-- smartchatbox blogger -->
    <div class='animated-chat tada' id='chat' onclick='loadChatbox()'>Chat</div>
    <div class='chatbox' id='chatbox'>
     <span class='chat-text'>Chatbox</span>
     <script>
    //<![CDATA[
    document.write('<div id="smartchatbox_img389847584" style="width: 260px; height: 400px; overflow: hidden; margin: auto; padding: 0; border: 1px solid #e0e0e0; ">');
    document.write('<div id="smartchatbox389847584" style="width: 260px; height: 400px; overflow: hidden; margin: auto; padding: 0; border:0; ">');
    document.write('<iframe src="http://www4.smartchatbox.com/shoutbox/sb.php?key=389847584" scrolling="no" frameborder="0" width="260px" height="400px" style="border:0; margin:0; padding: 0;">');
    document.write('</iframe></div></div>');
    //]]>
     </script>
     <div id='close-chat' onclick='closeChatbox()'>&amp;times;</div>
    </div>
    <script>
    //<![CDATA[
    function loadChatbox(){var e=document.getElementById("chat");e.style.display="none";var e=document.getElementById("chatbox");e.style.margin="0";}
    function closeChatbox(){var e=document.getElementById("chat");e.style.display="block";var e=document.getElementById("chatbox");e.style.margin="0 0 -1500px 0";}
    //]]>
    </script>

    jangan lupa untuk mengganti id smartchatbox anda pada skrip diatas : pada document.write ganti nomor id smartchatbox dengan yang anda punya :

    pastinya anda mendapatkan skrip ini di smartchatbox saat selesai membuat chatbox diatas :
    <script type="text/javascript" src="//www4.smartchatbox.com/shoutbox/start.php?key=723378471"></script>
    yang warna biru adalah nomor id chatbox yang anda punya. ganti pada 3 document.write diatas, dengan nomor id yang anda dapatkan.

    setelah itu sihlakan save template anda dan lihat hasilnya....
    tambahan : ada banyak yang gagal anda lihat lagi kode scriptnya, di artikel ini saat di daftar dan mendapatkan kode dari smartchatbox adalah www4, anda bisa mencocokan dengan yang anda dapatkan www3 atau www2, agar widget chatbox bisa berjalan sempurna.
    mungkin sekian dari artikel saya tentang Cara membuat chatbox blog dengan tombol close semoga dapat bermanfaat untuk anda mengkreasikan tempilan template blog agar lebih menjadi interaktif dengan pengunjung.

    12 komentar

    walah terimakasih cukup jelas aku bacanya hehe :D template yang kamu pake namanya apa sob.. hehe jangan lupa ya kunjungi dan komentari blog ane Cari Dulu | Blog Tutorial Terbaik

    Ok sob,.. thanks kunjungannya... Templatenya belum nemu namanya apa hehehe. ini template buatan ane sihh sob :) ,lebih ke minimalis design.

    lah baru tau saya bisa buatchat shoutbox dari tomblo close makasih infonya

    Bagus gan, tapi kira2 bakal berat nggak ya?

    Gak terlalu Berar jg gan, + lazyload jg udah ringan.

    Tentunya agar blog terlihat interaktif dengan visitor saat dibuka di komputer.

    Oooo, githu toh caranya. dasar saya emang GAPTEK. Tepok jidat

    Waduh, kyk gini aja saya gak bisa... tak minum Susu Kambing dulu, biar tambah paham...
    Terimakasih manfaat banget artikelnya

    Mantep banget kang!!! Jadi kelihatan hidup

    yups, bener sekali kang. biar lebih interaktif sama pengunjung, :D

    - Berkomentarlah dengan sopan.
    - No Link Aktif, SPAM, SARA P#RN.
    - Jangan membalas yang tidak sesuai tema.
    - Untuk "PM/tanya hal penting" bisa lewat Social Media yang saya miliki, sekalian Kenalan dengan Admin ^_^.
    EmoticonEmoticon