Subscribe via RSS Feed

Jom Modify Shoutmix! Jadikan Shoutbox Korang AJAX’ed + Custom Background!

Written by : Taz | Posted at : 10/02/2010 | 91 comments | 1,621 views

Ni tutorial untuk buat “Ajax Popup Shoutbox”.. Contoh boleh tengok dekat sidebar aku tu.. Yang ada emoticon muka gatai + text “My Shoutbox”.. ;) Try klik.. Akan kuar satu popup JQuery & then dekat middle/tengah, akan kuar shoutbox.. Pasal custom background tu tak susah sangat sebab cuma “overlay” / tindih gambar background tu jer.. Gambar statik memang senang.. Aku tak reti sangat main CSS (Casading Style Sheet) ni.. :aie:

Idea nak buat Ajax Popup Shoutbox ni aku dapat secara tak sengaja masa baca entri :

- Anarm : http://anarm.net/blog/tutorial-untuk-sorokkan-shoutbox.html
- Mohd Isa : http://blog.mohdisa.com/tutorial/membuat-latarbelakang-pada-chat-box-anda/

So aku pun terus godek-godek pak cik Google & curi segala harta harun yang dia bagi.. Berejam gak aku nk cari code Ajax ni.. Memang banyak & senang jumpa code2 Ajax ni.. Tapi kebanyakkanya code untuk orang yg dah pro ataupun expert.. Tercirit la aku nak adjust code2 tu semua.. :bloody:

Klik button dekat atas ni untuk display code untuk Ajax Popup Shoutbox.. Sorry tak dapat nak display code tu directly dekat sini.. Tadi aku dah buat dah pakai plugin apa ntah nama dia.. Tapi terus blog aku ni jadi gila + huru hara.. Biol punya plugin.. Nasib baik la semalam aku ada buat backup.. Kalau tak.. Pergh.. Bisul kepala aku nk ngejas balik..

Alright.. First.. Copy & pastekan code atas tu dekat notepad then save la dulu.. Buat sparepart (backup)..

AJAX POPUP SHOUTBOX Tutorial

*Gambar boleh dibesarkan.. Just klik jer dekat gambar2 tu.. =)*

———————-

Step 1 – Open code korang tu (yg copy-paste kat atas tadi), then cari code dekat bawah ni (yg aku display gambar ni), tuka link : http://kertaz.net/ajaxshoutmix/red.png dengan URL link gambar background Shoutmix korang.. Dekat bawah ada free 11 kaler background Shoutbox.. Nak lawa-lawa design sendiri.. :)

———————-

Step 2 – Tuka link “http://kertaz.net/ajaxshoutmix/shoutboxtab.png“ kepada link gambar yg korang nk gunakan untuk popup Ajax shoutbox..

———————-

Step 3 – Tuka code dekat bawah ni dengan code Shoutmix shoutbox korang.. Kalau nak Shoutmix shoutbox korang ada custom background, resize shoutbox korang tu ke * width=”261″ height=”380″ *.. Sementara jer pakai saiz ni.. Klau nk besarrrrr punya saiz nanti korang ejas la sendiri code-code tu.. :-[)

———————-

Step 4 – Step ni OPTIONAL.. Optional ni korang nak buat boleh, tak buat pun boleh.. Korang boleh delete ataupun biar jer code ni.. Kalau biar = Shoutbox korang ada link ke entri ni.. So boleh la orang lain/visitor blog korang pasang skali Ajax Popup Shoutbox ni dekat site or blog diorang.. Klau korang tak mau orang lain tiru ataupun tak nak display linkback, just delete 3 line code ni.. Jangan delete salah code dah la.. =)

———————-

Freebies Shoutmix Shoutbox Background!






Download all background file : HERE


*Background2 ni cuma sesuai untuk Shoutbox bersaiz Width = 261, Height = 380 sahaja.. Kalau korang nak letak shoutbox lagi besar dari saiz ni, kena ejas la CSS dekat code di atas & kena re-design sendiri background..*

———————-

USAGE

Buat pengguna WordPress (WP).. Just letak jer code yang dah korang edit tu dekat bahagian Widget.. Amik kotak “Text” then letak code tu.. Buat pengguna Blogspot aku tak tau korang leh sumbat dekat mana.. Sebab aku tak penah guna blogspot.. Maap.. Mintak2 la ada orang yg tau datang tengok entri ni.. Amin.. :love:

Kalau ada apa2 pertanyaan boleh drop komen dekat bawah.. Aku akan jawab kalau aku tau jawapan kpada soalan korang tu.. Sekian ;)

———————-

UPDATE – Only Background

?View Code PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

