Berikut Ini Saya Akan Menjelaskan TEntang Bagaimana Cara Memberikan Widget Chet Box Pada Blog:
1. Daftar ke Cbox
2. Isi semua kolomnya
3. Jangan lupa checklist terms and conditions of service.
4. Klik Create my Cbox!
5. Login ke Cbox dengan mengetikan Login Name dan Password di atas.
8. Pastikan sudah kodenya di copy, lalu Login ke Blogger
9. Masuk akun Blogger sobat.
10. Masuk pada bagian Tata Letak.
11. Klik tambah gadget di posisi mana saja.
12. Pilih HTML/Javascript.
13. Masukan kode html berikut.
<style type="text/css">14. Atur ukuran dan posisi pada kode berwarna biru.
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:400px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEhdDWBQMrxJR8R_8mcWJNzuuY-dOEJLEE-aLNPa-bobsG2KiMyhCCAKYshLEymOIdZ3U0TH_KhsYoVOpmKh1KTTHqZSd58vK_uJBtvHHsdZYWyKOLk6lIsSyweXqCUvnRiEFC34CbSoc/s1600/Bukutamu6.gif') 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">
MASUKAN KODE CHAT BOX DISINI
<div style="text-align: center;">
<span style="font-size: 10px;"><span style="font-family: "Trebuchet MS",sans-serif;">Mau Widget Ini? <a href="http://ciputraruslan.blogspot.com/2013/09/cara-memasang-widget-chat-box-pada-blog_21.html" target="_blank">Klik Disini</a></span></span></div>
<div style="text-align:right">
<a href="javascript:showHideGB()">
[Tutup]
</a>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>
15. Ganti tulisan warna merah dengan kode html chat box sobat.
16. Ganti URL gambar pada kode warna ungu dengan gambar yang sobat inginkan.
17. Atur warna background dan warna border pada kode warna hijau.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt_yrsxjy3_dFSq57b387jeE1AZ38rDJ-4RrL4nKCEa6adcdDbCRk6DJJFm9pOLBNyNtyMnDAnGE1vxHamb4N-slW7cWUWNgUlWaoYKDG_gyE6TBkbeJQ4Jx5_ftEDeMoEKdf5rtTc9c4/s1600/Chatbox.png | |
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu3mqs3_zhoGpdhQoNscjBdYti5kbpCyPJ2yMdQE9pQNl6e-ARP9Ib_REcZCkUXKdt9XZ5kz6jkwvyVlYIJue-CctvF18cHntW1YxosB-SnqPGvKjVrDvA7_cYJyGpt0gGE67ClPvKsTI/s1600/Bukutamu3.png | |
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQiBNPURSo-m4PMlaCmCopEGtLYWC1ZF-aFmvll0xx9jeNm1CegbiYg_WSEyP0vpyc3Z6daEB-gGXhb6J_l0xM-P31qQZ0StNODZJFZMqBDNRa0gR90s6qLqM0gtyO1kzUDpcViU8NULk/s1600/bukutamu2.gif | |
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpUwZqTTrNEVFaI97F5u9ufWgPji8Er4uQfuRkFzCxzz9udE7INVQd2Qh2Bm363J8yIovg1Pa0ZbrqWK9yEFRv1impbhnZHnz1ERvgtyYYaKK7fxRegOnBV-o3iz_u_Gc3CGirhkmOwmI/s1600/bukutamu5.png | |
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-qF7sw9YTjqK-QKGhzR3seGKoHWLxN4VuyXZDrfk54HHdkWgJhCF9mO79Hv5sEWlcNLHDzcwNjsl0jna8M-0qZRQptR2PkIaljcha57efG1HYVWa2TSOYMEQlpWkml_88BqccUEPvybY/s1600/2131wkl.png | |
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKQfRUIG5IDD7a8Nx5CHhGHDBIG4ouzzU-Gr3Mn-g7TSEi-kxEFAksz8JHHGjLlbiHmyYqPgn94FS2J2WwWBLRedFcIp1d77JJrP9B-LDu2ksNyFm_zaoMDopvs1Yz6WAuPtjH6vehCCs/s1600/bukutamu4.png | |
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlBECjuZ9tKz67g53FRJFcpVK5sxFpeBZUFLROF69acu9JCTPbrBA17rzVEmqRqTUsQCw6PcSRWG3I7GmhFVY3tCFqZwj4XBpNLlaDXk19Re5TqQ-vXhvsOitHJrFGOK8vinz9mdPXOI4/s1600/BukuTamu1.png |
0 komentar: