Hallo sobat Blogger hari ini saya akan membahas tentang cara membuat Cbox atau lebih dikenal sebagai buku tamu merupakan hal yang tidak asing lagi di dunia blogger, sudah banyak tutorial-tutorial yang membahas tentang cara pemasangan Cbox, baik dengan cara standar maupun dengan cara pengubahan kode CSS.
Ok langsung saja ke Cara Membuat Chat Box di bawah, atas, kanan, kiri Blog :
Login terlebih dahulu ke blog sobat
Klick Design -> Pilih tata letak -> Tambah Gadget -> Pilih HTML/Java Script.
Copy Code di bawah ini setelah itu paste di HTML/Java Script .
<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ87xFHsO4h8SosQWzXOlnWLpPcQ9eTbR4Q9fM-cFPctIS9agvu5tZB-nWj2Z6XwLpIqGaOIt1LOP-Nqg6BxaMhD6b8iciX2f-FOz69TtM0DPJ2BUwdODIbOXsk9ft1YDJnjL-iBm7fA/s1600/2131wkl.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
<embed src="http://www.xatech.com/web_gear/chat/chat.swf" quality="high" width="540" height="405" name="chat" flashvars="id=187289954" align="middle" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://xat.com/update_flash.shtml" /><br /><small><a target="_BLANK" href="http://xat.com/web_gear/?cb">Get your own Chat Box!</a> <a target="_BLANK" href="http://xat.com/web_gear/chat/go_large.php?id=187289954">Go Large!</a></small><br />
<br/>
Anda ingin membuat buat Buku Tamu seperti ini?<br/>
Klik <a href="http://1sfgate.blogspot.com/2012/12/cara-membuat-chat-box-melayang.html">
disini </a>
<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</embed></div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>
Bagi sobat yang ingin mengganti tombol Cbox bisa lihat kode nya Dibawah sini! :
ganti kode warna merah dengan di bawah ini ya
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_sSCPp2S5IKbVBgS4HjvGdrQNSaDhlDXTmkAd2OqpgCKYTlxukJf9ZdnH9SY59nuxHK8Ax67cvnOvMNKdJvfJw-I8SgvQaBHgy6xNBuLRqAaPuqlCaLNqpJTD4_MTXXHZsfLChFJcVA/s1600/Chatbox.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE6g58nwfkhRsqvnE8jOvNAAD5M5zmRVQrwlhahU7BImqxgPgsFWh0jamqoy0UbFrW-Qpxik5Y348KYe97C51aiagufxpOg3qAizQcE4cGFKFOG7MyZcMjIO5UDLkSPOLBJP2Q4di_FQ/s1600/Bukutamu3.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisK3bCJ_6ctk31zmhZFMGLGEp35mNXNsV6MT46dZo50ApdPLJKTAJX2wKpg0gzWViv6UGn1SqKyq44KhTlw7t3V1564_-hNBAsF9wDufsXUqs2_wZBB-GtSUVa5S8R8CTn6aXjSGUfOg/s1600/bukutamu2.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCH53ap570JqlIzRjJOLLVIXiMkQQU7biiRkCHlpVz6Glu4GLhgJ7T5eILs1GNVzAhWhbI0wXMDRwOpoVfU9P9j3sIRAbbORyv5NbMoXzKr8yP3Teu5-em16Ul7GDV8iCz0pyz-gVmFA/s1600/bukutamu5.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ87xFHsO4h8SosQWzXOlnWLpPcQ9eTbR4Q9fM-cFPctIS9agvu5tZB-nWj2Z6XwLpIqGaOIt1LOP-Nqg6BxaMhD6b8iciX2f-FOz69TtM0DPJ2BUwdODIbOXsk9ft1YDJnjL-iBm7fA/s1600/2131wkl.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSKhrEG0ow-c-CTQxUP06mUyP3HpLyjM4x0dnH_vayZaOqUVej5DoSVi9sZ9GRZ0wRBP2VzvB5Giqm1uKqA2EFagt72sTTucvHcRMuddCN2NTvDnBHdCXkmJUid0k4HyvIf0jSVin18Q/s1600/bukutamu4.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipGsgif3_PkZ6rzhHjeZv1vvbyiU9vT6FIfWnmAz16CvGEF4Ch58UkGaf5hJgdIzWZwuPf4Lbrs0orseMwcNPUlmyeYPbWsInd1dMbQCf9gr4w-KhAdrEHRhJUuk3ZALwsLVQneemlNQ/s1600/BukuTamu1.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXQe1b5Vae-2-q2NM4refCf4C4qGXraemGyMtu7lfh9w8P3Qly5x40t2UWPCPj7IywIv6vp-rFjKkVC5jbpwTzMxrhTyuSjqD7l9NLhCOe7vQuSDf4PtaQOt0V03cKix1bg2K0Tf514A/s1600/Bukutamu6.gif
Klik Simpan / Save dan lihat hasilnya.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_sSCPp2S5IKbVBgS4HjvGdrQNSaDhlDXTmkAd2OqpgCKYTlxukJf9ZdnH9SY59nuxHK8Ax67cvnOvMNKdJvfJw-I8SgvQaBHgy6xNBuLRqAaPuqlCaLNqpJTD4_MTXXHZsfLChFJcVA/s1600/Chatbox.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE6g58nwfkhRsqvnE8jOvNAAD5M5zmRVQrwlhahU7BImqxgPgsFWh0jamqoy0UbFrW-Qpxik5Y348KYe97C51aiagufxpOg3qAizQcE4cGFKFOG7MyZcMjIO5UDLkSPOLBJP2Q4di_FQ/s1600/Bukutamu3.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisK3bCJ_6ctk31zmhZFMGLGEp35mNXNsV6MT46dZo50ApdPLJKTAJX2wKpg0gzWViv6UGn1SqKyq44KhTlw7t3V1564_-hNBAsF9wDufsXUqs2_wZBB-GtSUVa5S8R8CTn6aXjSGUfOg/s1600/bukutamu2.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCH53ap570JqlIzRjJOLLVIXiMkQQU7biiRkCHlpVz6Glu4GLhgJ7T5eILs1GNVzAhWhbI0wXMDRwOpoVfU9P9j3sIRAbbORyv5NbMoXzKr8yP3Teu5-em16Ul7GDV8iCz0pyz-gVmFA/s1600/bukutamu5.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ87xFHsO4h8SosQWzXOlnWLpPcQ9eTbR4Q9fM-cFPctIS9agvu5tZB-nWj2Z6XwLpIqGaOIt1LOP-Nqg6BxaMhD6b8iciX2f-FOz69TtM0DPJ2BUwdODIbOXsk9ft1YDJnjL-iBm7fA/s1600/2131wkl.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSKhrEG0ow-c-CTQxUP06mUyP3HpLyjM4x0dnH_vayZaOqUVej5DoSVi9sZ9GRZ0wRBP2VzvB5Giqm1uKqA2EFagt72sTTucvHcRMuddCN2NTvDnBHdCXkmJUid0k4HyvIf0jSVin18Q/s1600/bukutamu4.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipGsgif3_PkZ6rzhHjeZv1vvbyiU9vT6FIfWnmAz16CvGEF4Ch58UkGaf5hJgdIzWZwuPf4Lbrs0orseMwcNPUlmyeYPbWsInd1dMbQCf9gr4w-KhAdrEHRhJUuk3ZALwsLVQneemlNQ/s1600/BukuTamu1.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXQe1b5Vae-2-q2NM4refCf4C4qGXraemGyMtu7lfh9w8P3Qly5x40t2UWPCPj7IywIv6vp-rFjKkVC5jbpwTzMxrhTyuSjqD7l9NLhCOe7vQuSDf4PtaQOt0V03cKix1bg2K0Tf514A/s1600/Bukutamu6.gif
Klik Simpan / Save dan lihat hasilnya.
Anda baru saja membaca artikel yang berkategori tips blogger
dengan judul Cara Membuat ChatBox Melayang di Blog. Jika kamu suka, jangan lupa like dan bagikan keteman-temanmu ya... By : Blog bermanfaat,tips,trick
Ditulis oleh:
Unknown - Thursday, March 28, 2013
Belum ada komentar untuk "Cara Membuat ChatBox Melayang di Blog"
Post a Comment