Tutorial : Cara Meletakkan Chat Box Di Sidebar Blog Anda / Hidden Shoutbox Anda.

Salam kepada semua pembaca blog Expect the Unexpected. Kita berjumpa lagi di seksyen tutorial. Setelah menerima banyak pertanyaan mengenai bagaimana cara meletakkan 'shout box' atau 'cbox' di sidebar, aku akan menulis tutorial berkenaan dengannya bagi entry kali ini. Jenuh nak menjawab sebab setiap kali aku nak terangkan aku kena bagi link blog orang, aku pun bukannya bookmark blog tersebut. Dah satu kerja aku kena buat, cari balik blog yang terbabit. Aku faham yang kebanyakan blogger malas nak meletakkan banyak benda di bahagian gadget mereka ataupun tidak mahu menyusahkan pembaca blog mereka untuk scroll mencari chatbox blog mereka. Untuk menyelesaikan masalah ini, cara paling alternatif adalah dengan meletakkan chatbox mereka di bahagian sidebar. Aku akan memberi 2 tutorial untuk membantu mereka yang memerlukan. Baiklah, tanpa membuang masa aku akan menerangkan mengenai caranya di entry kali ini.

Tutorial : Cara Meletakkan Chat Box Di Sidebar Blog Anda / Hidden Shoutbox.

1. Dashboard-Design-Page Element-Add Gadget-HTML/JAVASCRIPT.
2. Copy code kat bawah ni dan paste kat HTML JAVASCRIPT tu.
* Jangan lupa letak code shoutbox atau cbox korang.

<style type="text/css">

#gb{

position:fixed;

top:50px;

z-index:+1000;

}

* html #gb{position:relative;}

.gbtab{

height:400px;

width:60px;

float:left;

cursor:pointer;

background:url('http://img574.imageshack.us/img574/3243/14065584.png') no-repeat;

}

.gbcontent{

float:left;

border:2px solid #666666;

background:#F5F5F5;

padding:10px;

}

</style>

<script type="text/javascript">

function showHideGB(){

var gb = document.getElementById("gb");

var w = gb.offsetWidth;

gb.opened ? moveGB(0, 150-w) : moveGB(40-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">

MASUKKAN KOD SHOUTBOX ANDA DISINI

<div style="text-align:right">

<a href="javascript:showHideGB()">

[close]

</a>

</div>

</div>

</div>

<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.right = (60-gb.offsetWidth).toString() + "px";

</script>

Select dan CTRL + C untuk copy kod diatas.

• Yang warna purple tu width and height utk gambar.
• Yang warna oren tu url gamba yang korang nak.
• Yang warna merah tu , kalau kau kena adjust sikit. Sebab kengkadang gambar tu boleh tersorok tak tunjuk sepenuhnya gambar tu. Dan kengkadang dia tutup pun tak habis. Kalau kau guna code ni dan ok, takde masalah, tak payah gatal tangan ubah code tu. Kalau tak tau, bgtau aku tau.

Korang boleh buat sendiri gak gambar tu. Guna photoshop je.
Kredit to : http://strawberrychocolatelicious.blogspot.com/

P/S :  Masih baru dalam bidang tutorial. Harap dapat  beri tunjuk ajar yeah senior. :D

 

---

Pecah Kaca Pecah Simen, Sudah Baca Harap Komen. :)

---