Perkembangan dunia IT khususnya di Sosial media sekarang ini semakin pesat, ada banyak aplikasi yang bermunculan salh satunya ialah media Chatbox, dulu ketika Yahoo masih berjaya ada aplikasi sosial media namanya Yahoo Messenger kemudian disusul dengan munculnya camfrog, facebook dan sebagainya. Aplikasi sosial media ini saling bersaing dan menunjukkan pelayanan chating yang Gratis.
Kemudian tidak mau kalah Google pun meluncurkan aplikasi sejenis dan aplikasi Google+ dan Google Hangout yang hingga dengan ketika ini aplikasi tersebut masih bertahan dan terus berkembang. Membahas Aplikasi sosial media Chatbox di postingan kali ini akan dibahas Cara Membuat Chatbox Dari SmartChatbox di Blog yang akan terpasang di Blog kita gunanya untuk menambah layanan dan chat kepada pengunjung setia blog yang nantinya mampu saling bertukar informasi dan saling berinteraksi kepada admin blog dan juga pengunjung lainnya, tentu hal ini sangat menarik bukan, penasaran bagaimana Cara Membuat Chatbox Dari SmartChatbox di Blog, yuk mari kita simak bersama.
Aplikasi Chatbox dari SmartBox ini menurut aku sangat bagus alasannya kita mampu mengganti background sesuai selera mata, kemudian disediakan juga Gravatar dan masih banyak settingan yang mampu di custom dan bahkan nih bila teman langganan yang Premium mampu menggunakan sambungan SSL. Untuk Sobat yang tertarik untuk memasangnya di blog semoga loadingnya tidak berat dan lama mampu kita akali dengan mengekstrak js-nya semoga tidak menimbulkan blocking render js kemudian mampu dipasang dengan inline js.
Di Aplikasi Chatbox dari SmartBox ini ditampilakan secara show hide kemudian ditambahkan efek animasi dan jangan kaget kalau arahan CSS-nya agak banyak dipasang, kemudian Button-nya pun aku tampilkan melayang sempurna di sebelah kiri dibawah blog tapi sesuai selera teman mau dipindahkan diatas pun juga boleh lebih jelasnya mampu dilihat demo iframe dibawah ini.
Nah bagaimana teman penasaran dan ingin mencobanya, mari kita simak berikut ini.
Langkah Pertama
Sobat masuk ke http://www.smartchatbox.com kemudian klik tombol Create SmartChatbox lalu silahkan buat chatbox nantinya untuk dipasang di blog, setelah itu cari kodenya lebih jelasnya ibarat ini.
Setelah ketemu silahkan teman salin arahan diatas yang ditandai yaitu arahan url js kemudian paste ke browser teman setelah tampil teman salin semua arahan yang tampil di halaman tersebut ke notepad terlebih dahulu, biasanya ibarat tampilan dibawah ini
Setelah disalin ke notepad perhatikan arahan dibawah ini salin dan simpan arahan ini sempurna diatas arahan </body> di edit HTML.
Perhatikan arahan yang ditandai KODE SMARTCHATBOX silahkan teman isi dengan arahan Hasil Ekstrak dari Smartchatbox yang sudah sebelumnya di salin di notepad yang nantinya akan ibarat ini.
Langkah Ke Dua
Langkah selanjutnya teman salin arahan CSS dibawah ini lalu tempel sempurna diatas </head> pada Edit HTML
Setelah itu silahkan simpan Edit HTML-nya lalu refresh blog teman dan Selesai...SmartChatbox akan tampail di pojok bawah sebelah kiri di blog sobat, nah itu bila ingin ditempatkan di bawah namun bagaimana bila teman ingin tempatkan chat button smartchatbox di menu, perhatikan arahan dibawah ini dan ikuti langkah-langkahnya dengan merubah di arahan CSS-nya
Perhatikan arahan yang ditandai position:fixed rubah jadi position:relative kemudian teman hapus arahan bottom:30px;left:30px; setelah itu pindahkan atau CUT arahan <div class="animated-chat tada" id="chat" onclick="loadChatbox()">chat</div> yang diambil dari arahan pada langkah pertama diatas kemudian simpan di arahan html menu blog teman perhatikan silahkan ganti div rubah ke span tujuannya semoga tidak terjadi error HTML5, gambarannya ibarat dibawah ini
Dan Selesai...bagaimana teman penasaran ingin mencobanya, perhatikan baik-baik penempatan kodenya, ada baiknya teman backup terlebih dahulu templatenya bila terjadi error mampu dikembalikan ibarat semula, selamat mencoba.
Nah bagaimana teman penasaran dan ingin mencobanya, mari kita simak berikut ini.
Langkah Pertama
Sobat masuk ke http://www.smartchatbox.com kemudian klik tombol Create SmartChatbox lalu silahkan buat chatbox nantinya untuk dipasang di blog, setelah itu cari kodenya lebih jelasnya ibarat ini.
<script type="text/javascript" src="//www.smartchatbox.com/shoutbox/start.php?key=90561xxxx"></script>Setelah ketemu silahkan teman salin arahan diatas yang ditandai yaitu arahan url js kemudian paste ke browser teman setelah tampil teman salin semua arahan yang tampil di halaman tersebut ke notepad terlebih dahulu, biasanya ibarat tampilan dibawah ini
Setelah disalin ke notepad perhatikan arahan dibawah ini salin dan simpan arahan ini sempurna diatas arahan </body> di edit HTML.
<div class='chatbox' id='chatbox'> <script> //<![CDATA[ KODE SMARTCHATBOX JS //]]> </script> <div id='close-chat' onclick='closeChatbox()'>&times;</div> </div> <div id="chat" class="animated-chat tada" onclick="loadChatbox()">Chat</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>Perhatikan arahan yang ditandai KODE SMARTCHATBOX silahkan teman isi dengan arahan Hasil Ekstrak dari Smartchatbox yang sudah sebelumnya di salin di notepad yang nantinya akan ibarat ini.
<div class='chatbox' id='chatbox'> <script> //<![CDATA[ document.write('<div id="smartchatbox_img90162xxxx" style="width: 220px; height: 450px; overflow: hidden; margin: auto; padding: 0; border: 1px solid #000000; background: url(\'http://www3.smartchatbox.com/shoutbox/img/backgrounds/16_small.jpg\') 50% 50%; ">'); document.write('<div id="smartchatbox90162xxxx" 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=90162xxxx" 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()'>&times;</div> </div> <div id="chat" class="animated-chat tada" onclick="loadChatbox()">Chat</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>Langkah Ke Dua
Langkah selanjutnya teman salin arahan CSS dibawah ini lalu tempel sempurna diatas </head> pada Edit HTML
<style type='text/css'> /*<![CDATA[*/ #chat,#chat:after,.chatbox{transition:all .4s ease-in-out} #chat,#close-chat{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:linear-gradient(to bottom,#fefefe 0,#d1d1d1 100%);border-bottom:none;padding:10px;z-index:100000} #close-chat{position:absolute;top:-10px;right:-10px;font-size:24px;border-radius:100%;width:20px;background:#fefefe} #chat{width:40px;border-radius:3px;padding:2px 8px;font-size:12px;position:fixed;bottom:30px;left:30px;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)} } /*]]>*/ </style>Setelah itu silahkan simpan Edit HTML-nya lalu refresh blog teman dan Selesai...SmartChatbox akan tampail di pojok bawah sebelah kiri di blog sobat, nah itu bila ingin ditempatkan di bawah namun bagaimana bila teman ingin tempatkan chat button smartchatbox di menu, perhatikan arahan dibawah ini dan ikuti langkah-langkahnya dengan merubah di arahan CSS-nya
#chat{width:40px;border-radius:3px;padding:2px 8px;font-size:12px;position:fixed;bottom:30px;left:30px;background:#fff;-webkit-transform:translateZ(0);transform:translateZ(0)}Perhatikan arahan yang ditandai position:fixed rubah jadi position:relative kemudian teman hapus arahan bottom:30px;left:30px; setelah itu pindahkan atau CUT arahan <div class="animated-chat tada" id="chat" onclick="loadChatbox()">chat</div> yang diambil dari arahan pada langkah pertama diatas kemudian simpan di arahan html menu blog teman perhatikan silahkan ganti div rubah ke span tujuannya semoga tidak terjadi error HTML5, gambarannya ibarat dibawah ini
<div class="menu"> <ul> <li>bla bla</li> <li>bla bla</li> <li>bla bla</li> <li><span id="chat" class="animated-chat tada" onclick="loadChatbox()">Chat</span></li> </ul> </div>Dan Selesai...bagaimana teman penasaran ingin mencobanya, perhatikan baik-baik penempatan kodenya, ada baiknya teman backup terlebih dahulu templatenya bila terjadi error mampu dikembalikan ibarat semula, selamat mencoba.
Comments