</script>
<style>
a {color:#ffffff; text-decoration:none}

img { border: none; }
 
#ajaxshoutbox {
  background:url(http://kertaz.net/ajaxshoutmix/red.png) no-repeat 0 0 transparent; 
  width:272px; 
  height:460px;
  padding:56px 0 20px 5px;
}
 
#author {
padding:8px 0 0 0;
}
 
</style>
</head>
<body>
<div id="ajaxshoutbox">
 
<!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe title="kertaz" src="http://www5.shoutmix.com/?kertaz" width="261" height="380" frameborder="0" scrolling="auto">
<a href="http://www5.shoutmix.com/?kertaz">View shoutbox</a>
</iframe>
<!-- End ShoutMix -->
 
<div id="author">
<a target="blank" href="http://kertaz.net/tutorial/jom-modify-shoutmix-jadikan-shoutbox-korang-ajaxed-custom-background"/><img src="http://kertaz.net/ajaxshoutmix/linky.png"/></a>
</div>
</div>
</body>

Happy customizing! :)

Comments (91)

Trackback URL | Comments RSS Feed

  1. yash says:
    10/02/2010 at 1:21 PM

    untuk blogspot tarak ka bunk kertas?? hak3 :bloody: yash´s last blog ..Tahukah Anda 7 Perkara Ni??

    Reply
  2. Kals says:
    10/02/2010 at 2:10 PM

    pergh….gempak siot :)

    Reply
  3. mohdisa says:
    10/02/2010 at 2:16 PM

    thanks for linkback…hehe, mantap beb. siap ada free give lg. cantik tertarik. :P
    mohdisa´s last blog ..Satu Emas Satu Perak Dua Gangsa

    Reply
  4. eiyda says:
    10/02/2010 at 2:21 PM

    dah buat…timekasih atas tunjuk ajo kamo bang kertaz..yer..wahahaha nnti aku blanje ko eskem pop yer..hahha
    eiyda´s last blog ..eiyDa:: Auuuww,,,,SEKSI u..::

    Reply
  5. azizan4444 says:
    10/02/2010 at 9:56 PM

    bro tlg buat utk aku..aku blur bab2 cmni..ahakz…bole thn desgn die tuh..lawo… 8)

    Reply
  6. Anarm says:
    11/02/2010 at 2:43 AM

    aku dh amik code tu.. nanti nak masukkan kt blog aku.. tu lepas aku siap design.. tanak ahh pkai design ko.. huh! hahahaha :o: Anarm´s last blog ..Tutorial untuk sorokkan shoutbox

    Reply
  7. ery says:
    11/02/2010 at 11:23 AM

    cantek la…
    tp aku dah wat open sesame..
    heheh…
    ery´s last blog ..Perempuan Sekarang Tak Boleh Dipecayai

    Reply
  8. naz says:
    11/02/2010 at 9:44 PM

    :choler: aku dah buat tadi, tapi kurang menarik sebab aku rasa kena design baru punya background. design ko agak kurang cantik (ayat jaga hati) :D btw terima kasih kertaz :)

    Reply
  9. acapz says:
    12/02/2010 at 9:06 AM

    wow. smart ni. xterpkir aku plak bleh wt camni. haha. gmpk beb. anyways tq la sharing. ehem bnyk tu coding diew. haha.
    acapz´s last blog ..Firefox 3.6 – Buka Tab Baru Di Bahagian Paling Kanan

    Reply
  10. lizz says:
    12/02/2010 at 9:41 PM

    pergh. smart! pandai ko. huhu
    lizz´s last blog ..Gong Xi Fa Chai Buat Kaum Cina, Lagu Bikin Insaf Buat Orang Islam

    Reply
  11. jard says:
    12/02/2010 at 9:57 PM

    ah.. ku pakai chatbox lain. ehehe
    jard´s last blog ..Adat berkawan dengan lelaki

    Reply
  12. khairil says:
    13/02/2010 at 12:33 AM

    bro, kalau guna tutotial dari anarm, boleh x guna code ni…maksud disini 2 in 1, nak design shoutmix dan nak sorok serentak
    khairil´s last blog ..Tipikalnya Drama Melayu

    Reply
  13. topo says:
    13/02/2010 at 2:21 AM

    hohoh apasal makin ramai yang nak modify kotak jerit ni.. hohoh pasni aku nak pasang turbo la kat shoutmix aku.. tambah sub woofer ke.. hohoho
    topo´s last blog ..6 Tips Memilih Tema yang Sesuai Untuk Blog

    Reply
  14. Mr Fathi says:
    13/02/2010 at 9:51 AM

    wahh ShoutMix bleh wat background…mcm Myspace pulak…hehe…berwarna-warni blog nanti pening kepala dibuatnyer…

    Reply
  15. zik says:
    16/02/2010 at 6:08 AM

    warghh…nak try jugakla… thank for the info bro :D zik´s last blog ..Budaya menabung.

    Reply
  16. Pisyek says:
    16/02/2010 at 8:30 AM

    aku da kompius nih… tatau nk gune yg mane satu…

    nk hide ke nk gune yg ajax… 8) Pisyek´s last blog ..Kopi RADIX diciplak?

    Reply
  17. hydir says:
    16/02/2010 at 9:29 AM

    wah .. tutorial yg menarik dan telah selamat dibuat ..

    ngam betul .. thanks!
    hydir´s last blog ..[IT] Meletakkan “Google Buzz This” pada blog WordPress dan Blogspot

    Reply
  18. imran says:
    16/02/2010 at 10:37 AM

    Wow!! Memang mantop dan menarik shoubox bro… Sedang meng’edit’ apa-apa yang patut

    Reply
  19. @iMaN says:
    16/02/2010 at 7:22 PM

    Salam…gempak bro…thx a lot for the info and tutor…really appreciate it…Wassalam :D :) @iMaN´s last blog ..Away for a Moment

    Reply
  20. cik cahaya says:
    18/02/2010 at 1:04 AM

    salam.. hihihi.. mantap dan menarik neh.. sudah try dan sudah berhasil.. just belum edit per yang patut jerk.. hek.. makaceh tuk tutorialnya.. menarik.. :love: cik cahaya´s last blog ..Selamat Tinggal Kenangan..

    Reply
  21. cik cahaya says:
    18/02/2010 at 10:33 AM

    nak tanye.. naper guna neh message lambat kuar.. ek? ada yang silap ker? boleh try message kat Cbox saya k..
    cik cahaya´s last blog ..Selamat Tinggal Kenangan..

    Reply
    • kertaz says:
      18/02/2010 at 5:22 PM

      Message lambat keluar? Kalau message lambat keluar tu maybe problem dengan server yang host data2 CBox tu..

      Maybe server unstable ataupun overload, sbb tu mesej lambat keluar.. X der kena mengena dengan tutorial ni sebab tuto ni cuma bagi ajaxkan page + letak background.. :)

      Reply
  22. Omar says:
    01/03/2010 at 9:00 AM

    bagus2..nanti aku buat lepas aku beli hosting dgn domain sendiri..
    Omar´s last blog ..Ada apa dengan Burj Al-Arab

    Reply
  23. are-pa says:
    07/03/2010 at 1:04 AM

    en.Kertaz, urm.. boleh tak kasi kat sye code untuk ubah background shoutmix je? saya taknak pop-up la.nak shoutmix tu kat sidebar. sye tak berape reti edit code. :8 are-pa´s last blog ..Aku berhati kecil

    Reply
  24. xoxo says:
    09/03/2010 at 7:00 PM

    mcmane nk buat shoutmix yg tulis name sume tue kat atas…

    Reply
  25. xoxo says:
    18/03/2010 at 4:28 PM
    Reply
  26. snoop says:
    22/03/2010 at 11:50 AM

    tq paper…
    blog aku dah leh guna balik…
    yippie!!!!!!!!!
    t aq nak wat shout ni..ekekeke

    Reply
  27. Arkimz says:
    22/03/2010 at 10:21 PM

    Hi,Untuk pengguna blogspot,copy paste je code tu kat sidebar (Layout > Page Elements > Add Gadget

    kertaz..
    nak mintak izin nak buat tutorial pasal shout box ni kat http://www.otakworks.net

    Reply
  28. crapmaker says:
    24/03/2010 at 3:18 AM

    http://fulltimecrapmaker.blogspot.com/2010/03/ajax-shoutbox-for-blogspot.html

    tut untuk blogspot.. tapi aku list kan image dari kertaz.net ja.. boleh ka tak nih? ahaha.. kang rugi bandwidth hang lak..
    crapmaker´s last blog ..Ajax Shoutbox for Blogspot

    Reply
  29. sam says:
    18/04/2010 at 3:10 PM

    Salam Kertaz…

    rasanya , untuk blogspot; login–>Layout–>Add a gadget–>Edit HTML/Javascript

    Kalau salah..minta readers lain betulkan..

    Sam.
    sam´s last blog ..Benko Gambit

    Reply
  30. sam says:
    18/04/2010 at 3:15 PM

    Salam kertaz..

    Thx for the tutorials..Keep up gud work bro..!
    sam´s last blog ..Benko Gambit

    Reply
  31. Mr.Z says:
    24/04/2010 at 8:10 PM

    thanks bro..info yang berguna! :D Mr.Z´s last blog ..Kompilasi Terbaik Kartun Dulu-Dulu!

    Reply
  32. PUPUT says:
    29/04/2010 at 3:48 PM

    lawa giler…suka banget…tp cam seksa jiwa je nak wat…tp xpe…sbb suka,nak try gak nnt..huhuhu…thanx bro… :lol: PUPUT´s last blog ..BLOGGER TIPS 1…IMAGE MAGNIFY..

    Reply
  33. Rjuna says:
    06/05/2010 at 5:14 PM

    Shoutbox ajax telah berjaya dipasang, thanx 4 tutorial kertaz :) Rjuna´s last blog ..Kenali Handphone cap ayam

    Reply
  34. najster says:
    13/05/2010 at 12:37 PM

    thanks dude! check aku punya :)

    Reply
  35. RHS says:
    16/05/2010 at 12:01 AM

    Brother. I just installed this widget. But there is a problem. You can see a notice board on my blog just below the VOTE widget on top. The notice widget is closed when we click on the close button.

    The prblem is when I click the close button on this widget, I mean the button on your shout box widget, both the shout box and notice board disappears. This makes me unhappy. Please help me dear

    Pls give reply in English.

    Reply
    • kertaz says:
      16/05/2010 at 8:39 AM

      May I know what is the problem mate? I did go to your website just now & the popup window is working just fine..

      What problem did you get? Mind giving me the screenshot so that I could check it out?
      You could email me using this form : http://kertaz.net/contact

      Thank’s for dropping by..

      Reply
  36. RHS says:
    16/05/2010 at 10:38 AM

    I will explain it in detail.

    Can you see a feedback flash poll widget just below the header? Below that you can see a notice board like widget in blue color that blinks three times, when the page loads completely. The problem is when I press the close button of your shout box widget, it closes(which is the not the problem), at the same time, this notice board widget also closes when pressing the close button of your widget( that makes me sad). Help me Please brother

    I am from India. Nice to meet you.
    RHS´s last blog ..50 Beautiful Fresh Strawberries HQ Wallpapers

    Reply
    • kertaz says:
      16/05/2010 at 3:52 PM

      Now I see it mate.. The announcement blue widget that you use are also in Ajax.. I check the source (damn long list) & still trying to figure out what is the glitch.. @_@

      I recommend that you get rid of the close button.. Just remove the code from line 124 to 126.. It will remove the close button..

      Delete this code :

      ?View Code HTML
      124
