Memasang Chatbox Melayang di Kiri/ kanan Pada Blog

Tampilan Blog sobat akan lebih menarik apabila sobat menambahkan widgets Chatbox pada sisi kiri atau sis kanan pada blog sobat. Chatbox ini berguna sebagai buku tamu pengunjung, atau hanya sebagai tempat sharing sharing pengunjung terhadap blog kita. OK langsung saja gan :

Right Hidden Chatbox
  • <!– left hidden chatbox by http://www.m-azka.com/ START –> <style> #hcl {position:fixed;top:100px; left:0px; z-index:+1000; } * html #hcl {position:relative;}.hcltab {height:100px;width:30px; float:left; cursor:pointer;background:url(‘http://3.bp.blogspot.com/_Z_KyM3IvEFQ/S2Evq5hIpUI/AAAAAAAABAM/3qo6ScKImhw/s400/cbred-LEFT.png&#8217;) no-repeat; } .hclcontent { float:left;border:2px solid #790909; background:#f3f6f7; padding:10px; } .hc-credit {font-size:9px} .hc-credit a {text-decoration:none} </style> <script type=”text/javascript”> function showHidehcl(){ var hcl = document.getElementById(“hcl”); var w = hcl.offsetWidth; hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0); hcl.opened = !hcl.opened; } function movehcl(x0, xf){ var hcl = document.getElementById(“hcl”); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hcl.style.left = x.toString() + “px”; if(x0!=xf){setTimeout(“movehcl(“+x+”, “+xf+”)”, 10);} } </script><div id=”hcl”> <div>
    <!– KODE SHOUTMIX ANDA DISINI –>
    <br /> <div> <span style=”float:left”> <!– THIS CREDIT MUST STAY INTACT FOR LEGAL USE –>Get this<a href=http://www.m-azka.com/2011/02/cara-membuat-chat-kotak-chatting.html target=”_blank”>Widget</a>and<a href=http://www.m-azka.com/2011/02/cara-memasang-chatbox-hide-show.html target=”_blank”>Desaign!</a></span> <span style=”float:right”> <a href=”javascript:showHidehcl()”> [close] </a> </span> </div> </div> <div onclick=”showHidehcl()”> </div>
    </div> <script type=”text/javascript”> var hcl = document.getElementById(“hcl”);hcl.style.left = (30-hcl.offsetWidth).toString() + “px”; </script> <!– left hidden chatbox by http://www.m-azka.com/ END –>

Left Hidden Chatbox

  • <!– right hidden chatbox by http://www.m-azka.com/ START –> <style> #hcr {position:fixed;top:100px; z-index:+1000; } * html #hcr {position:relative;} .hcrtab {height:100px;width:30px; float:left; cursor:pointer;background:url(‘http://b.imagehost.org/0611/buku-tamu.png&#8217;) no-repeat; }.hcrcontent { float:left; border:2px solid #003e82; background:#f3f6f7;padding:10px; } .hc-credit {font-size:9px} .hc-credit a {text-decoration:none}</style> <script type=”text/javascript”> function showHidehcr(){ var hcr = document.getElementById(“hcr”); var w = hcr.offsetWidth; hcr.opened ? movehcr(0, 30-w) : movehcr(20-w, 0); hcr.opened = !hcr.opened; } function movehcr(x0, xf){ var hcr = document.getElementById(“hcr”); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir;hcr.style.right = x.toString() + “px”; if(x0!=xf){setTimeout(“movehcr(“+x+”, “+xf+”)”, 10);} } </script> <div id=”hcr”> <div onclick=”showHidehcr()”> </div> <div>
    <!– KODE SHOUTMIX ANDA DISINI –>
    <br /> <div> <span style=”float:left”> <!– THIS CREDIT MUST STAY INTACT FOR LEGAL USE –>Get this<a href=http://www.m-azka.com/2011/02/cara-membuat-chat-kotak-chatting.html target=”_blank”>Widget</a>and<a href=http://www.m-azka.com/2011/02/cara-memasang-chatbox-hide-show.html target=”_blank”>Desaign!</a></span> <span style=”float:right”> <a href=”javascript:showHidehcr()”> [close] </a> </span> </div> </div> </div><script type=”text/javascript”> var hcr = document.getElementById(“hcr”);hcr.style.right = (30-hcr.offsetWidth).toString() + “px”; </script> <!– right hidden chatbox by http://www.m-azka.com/ END –>(UPDATE : 10 MEI 2011)
    Keterangan: Kalau Belum Punya Masuk Ke sini : Cara membuat Chat / Kotak Chatting Shoutmix  #hcr { position:fixed;top:100px; /* Menunjukkan bahwa jarak tab dari atas adalah sejauh 100px. Bisa anda ganti denganbottom:100px yang berarti jarak tab dari bawah menjadi sejauh 100px */ z-index:+1000; } .hcrtab {height:100px; /* tinggi tab pembuka hidden chatbox */width:30px; /* tinggi tab pembuka hidden chatbox */ float:left; cursor:pointer;background:url(‘http://2.bp.blogspot.com/_Z_KyM3IvEFQ/S2EvgsgQ7nI/AAAAAAAAA_k/gq8QRLZcHFs/s400/cbblue.png&#8217;) no-repeat; /* gambar yang dijadikan sebagai tab pembuka hidden chatbox */ }
    .hcrcontent { float:left; border:2px solid #003e82; /* warna dan ukuran border hidden chatbox */ background:#f3f6f7; /* warna background hidden chatbox (tidak perlu diganti jika anda mengedit kode lain pada style) */ padding:10px; }

 

Copy kan script di atas caranya :
Klik Dasbord – Tata Letak – Elemen Lama, Lalu anda klik tambah gadget / add gadget dan pilih opsi HTML/ Javascript. Paste kode HTML yang tadi anda copy sebelumnya. Klik OK dan Save, ENJOY !
Berikut ini adalah keterangan-keterangan kode yang mungkin akansedikit membingungkan anda, tapi akan saya bantu jika adakesulitan didalamnya:
1. top:100px adalah keterangan jarak icon hidden chatbox dari atas (top) sejauh 100 px
2. height:100px adalah tinggi (height) tampilan icon hidden chatbox yang sebesar 100 px
3. width:30px adalah lebar (width) tampilan icon hidden chatbox yang sebesar 30 px
4.background:url(‘http://2.bp.blogspot.com/_Z_KyM3IvEFQ/S2EvgsgQ7nI/AAAAAAAAA_k/gq8QRLZcHFs/s400/cbblue.png&#8217;) no-repeat adalah icon hidden chatbox yang akan berguna untuk menampilkan chatbox yang disembunyikan
5. border:2px solid #003e82 adalah warna (solid) dan ukuran border yaitu #003e82 dan border sebesar 2 px
6. background:#f3f6f7 adalah warna background pada chatboxsaat ditampilkan

Berikut ini adalah icon hidden chatbox dan warna border yang serasi dan bisa anda gunakan dalam hidden chatbox anda :

URL Gambar http://1.bp.blogspot.com/_GmDoFC87tnc/S9mFSX2I_qI/AAAAAAAAAfs/60n9Gquxt6o/s1600/cbblue-2.png
Warna border #0079a0

URL Gambarhttp://3.bp.blogspot.com/_GmDoFC87tnc/S9mFR0N8DLI/AAAAAAAAAfk/HRgxuRNSsWk/s1600/cbblue.png
Warna border #003e82

URL Gambar

Sumber: http://www.m-azka.com

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s