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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi07kf75mDyi_csjgZQkkX5dizCGTFDpLZChZy4T8IAXbBtIQUAX-jYBtPp5w8yoevd8v2JanlIiINJ9MkuxTvPwW2pQ_k3ttjelVx4LyoBSQv2Lu5Q8vw7cgei4wHrTW6IbK-hqo6R9wIo/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

41 komen disini yer..:

Guru said...

ilmu dikongsi ni berkat...
tq

LaNuNsepet said...

yer kak :-)

dadan said...

wah terima kasih ya...

nurulyena 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 :)

AntBully said...

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

Unknown 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 :')

Eulalia 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 :-)

Anonymous said...

thanks from blogger baru. :)

Syahir Ramli 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 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 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?

Anonymous said...

salam..thnxx 4 the tutor ea :)

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

nana said...

thanks...
for this tuto...

bunga said...

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

Unknown said...

Pernah dengar pasal BestMobile..Apa itu Best Mobile, apa yang Best..Best sangat tu?
Ada yang bagi komen bagus, ada yang masih sangsi...apa kata kita dengar sendiri
apa kata CEO Best Mobile ucapkan melalui 13 siri video bermula disini..
http://jombestmobile.com/pioneer

Unknown said...

KAMI SEKELUARGA TAK LUPA MENGUCAPKAN PUJI SYUKUR KEPADA ALLAH S,W,T
dan terima kasih banyak kepada AKI atas nomor togel.nya yang AKI
berikan 4 angka [7116] alhamdulillah ternyata itu benar2 tembus AKI.
dan alhamdulillah sekarang saya bisa melunasi semua utan2 saya yang
ada sama tetangga.dan juga BANK BRI dan bukan hanya itu AKI. insya
allah saya akan coba untuk membuka usaha sendiri demi mencukupi
kebutuhan keluarga saya sehari-hari itu semua berkat bantuan AKI..
sekali lagi makasih banyak ya AKI… bagi saudara yang suka main togel
yang ingin merubah nasib seperti saya silahkan hubungi KI JAYA WARSITO,,di no (((085-342-064-735)))
insya allah anda bisa seperti saya…menang togel 970 JUTA , wassalam.


dijamin 100% jebol saya sudah buktikan...sendiri....







Apakah anda termasuk dalam kategori di bawah ini !!!!


1"Dikejar-kejar hutang

2"Selaluh kalah dalam bermain togel

3"Barang berharga anda udah habis terjual Buat judi togel


4"Anda udah kemana-mana tapi tidak menghasilkan solusi yg tepat


5"Udah banyak Dukun togel yang kamu tempati minta angka jitunya
tapi tidak ada satupun yang berhasil..







Solusi yang tepat jangan anda putus asah... KI JAYA WARSITO akan membantu
anda semua dengan Angka ritual/GHOIB:
butuh angka togel 2D ,3D, 4D SGP / HKG / MALAYSIA / TOTO MAGNUM / dijamin
100% jebol
Apabila ada waktu
silahkan Hub: KI JAYA WARSITO DI NO: [[[085-342-064-735]]]


ANGKA RITUAL: TOTO/MAGNUM 4D/5D/6D


ANGKA RITUAL: HONGKONG 2D/3D/4D/



ANGKA RITUAL; KUDA LARI 2D/3D/4D/



ANGKA RITUAL; SINGAPUR 2D/3D/4D/



ANGKA RITUAL; TAIWAN,THAILAND



ANGKA RITUAL: SIDNEY 2D/3D/4D

Medical Value Travel India said...

Great post and thanks for sharing....

Health Blog India said...

its very cute. thanks too share.....

Tips and Tricks blog said...

I love that idea. Awesome Post..

Dr. R K Alwadhi said...

Thanks for sharing that. It was fun reading it. :-)

penile implant said...

That was a VERY interesting one! Seriously interesting.

Dr. Neelam Suri said...

That is great to hear, thank you for reading!

Daftar Sabung Ayam Klik Disini said...

That is great to hear, thank you for reading!

AGEN RESMI DAN TERPERCAYA SEASIA - 1 ID DAPAT BERMAIN 275 GAME++ WWW.KAISARGAMING.ID

Special Promo Kaisar Gaming

Bonus Promo :
Bonus First Deposit 100%
Jackpot Sabung Ayam 100%
Bonus Next Deposit 10%
Bonus Cashback 5%
Bonus Turn Over 1%
Bonus Top-up (Special in Kaisar Gaming)

1 ID bisa untuk main ratusan permainan
min deposit/withdrawl Rp 20.000,

Permainan Kaisar Gaming :
Sportsbook (bola)
Sexy Live Casino
Slot Games
Sabung Ayam
Tembak Ikan

Hubungi kami :
Whatsapp (WA) : +85585875998
BBM ID / Pin : KaisarG
Line ID : kaisargaming
www.kaisargaming.id

buat yang suka main sabung ayam asli maupun main sabung ayam online rekomendasi banget nih websitenya banyak berita bermanfaat tentang perawatan ayam aduan dan berita tentang ayam aduan terbaik !!
Berita sabung ayam, Perawatan ayam aduan Dan Join Sabung Ayam Disini

untuk baca berita tentang game online terkini bisa klik disini :
Seputar Game Online di Indonesia

tips cara menang :
Tips dan Trick Bermain Game Online Berbayar Agar Selalu Menang Klik Disini

Agen Terbaik Sepanjang masa yang rela memberikan tips bermainnya agar selalu menang
Mengupas tuntas tentang judi Online agar selalu menang klik disini

untuk baca berita terkini tentang Sepak Bola Dan Olahraga lainnya bisa klik disini :
Berita Sepak Bola dan Sport Yang Selalu Update

Banyak Promo Game Online nih disini :
VOCHER GAME ONLINE GRATIS !!!!

Banyak Promo nih buat yang suka Gaming :
Suka Main Game Online

testodex cypionate 250 said...

I regularly visit your site and find a lot of interesting information.
Not only good posts but also great comments. Thank you and look forward to your page growing stronger.