125
126

      <div id="closesb">
<input type="button" value="Close" class="close"/>
</div>

      You can still close the Ajax window without the close button.. Just click anywhere outside the popup window & it will close the popup window without closing your blue box announcement widget..

      Nice to meet you too sir..

      Reply
  37. RHS says:
    16/05/2010 at 10:44 AM

    I have one more doubt. What change must be made in your code if I need to change the close button to close image button. I mean changing this html button to image button.

    Please reply answer for my two queries here.
    RHS´s last blog ..50 Beautiful Fresh Strawberries HQ Wallpapers

    Reply
    • kertaz says:
      16/05/2010 at 3:56 PM

      If you want to change the close button to image, just edit line 125 :

      ?View Code HTML
      125

      <input type="button" value="Close" class="close"/>

      & replace it with :

      ?View Code HTML
      125

      <img src="images/close.png" class="close"/>
      Reply
  38. RHS says:
    16/05/2010 at 7:43 PM

    @ kertaz

    Hi I just added a text showing the way to close the window, just below the Shout Box popup. But I like to change the position of text. I would like to place the text on the left side of the popup box. I mean on the middle portion of the box, but left side. Anyway to replace. It is because of the screen resolution problem. Mine is Ok, but for the visitors it will be a problem.

    Also suggest a way to replace the text information with an image if possible.
    RHS´s last blog ..50 Beautiful Fresh Strawberries HQ Wallpapers

    Reply
  39. RHS says:
    17/05/2010 at 10:44 AM

    Hi. Can you help me???
    RHS´s last blog ..50 Beautiful Fresh Strawberries HQ Wallpapers

    Reply
  40. Blur says:
    02/07/2010 at 8:23 AM

    bro x jd la… die just open kat sidebar je
    Blur´s last blog ..Video Cari jodoh versi omputeh

    Reply
  41. satria danil says:
    02/07/2010 at 10:44 PM

    cek mantap betul gan ….
    ganbate lah …. cihuy :8

    Reply

Leave a Reply




CommentLuv Enabled
:p 8) :lol: =( :8 ;) :(( :o: :[ :) :D :-| :-[) :bloody: :cool: :choler: :love: :oups: :aie: :beurk: