Cara Membuat widget Cbox/buku tamu di kanan Blog

Asslamualaikum..

Selamat malam semua, malam ini saya akan memberikan trik agar Cbox berada di sebelah kanan blog seperti di blog Krisnanda Go Blog, oke ngga usah kelamaan, langsung aja simak tutorial berikut :

  1. Pertama baca Bismillah, agar dimudahkan setiap langkah kita.
  2. Lalu login ke Blogger.
  3. Masuk ke Tata Letak
  4. Klik tambah gadget (posisi terserah anda)
  5. Selanjutnya pilih HTML/Javascript.
  6. Masukan Script dibawah ini.
<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:400px;
width:30px;
float:left;
cursor:pointer;
background:url('http://4.bp.blogspot.com/-bj4eeCVV6hM/Tk9GSbUTreI/AAAAAAAAAKA/ZCtLxHeV5uY/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://krisna18.blogspot.com/2014/01/cara-membuat-widget-cboxbuku-tamu-di.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>

7. Warna Biru untuk mengatur ukuran dan posisi,
8. Ganti tulisan warna merah dengan kode html chat box anda,
9. Ganti URL gambar berwarna ungu dengan gambar yang anda inginkan, bila tidak ingin diubah juga tidak apa-apa. Dan jika anda tidak merubah URL hasil gambarnya akan seperti ini

Jika anda ingin merubah gambarnya, bisa memilih gambar-gambar dibawah ini :


Tombol Chat Box http://1.bp.blogspot.com/-h1DI2Vvt4y0/Tk9GTOFmFDI/AAAAAAAAAKE/6j4-eg8bfVw/s1600/Chatbox.png
Tombol Chat Box http://2.bp.blogspot.com/-N8RQFYloE8U/Tk9GQiznVRI/AAAAAAAAAJ0/w0zESnm6QBI/s1600/Bukutamu3.png
Tombol Chat Box http://3.bp.blogspot.com/-R-qijeJYiRc/Tk9GQdoO_sI/AAAAAAAAAJw/-gz0KZf_fzc/s1600/bukutamu2.gif
Tombol Chat Box http://2.bp.blogspot.com/-QIvW70iUtw0/Tk9GSDXDH7I/AAAAAAAAAJ8/W__GrhmvUao/s1600/bukutamu5.png
Tombol Chat Box http://1.bp.blogspot.com/-Fu1GTJiqjAs/Tk9GPChUlhI/AAAAAAAAAJo/Rc01LxQqJZQ/s1600/2131wkl.png
Tombol Chat Box http://1.bp.blogspot.com/-bbW-SQuPxjA/Tk9GRVOM53I/AAAAAAAAAJ4/3O-QoudrWOA/s1600/bukutamu4.png
Tombol Chat Box http://4.bp.blogspot.com/-kId5EVOdKjY/Tk9GPgw2uCI/AAAAAAAAAJs/5M95sfmpUa8/s1600/BukuTamu1.png


10. Terakhir Klik Simpan.



Sekian Artikel dari Krisnanda Go Blog semoga bermanfaat.

Postingan terkait:

3 Tanggapan untuk "Cara Membuat widget Cbox/buku tamu di kanan Blog"

Unknown mengatakan...

keren gan, ane coba dulu ya

Krisnanda Space mengatakan...

silahkan gan.. :)

Zinote mengatakan...

keren sob, izin coba :)