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>
    3. #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)}
      }

    4. Lalu Cari Kode </body> Dan Letakan Kode Di Bawah Ini Sebelum Kode </body>
    5. <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 ..

    6. 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>
    7. <div id="chat" class="animated-chat tada" onclick="loadChatbox()">Chat</div>

    8. 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



    Belum ada Komentar untuk "Cara Membuat Chat Box Responsive Di Blogger "

    Posting Komentar

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel