Salam semua,

Hari ini saya ingin berkongsi dengan anda semua bagaimana cara untuk memasang shout box atau ruangan chatting untuk blog anda. Pastikan dahulu anda telah memiliki blog dan belum lagi memasang shout box di blog anda. Bagi yang dah pasang shout box tu boleh search kat blog aku apa-apa yang patut. Mungkin tutorial ini berguna untuk anda. Bagi tidak melengahkan masa ikuti langkah berikut ….

1. Langkah pertama anda hendaklah mendaftar di laman web ini —> KLIK DI SINI . Paparan seperti rajah di bawah akan dipaparkan.

2. kemudian anda hanya perlu klik ‘create shoutbox’. Anda akan diminta untuk regester sebagai pengguna yang sah dahulu. Jangan takut ianya berbayar dengan harga USD5.00 percuma. Isi borang seperti yang ditunjukkan pada rajah di bawah..Pastikan anda isi lengkap butiran yang diminta.

3.  Selepas itu anda hanya perlu “copy and paste” code yang diberikan. Jika anda menggunakan blogspot. Caranya ialah anda login akaun blogspot anda, masuk page layout–>page element–>add a gadget–> html/javascript. dan save. Anda akan lihat hasilnya.

4. Bagi yang menggunakan blog spot caranya ialah anda klik apperearance –> widget –> text (drag and drop) –> masukkan code shout box anda.

Sekiranya anda tidak mahu memaparkan shout box anda di bahagian sidebar. Anda perlu copy and paste code dibawah dahulu..

————————–

<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(‘http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.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;<style>
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url(‘http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png‘) no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>
<script>
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>
<div> </div>
<div>
<!– Ganti ini dengan code shoutbox kamu –>
<a href=”http://teratak-impianku.blogspot.com/”>
Chat online

</a>
<div style=”text-align:right”>
<a href=”javascript:showHideGB()”>
[close]
</a>
</div>
</div>
</div>
<script>
var gb = document.getElementById(“gb”);
gb.style.right = (30-gb.offsetWidth).toString() + “px”;
</script></div></div>
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 onclick=”showHideGB()”> </div>
<div>
<!– Copy and paste code shoutbox anda disini –>
<a href=”http://alamat_laman_blog_anda.com/”>
Chat online

</a>
<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 = (30-gb.offsetWidth).toString() + “px”;
</script></div></div>

—————————

5. Caranya ialah sama dengan langkah 3 ( bagi pengguna blogspot) dan langkah 4 ( pengguna wordpress).

6. Perhatikan code yang berwarna merah. Bacground url tidak wajib diubah. Boleh gunakan link asal atau anda ingin ubah dengan imej anda sendiri atau jika anda berminat menggunakan image shoutbox saya –> perhatikan sebelah kanan.. imej yang tertulis ‘Jom Chat’ . Gunakan link ini >> http://armanseman.com/pic/tags.png << .

7. Kemudian ‘copy and paste’ code shoutbox anda di bahagian yang bertulisan merah >><!– Copy and paste code shoutbox anda disini –> .

8. Pada kod yang berwarna merah yang seterusnya. Anda tukarkan dengan alamat laman web anda atau url blog anda. Siap.

Bagi yang berjaya tahniah buat anda dan yang tidak berjaya cuba lagi. ‘Try and error’ . Jangan takut cuba.. cuba.. cuba..

p.s : Jangan lupa tinggalkan komen sebagai tanda terima kasih.

| | | | | |

Posted in Tutorial Tags: panduan, shout box, shoutbox, tip, Tutorial, windows