Dec 15, 2010

Memasang Shoutbox Buka Tutup


Setelah dua hari tidak mengonlinekan diri, hari ini penulis kembali dengan tutorial baru. Untuk makluman, tutorial ini dibuat atas permintaan pelawat ini di shoutbox. Soalannya juga berkait rapat dengan shoutbox iaitu cara memasang shoutbox buka tutup di sidebar. Berapa banyak perkataan shoutbox daa...

Cara memasangnya tidaklah sukar sebenarnya, malah tidak mengambil masa sehingga lima minit pun untuk menyiapkannya.

1. Login ke Blogspot.

2. Pilih Layout - Page Elements.

3. Pilih Add a Gadjet - HTML / Javascript.

4. Kemudian, salin kod di bawah ini ke dalamnya.

<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://3.bp.blogspot.com/_LZtXSNcp76A/SzzN08B1K5I/AAAAAAAAA0U/QT4rY6-FhI8/s320/tabs.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, 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">

Tampal Kod Shoutbox Di Sini

<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>

Tulisan berwarna ungu menandakan kedudukan shoutbox anda di sidebar. Semakin besar nombor yang anda gunakan, semakin ke bawahlah kedudukannya nanti.

Nota : Jangan tulis apa-apa pada bahagian Title di gadget HTML / Javascript anda. Biarkan kosong.

5. Save.

Selamat mencuba. Semoga berjaya.

Via : Anarm

14 Comment

Afendi Othman Thu Dec 16, 03:14:00 AM

gud info....thanks

Eriyza Thu Dec 16, 09:59:00 AM

@Afendi Othman
Sama².

Pustaka Nur Iman Fri Dec 24, 04:12:00 PM

terima kasih

Eriyza Wed Dec 29, 10:26:00 AM

@Pustaka Nur Iman
Sama²

iPai Tue Jan 25, 06:51:00 PM

salam .. cik eriyza, thanx for d code .. boleh tak saya nak wat tutorial pasal nak tukar picture perkataan shoutbox hijau tuh ..

saya tak tau coding, tapi saya tau cara nak tukar .. saya link kan ke post ini .. kalau tak boleh, bgtau pliz ..

Eriyza Tue Jan 25, 11:23:00 PM

@iPai
Bleh saja asalkan diberi kredit kembali. :)

iPai Wed Jan 26, 08:08:00 AM

@Eriyza okeh .. saya akan ...

cappuccino Thu Jan 27, 05:42:00 PM

salam. macam mane nak besarkan gambar yang kite letak sebagai header tuh ?

Eriyza Thu Jan 27, 11:17:00 PM

@cappuccino
Wat banner mengikut saiz header anda, kemudian gantikan saja dgn banner yg sedia ada dlm Design > Page Elements > Add a Gadget > Page Header.

iPai Fri Jan 28, 12:33:00 PM

@iPai

Kak Eriyza, ni post ye
http://ipai-ans.blogspot.com/2011/01/shoutbox-buka-tutup-aka-keluar-masuk.html

zintVSkapur Mon Jun 13, 04:12:00 AM

macam mna nak buat shoutmix kat tepi.. saya dah buat tapi dia kat tengah2.. info---> ojaysan.blogspot.com

Eriyza Mon Jun 13, 11:24:00 AM

@zintVSkapur
Dah ikut seme step dgn betulkah?? Kalo dah betul, mungkin x sesuai dgn template. Cuba wat di blog percubaan dgn menggunakan template blogger yg original.

Iemrun Fizri Wed Jul 06, 08:19:00 AM

Thanz,sangat membantu...:)

Eriyza Wed Jul 06, 02:38:00 PM

@Iemrun Fizri
Semoga bermanfaat.

Post a Comment

Gunakan tatabahasa yang betul sewaktu menulis komentar agar mudah difahami oleh penulis. Terima kasih. :-)

Sila ambil perhatian perkara² berikut :-

1. Tinggalkan nama dan url blog atau laman web anda.
2. HTML tag seperti <b>, <i>, <a> boleh digunakan.
3. Sila berhemah di dalam berbahasa.