Cara Membuat Chat Box Responsive Di Blogger

Cara Membuat Chat Box Keren Di Blog - Kali Ini Kita Akan Membahas Tentang Cara Membuat Chat Box Di Tambah Dengan Tombol Hide Dan Minimize ... Tutorial Ini Saya Dapat Dari KompiAjaib Dan Sedikit Di Modifikasi Oleh Saya Kelebihan Chatbox Yang Kita Akan Bahas Kali Ini Adalah Chat Box Bisa Di Sesuaikan Dengan Desain Sendiri Dan Pembuatanya Gratis
Kelebihan Chatbox Yang Sekarang Kita Akan Bahas

Daftar	Spesifikasi
Responsive	YA
Tombol Minimize	YA
Tombol Hide	YA
Tombol Exit	YA
Tombol Login	YA
Menambahkan User Atau Moderator	YA
Gratis	YA
Mobile Responsive	YA
Button Chat	YA
Full Akses Admin	Yes
Chat Permanent	Yes
Error	No
Tombol Refresh	Yes
Emoticon	Yes
Fitur Tambahan	Bisa Melihat Berapa Banyak Orang Yang Sedang Ada Di Blog

Dilihat Dari Spesifikasi Di Atas Chat Box Free Ini Serasa Premium Langsung Saja Ke Tutorialnya
Cara Membuat Chat Box Di Blogger

1. Masuk Ke Website Smartchatbox.com
2. Create SmartChatBox
3. Masukan Email Dan Password Untuk Mendaftar
4. Setelah Itu Kalian Sesuaikan Tampilan Chatbox Yang Kalian Inginkan Dan Masukan Url Website Kalian Di Form (your website) Lalu Isikan Di Step Ke 3 Username Dan Password Untuk Login Sebagai Admin Di Blogger Kalian .. Apabila Sudah Klik  Continue
5. Setelah Ini Klik Finish  > Copy Kode Seperti Di Bawah (Semua Kode Berbeda Beda) Jangan Samakan Key Nya Seperti Di Gambar Silahkan Copykan Punya Anda

• Lalu Copykan Link Nya Ke Url Maka Akan Ada Kode Dan Copykan Kode Yang Seperti Ada Di Bawah Gambar 

Lalu Cara Pemasangan Ke Blogger 

1. Masuk Ke Blogger > Template > Edit Html > Cari Kode > ]]><b:/skin>
2. Taruh CSS Di Bawah Ini Sebelum ]]></b:skin>

#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;left: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:50px;border-radius:3px;padding:2px 8px;font-size:12px;background:#fff;-webkit-transform:translateZ(0);transform:translateZ(0)}
#chat:before{border-width:10px 11px 0 0;border-color:#A8A8A8 transparent transparent;left:7px;bottom:-10px}
#chat:after{border-width:9px 8px 0 0;border-color:#fff 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)}
}



3. Lalu Cari Kode </body> Dan Letakan Kode Di Bawah Ini Sebelum Kode </body>

<div class="chatbox" id="chatbox">
<span class="chat-text">Chatting Yuk!</span>
<script>
//<![CDATA[
document.write('<div id="smartchatbox_img460024954" style="width: 220px; height: 450px; overflow: hidden; margin: auto; padding: 0; border: 1px solid #edf3f7; ">');
document.write('<div id="smartchatbox460024954" style="width: 220px; height: 450px; overflow: hidden; margin: auto; padding: 0; border:0; ">');
document.write('<iframe src="http://www3.smartchatbox.com/shoutbox/sb.php?key=460024954" scrolling="no" frameborder="0" width="220px" height="450px" style="border:0; margin:0; padding: 0;">');
document.write('</iframe></div></div>');

//]]>
</script>
<div id="close-chat" onclick="closeChatbox()">&amp;times;</div>
<div id="minim-chat" onclick="minimChatbox()"><span class="minim-button">&amp;minus;</span></div>
<div id="maxi-chat" onclick="loadChatbox()"><span class="maxi-button">&amp;plus;</span></div>
</div>
<script>
//<![CDATA[
function loadChatbox(){var e=document.getElementById("minim-chat");e.style.display="block";var e=document.getElementById("maxi-chat");e.style.display="none";var e=document.getElementById("chatbox");e.style.margin="0";}
function closeChatbox(){var e=document.getElementById("chatbox");e.style.margin="0 0 -1500px 0";}
function minimChatbox(){var e=document.getElementById("minim-chat");e.style.display="none";var e=document.getElementById("maxi-chat");e.style.display="block";var e=document.getElementById("chatbox");e.style.margin="0 0 -460px 0";}
//]]>
</script>



Ubah Kode Yang Berwarna Merah Dengan Kode Kamu Tadi ..


4. Untuk Menampilkan Chat Box nya Silahkan Copy Kode Di Bawah Ini Sesuai Keinginan Anda Kalo Recomondasi Saya Mending Simpan Di Atas Header Dengan Cari kode <header> Lalu Simpan Kode Di Bawah Ini Sesudah Kode <header>

<div id="chat" class="animated-chat tada" onclick="loadChatbox()">Chat</div>



5. Selanjutnya Simpan 

Sekian Tutorial Cara Membuat Chat Box Responsive Di Blogger Beserta Tombol Minimize Dan Tombol Hide .. Semoga Bermanfaat Apabila Ada Pertanyaan Silahkan Tanyakan Lewat Kolom Komentar atau Tombol Chat Yang Telah Tersedia Di Header

Demo

Berbagi :