15 June 2010

Tutorial : Cara Buat Auto Hide Shoutbox & Chatbox Pada Sebelah Kanan Blog

Atas permintaan Lanun akan sharekan cara untuk buat chatbox / shoutbox yang di pasang pada sebelah tepi blog korang. Chatbox ni jugak auto hide, hanya show bila kita klik menu dia. Cara untuk buat chatbox macam kat blog ni blog ping post terbaru ping up trafik!.

Series, memang tak susah dan sangat mudah dengan tutorial dari lanunsepet. Chatbox stail macam ni nampak lebih kemas dan stailo. Ramai rasanya dah buat style macam ni.

Terbaru anda jugak boleh gunakan kode skrip auto hide ini untuk widget yang semakin hangat sekarang iaitu Wawwi blogwalking network, yang boleh jana wang, dan jana trafik dengan mudah. Ia hasil dari designer tempatan dan Lanun tgk makin ramai yang pakai, jadi korang just gantikan tulisan purple tu dengan kod /skrip  Wawwi widget blogwalking.

So kalau sesiapa berminat nak tukar yang lama jadi chatbox autohide boleh disorok sorok ni boleh rujuk tutorial kat bawah ni.

1. Log in ke dashboard blog korang
2. Layout > Page Element > Add a gadget > HTML / Javascript
3. Copy n Paste semua code dibawah nun dalam content kotak HTML / javascript
4. Tak perlu letak title
5. Perasan tak tulisan berwarna purple tu?
6. Gantikan ayat berwarna purple dengan seluruh kod/skrip shoutbox / chatbox korang.
7. Tekan save

Jadi sekarang korang boleh buang chatbox yang lama. Sekarang chatbox auto hide tu akan menempek kat sebelah kanan tepi blog korang. Pastikan hati hati masa copy n paste jangan tertinggal sedikit pun untuk elak error. Gunakan CTRL F (cari perkataan), CTRL C (copy) dan CTRL V (paste) untuk mudahkan korang buat tutorial ni.

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


GANTIKAN LINE NI DGN KOD/SKRIP WAWWI/CHATBOX KORANG


<div style="text-align:right">
<a href="javascript:showHideGB()">
[close/tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

credit to : http://bintangzither.blogspot.com/ tempat rujukan lanun. TQ
Blog Widget by LinkWithin

32 komen disini yer..:

a kl citizen said...

ilmu dikongsi ni berkat...
tq

LaNuNsepet said...

yer kak :-)

dadan said...

wah terima kasih ya...

iena.[banana] said...

tenssss! akhirnye jumpe gak code yg betul2 jadi. tens yee.;)

Anonymous said...

lanun nk tanya ckit...cbox 2 nk kena daftar x?atau terus copy jer?

LaNuNsepet said...

to anynomus :

kna reg dulu..kalu tak takleh :-)
dun worry cket jer nak isi form dier :-)

Anonymous said...

tQ lanun..credit diberikan kepada blog yg kita ambil 2 macam mana nk tulis?penting x?

LaNuNsepet said...

ianya penting dari segi moral jer :-)
letak n tak letak pun xpe..

tp better letak..
yer lakan menghargai jasa si idea asal.. :-)

kyrul said...

tq 4 the info
www.uneverstudy.blogspot.com

nisa fadzil said...

thanks untuk info :]

Lukisan Minimalis Murah said...

Makasih atas postinganny mas,, sukses selalu D buat yg posting :)

muLan mia said...

aha... dlm byk2 tutorial. tutorial ni pling bkesan.. tq

Khairil Shahmi Shaidun said...

selesai satu lagi masalah aku...thanks

marina anakcikbob said...

lanun, tolong sikit..
aku punya gambar tab shoutbox xshow 100% la..
dia separuh je..
caner nak nampakkan semua?
paham x masalah aku ni ek?
ssh la nak terangkan..
cuba g kat blog aku jap..

LaNuNsepet said...

to marina :

maaf lambat, lanun dah cek marina nyer shoutbox nampak ok jer, mgkn marina dah jumpe caranya.

maaf lamabt.

lanun nak cadang cek kat website shoutbox tu bhgn seting, n setting witdh n heigth dier balik sehingga sesuai.. itu cadangan lanun lar, tak pasti la berjaya ke tak he3

marina anakcikbob said...

da ok da sebab aritu tanya kat blog yg buat tab shoutbox besar2. so, dia tentu tau kan..

mmg setting width dia tapi bukan dekat coding tab tu. kat coding lain.. huhu..

LaNuNsepet said...

owhoo.. bagusla dah jumpa :-)
maaf lanun tak mebantu aritu ..he3

marina anakcikbob said...

eh.. xpe2.. memang jalan2 mintak tolong orang.. huhu..

Nur Zaheera said...

thanks for sharing :')

Nazura Hanim said...
This comment has been removed by the author.
LaNuNsepet said...

to nazura hanim :
rasanya lanun paham ape yg saudari maksud kan. Tapi bila lanun buka tadi di blog saudari "adekchumelstory" semuanya nampak. Mungkin bila pergi komputer orang lain yang punyai setting dimension display berlainan ( dimension monitor laptop lanun jenis widescreen) memnyebabkan ape yang saudari tanya di atas. buat masa ni tu jawapan Lanun :-)

SITI NOORNADIYANA said...

thanks from blogger baru. :)

Pak Syahot said...

ok..maybe sy bru jumpe post lanun neyh...x sangke ade jgk lanun yg baek lg dlm dunie neyh..hehehe mekaseh ye ilmu bru neyh... =)

Kotak Mancis / S_Basri said...

salam... saya dah buat cara yang lanun ajar... dah tukar pic skali... tapi masalahnya bila saya hide shout box tu... gambar yang nampak ckit ja, xpenuh... macam mana nak buat ehhh...

nie bolg saya : ( Kotak Mancis )

Lilynn Sazlin said...

thanx alot abg lanun :)
sy dah buat dah shoutmix autohide guna kod abg bg tu.

tp, ada tak cara-cara nak buat header dia tu ada kartun? sy pernah nmpk ada blog buat. cmne yer?

aNna lurve j0e said...

salam..thnxx 4 the tutor ea :)

wonder me said...

Salam.
Terima kasih kerana berkongsi tutorial ni. Saya follow tut ni, and terus jadi - Alhamdulillah.
Terima kasih sekali lagi.
:)

Jija said...

terima kaseh..
senang dan mudah :)

mamaainaqistina said...

terima kasih ...sgt senang...sebelum pernah cuba buat ikut tutoriol yg lain...tak jadi..ni ok jer..sekali buat dah ok..tq very much...

pistachio rina said...

thanks...
for this tuto...

Anonymous said...

http://site.ru - [url=http://site.ru]site1[/url] site
site2

bunga mawar said...

wuih...mantap nih. bisa di coba pasang di web Poker Facebook saya. thanks Gan