Cara membuat Shoutbox di WordPress.

Teriring senyum disore hari, aku akan menulis dan berbagi tentang cara membuat shoutbox (kotak chating). Sebenarnya Shoutbox bisa bekerja di ruang web apapun, maksudnya untuk blog yang tidak berbayar (geratis) maupun blog yang berbayar. Shoutbox adalah perpaduan yang sempurna untuk buku tamu, forum dan chatting. Shoutbox merupakan cara interaktif bagi pengunjung ke website atau blog kamu, karena pengunjung dapat meninggalkan kamu pesan, ucapan atau hal lainnya sebagai salah satu jembatan penghubung antara pemilik blog dan pengunjung. Bahkan sebagian blogger memanfaatkannya untuk berpromosi sekaligus menambah traffic. Shoutbox juga bisa untuk ajang berkenalan, cari jodoh :lol: :lol: saling tukar informasi dan sebagai ajang link exchange.

Ada beberapa merk tentang ruang chatting yang aku tau, diantaranya shoutbox, shoutmix, cbox dan Meebo. Sebenarnya masih banyak merk lain tapi aku belum pernah mencobanya :D :D :lol: dan merk yang akan aku pakai  yaitu menggunakan shoutbox. 8-)

Waah, kebanyakan cerita. . .kita mulai saja untuk membuatnya dengan langkah-langkah sebagai berikut:

1. Terlebih dahulu kita masuk ke situs yang menyediakan shoutbox geratis yaitu ke http://www.99shoutbox.com

Tampilan awal Shoutbox.

2. Setelah berhasil masuk kemudian kita mendaftar atau sign up.

Tampilan mendaftar atau sign up.

3. Setelah berhasil mendaftar, kita kembali kehalaman awal dan mulai masuk untuk membuat atau sign in dengan email dan password yang telah terdaftar tadi.

Tampilan Login.

4. Kalau  sudah berhasil login, coba pilih Create a Shoutbox dan isikan semua data.

Contoh Isian Shoutbox.

  • Name: diisi dengan nama kamu atau nama blog kamu. (sesuka hati). ;)
  • Theme: memilih tema untuk tampilan shoubox.
  • Category: memilih kategori untuk shoutbox.
  • Size: ukuran lebar dan panjang soutbox.
  • Background: latar belakang tampilan shoutbox.

Untuk hasilnya bisa dilihat pada gambar diatas sebelah kanan. Kemudian klik tombol Continue untuk meneruskan pembuatan  shoutbox. :P

5. Setelah tombol Continue kita klik, nanti akan tampil Shoutbox Code.

Ada 2 kode yang disediakan shoubox yaitu Object Embed dan Javascript Embed , tapi kita memilih yang kode pertama yaitu Object Embed.

6. Copykan kode Object Embed tersebut ke dalam notepad atau Ms. Word terlebih dahulu.

Contoh:

<object id=”shoutbox99_11217_1″ type=”application/x-shockwave-flash”

data=http://static.99widgets.com/shoutbox/swf/shoutbox.swf?r=11217_1&#8243; width=”300″ height=”300″>

<param name=”movie” value=”http://static.99widgets.com/shoutbox/swf/shoutbox.swf?r=11217_1&#8243; />

<param name=”bgcolor” value=”#ffffff” />http://static.99widgets.com/shoutbox/swf/shoutbox.swf?r=11217_1<br>

<a href=”http://www.99shoutbox.com/”>Shoutmix</a&gt; |

<a href=”http://www.amigafx.com/platforms/amigafx-webtrader.html”>Webtrader</a&gt; |

<a href=”http://www.mpthrill.com/sg/”>Singaporean Online Casino</a> |

<a href=”http://www.shavingbuy.com/”>Buy Shaving Products</a> | <

a href=”http://www.casinoschule.com/spinpalacecasino.html”>Spin palace</a></object>

setelah dicopy klik finish dan tampil seperti gambar dibawah.

7. Tidak semua kode kita pakai, kode yang dipakai yaitu kode yang berwarna merah. Ada beberapa kode yang perlu diubah yaitu data diganti dengan gigya. Untuk ukuran panjang dan lebar shoutbox, dapat diatur dalam width dan height. Untuk lebih jelasnya bias dilihat kode dibawah:

<div align=””center””>

[/gigya width=”300″ height=”300″ src =http://static.99widgets.com/shoutbox/swf/shoutbox.swf?r=11217_1;__

view=expanded” align=”middle” type=”application/x-shockwave-flash” pluginspage=”

http://www.macromedia.com/go/getflashplayer&#8221; wmode=”transparent” ]

hilangkan tanda / agar shoutbox bisa tampil dalam blog kita. Untuk kode yang berwarna hijau adalah kode yang kita ambil dari Object Embed diatas dan kode yang berwarna biru adalah kode yang harus dituliskan juga.

8. Setelah semua penulisan kode selsesai, sekarang saatnya kita masuk dasbor pada wordpress dan ambillah widget teks. Salin kode yang sudah jadi pada langkah ke 7 kedalam widget teks.

Jangan lupa disimpan ya? :lol:

9. Tram raaaaam. . . ini hasil shoutbox yang dulu pernah aku buat. ;)

Bagaimanaaa, berminatkah untuk membuat shoutbox? Apabila berminat silahkan membuatnya dan jika ada kesulitan nanti bisa aku bantu. :D

Postingan tentang cara membuat shoubox ini aku buat karena permintaan kak anunaki. special buat kak anunaki yang sedang asiik dengan domain barunya. . . :D dan buat teman-teman ngeblog idah juga yang tentunya belum mempunyai shoutbox pada sidebar. ;)

Shoubox ini benar-benar geratis, mudah dan tidak memerlukan pengetahuan pemrograman. :D ;) :lol:

Salam Senyuum. . . ^_*

151 komentar

  1. Hasssek … makin banyak tutorial nih di sini … mantappp pisan :)

    1. haaasiik. .

      kak fariz sudah bisa komen. :D

      1. berkat doa Idah tampaknya … :D

  2. saya uwdah punya.
    semoga temen-temen yang membaca terasa terbantu.
    info yang nice idah..
    minta es cream ya.
    nyaem nyaen nyaem

    1. ckckck. . .

      dokter gigi gak boleh kebnyakan makan es lhow,ntar giginya sensitif. :D

      1. tenang. kan dokter gigi punya solusi. wkwkwkw
        :p
        hehehe

  3. Apa mengisi shoutbox mempengaruhi SEO blog?

    1. hehhehehe. . .

      kira-kira kali ya kak? ;)

  4. wessss…mantab ibu programmer delphi..sekarang buat tutorial lagi untuk shoutbox hehehee…:D gimana yang prolog nya?dah ketemu? temen aku ga ada euy yg pake prolog ataupun matlab idah…

    1. haduuuwh. . .

      pd pake VB ya kak? :(

      1. PHP justru rata-rata, ada juga pake ASP.NET intinya pada berbasis web. tinggal nentukan topik misalnya mau buat aplikasi apa..aplikasi akunting, HRD, SMS Gateway, dll. Di grup aprogsi kemarin ada tanggapan ga?

        1. yang kemarin di aprogsi belum ada tanggapan kak. . .

          kalau web akku harus belajar keras. :(

  5. bagus nih buat referensi kalu mau pasang shoutbox diblog..
    thanks ya sudah sharing langkah2nya..

    1. okay. . .

      sama2 kak. . .. ;)

  6. asyek udah bisa shout “kotak” nih :D

    1. udah ni kak aulia. .. :D

  7. ane mah dah puas ma fasilitas yg dksh ma wordpress, jd g prlu dtmbah2 lah. hehe :D
    jd ijin nyimak j, buat nmbah2 ilmu. [peace]

    1. hehehe. . .

      sudah menikmati ya kak. . .
      sebenarnya aku juga udah nyaman, tapi gak ada salahnya mencoba. ;)

  8. mantap surantapppppp!

    aku nanti rencananya mau membuat postingan anchor dan menyertakan link ke artikel ini biar semuanya bisa lihat :mrgreen:

    makasih loh geulis!

    1. semua ini untukmu kaak. . .wkwkwkwkwk. (lebey)

      waduuh2. . .ditunggu kak postinganZ. :D

  9. wah, lama gak pakai shoutbox seperti ini. hehe, sudah sejak 3 tahun yg lalu soalnya jarang juga ada yang mau pakai buat chattingan.

    1. gak buat chatingan terus buat apa kak? :)

  10. Akhirnya keluar juga tutorial masang Shoutbox.. Hore,,

    Ada Tambahan nihh Mbak, http://id.forums.wordpress.com/topic/test-widget-chat-99shoutbox#post-32142

    1. houre houuur. . . :lol:

      okay,langsung ke forum ni kak brooo bro brooooou. ;)

  11. waahh,, baru tahu saya ada shoutbox di wp..

    1. hehehhee. . .

      berminat mencoba gak kak? ;)

  12. saya rasa gak masalah deh ama TOS wp.com, karena kita tidak menyertakan link ,menuju ke 99shoutbox kan? yang kita ambil hanyalah file flash-nya dia doang ;D

  13. sekarang shoutbox nya kmana mba idah ? :D

  14. wieess krenn niieee :-)

  15. Eh, baru nyadar kalau di WordPress sudah diizinkan bikin beginian? Dulu nggak dikasih bikin skrip begini :D

    1. masa si kak. . .
      aku malah baru tau kalau diWP gak boleh dulu, idah baru si di WP. :D

      1. Dulu memang tak diizinkan. Maka ramai pada ngeluh. Banyak batasan dulu di WordPress, tema juga sedikit, cuma sepuluhan di awal launching layanan ini.
        Baguslah kalau sekarang sudah diizinkan yang begini :mrgreen:

  16. Kapan2 anis coba :D

    1. iyya di coba ajaj sist. . . ;)

  17. stepnya banyak banget nih belum sempat baca semuanya sih.. :) tapi kereeeen banget… suka deh…. :)

    1. kalau belum dicoba memang banyak kak. .

      dicoba dulu deh,pasti nanti merasakan kalau stepnya begitu sditkit. :D

  18. Makasih infonya….

  19. Kalo pake wordpress justru menariknya di comment post, kalo pake sotbox terkesan asal kunjung aja hihihihi

    1. wah. . .

      bukan asal kunjungan kak?
      tapi mempererat persahabatan. . .
      saling menyapa dan saling mengingatkan. . ;)

      1. siiiip :)

  20. kalau saya biasanya pake cbox untuk shoutbox…
    kalau 99shoutbox ini belum pernah nyoba,…

    ijin untuk mecoba ya, Mba… :D

    1. silahkan dicoba. . . ;)

  21. wah aku bligspot nih. . . .

    kunjungan pagi ahhh. . . da orangnya ndak ya. . .

    1. kalau diblogspot bisa gak ya kaak sugar. . . :D
      dicoba kak. . . ;)

  22. mantap tutorialnya mbak :)
    saya pengguna wordpress baru :D

    1. hehehhee. . .

      eh, kak widi suka PHP ya? :)

  23. ga bisa kasih comment,,,,
    makasih atas bantuannya, akhirnya shoutbox t’pasang jg….
    nice info Dik.

    1. okay. .
      sama2 kak. . :D

  24. [...] Mau buat kotak chatting di blog? baca dulu yang ini [...]

    1. tengkyuu kak. .. :P

      1. Sudaaah….
        makasih Idah :) :) :) :) :) :)

        1. coba tengok laaaaah. . . :D

          1. makasi dah mampiiir

  25. Abed Saragih · · Balas

    Mantap :)

    1. mencoba buat tutorial kak abed. . :D

  26. oh… gitu toh…

  27. arman budiman · · Balas

    keren bisa pasang chat nih, padahal saya nggak bisa wawkakkwkakwak :P

    1. kak armaaaaaaan. . .

      kau muncuul jugaaaaa.
      missU. . wkwkwkwkwk

      1. arman budiman · · Balas

        wakkwkakwkka :P ini cuman di warnet saja kok :P

        1. wkwkwwkwk. . . :P

          udah selesai panennya? :P

          1. arman budiman · ·

            masih musim panen :D

          2. arman budiman · ·

            beuhhhhh

          3. appa kaaaaaaaak. . . :P

            mainan semuut kapan? :(

          4. arman budiman · ·

            ssaya lagi training pekerjaan baru lom bisa OL terus, bisanya cuman bentar-bentar :P

          5. hehehe. . .

            yasudahlaah, semoga training lancaar dan panenpun lancar. :D

  28. Aku coba aaah….
    kali aja bener nemu jodoh…. (Upz)

    1. huhuhuuh. ..

      idah ngarang bangeet ya kak?
      masa ajang jodoh. :D

  29. amry3289 · · Balas

    sedikit rumit , , :O tapi harus dicoba ^^ hahak XD

  30. amry3289 · · Balas

    saya pasang diblog saya ya kak , , wkwkwk XD

    1. baguuuuus. . .

      langsung jadii. ;)

  31. nice dan kratif, salam

    1. terimakasiiih. . . ;)

  32. Jalan – jalan ahh….

    1. monggooo. . .

      semester berapa skrg kang? ;)

    2. monggooo. . .

      semester berapa skrg kang? ;)

  33. JAlan jalan ahhhh

  34. kereenn,,,, sipt mksh,,,,,

  35. wahhh jadi pengen buat di rumah hehehehe :)

    1. monggo dibuat kak ekoo. . . ;)

  36. dhoney · · Balas

    saya langsung copy paste kan code yg dari Object Embed tp sehari kemudian tampilan shoutbox nya kok hilang sendiri ya bang?? mohon solusinya…

    1. bang idah ya? ;)

      hilang karena kak suwung hanya mengcopy paste kode embednya tanpa mengeditnya kak?
      coba kodenya di edit dulu, sesuai dengan langkah ke 7.

  37. wah, ijin mencoba tipsnya ya mbak.. :)

    1. iyya. . .monggo kak reza? ;)

  38. pengen… tapi pusing deh kak hehe
    kak, kalo buat yang kayak ‘sahabat idah’ gmana caranya ya?
    aaaaaaaaaku mau tapi ngga bisa huhu

    1. dicoba dulu lah, siapa tau jadiii. ;)
      buatnya sederhana, tinggal tarik widget TEKS pada Dasbor kemudian tuliskan kode:

      <li><strong><a href="http://nama link teman/" target="_blank">Nama Blog</a></strong></li>

      itu kodenya. . .ayoo dicoba duluuu. ;)

  39. ijin mencoba dulu ya ….

    mapir juga ke blog saya http://dewasadewa.wordpress.com/ :)

  40. taufieqkudo · · Balas

    ..adikku dulu les di pikom

    1. wew. . .

      siapa namanya? ;)

      1. taufieqkudo · · Balas

        nafisah zahra

      2. taufieqkudo · · Balas

        nafisah zahra

        follow taufiqsemangat.wordpress.com

  41. [...] WordPress yang gratisan, tapi teriring senyum disore hari, aku akan menulis dan berbagi tentang cara membuat shoutbox (kotak chating). Sebenarnya Shoutbox bisa bekerja di ruang web apapun, maksudnya untuk blog yang [...]

  42. wah ini yang aslinya?

    1. miriiiiiis sekaliii. . .

      tanpa permisiii. . . :(

  43. mbak mau tanya koq pas pilih tema slalu gagal keluar kat Theme is missing …. bantunya y …makasih seblm nya……

    1. temanya menyesuaikan saja yang ada pada shoutbox mas. . .

      pilih salah satu saja. .
      tanpa mengganti. . hanya memilih. ;)

  44. Terimaksih turoialnya ,, mampir juga ya ^^

    insyaAlloh mas? ;)

  45. Ide yg bagus untuk di gunakan blog saya nih. biar para guest bisa chat langsung. makasih ya tipsnya. bermanfaat banget. jika bisa mampir ke blog saya

    1. kembali kasih. . .

      terimakasih sudah berkunjung. .
      insyaAlloh saya mampir mas. . . :)

  46. Terima kasih byk2 ya, karena sudi berkongsi ilmu meletakkan shoutbox di blog wordpress. Pokoknya aku ingin tetapi wordpress membatas peluang meletak wijet luar ke dalamnya…
    Aku sennang bgt…

  47. terima kasih info dan arahannya mbak idah… bermanfaat sekali buat saya dan blog saya…

  48. terimakasih tips nya,, terutama bagi saya yang masih pemula ^^
    ==========
    terimaksih kembali mba venus, idah juga masih pemula koq. . . ;)

  49. terimakasih untuk artikelnya.. sangat bermanfaat :)
    ==========

    terimaskih kembali mba khusniana. . . ;)

    1. kalau mba idah pakai flash versi berapa? sy sudah instal flash versi 11.2.202.233
      maaf ya mba jd banyak tanya. :)
      thx
      ================

      kalau saya juga pakai flash 11 mba. . .
      tapi tadi saya lihat koq bisa ya mba?

  50. sudah terlaksana… terima kasih byk2 ya mbak idah… bisa hadir ke blog saya :-)
    cikguhamzah.wordpress.com :-)

    =========

    ok. . .isnyaAlloh saya mampir. . . ;)

  51. Assalamu ‘alaikum Wr.Wb

    salam kenal aja mksh infoya…..

    trs mau naya ni… gmn sih biyar tab navigator bisa di buka..ngisinya gmn…..
    lbh jelasnya tolong lihat di blog q….
    mksih bnayk atas bantuannya

    Wassalamu ‘alaikum Wr. Wb

    1. wa’alaikumsalaam. . .

      saya sudah mampir blog mas Muhammad,, tapi tidak bisa meninggalkan komentar. ada catatan “koreksi open id”. . . ;)

  52. Mba idah, maaf mau tanya. kok shoutbox d blog saya sering ga muncul ya?
    itu knp ya mbak? thx b4 :)
    ============

    mungkin belum di install flash kali mba?
    coba install flash dulu. . . ;)

  53. pngn psang jg di blog ane tp bingung mau dtaro dmna??? :?:
    ==========

    kalau ditaruh dibawah FanPage piye mas? :lol:

  54. wiii… kereeeeeeen.! postingan bagus,! ijin nimba ilmu ya mbak. ditunggu kunjungannya kerumah (blog aku), nanti bakal di beri suguhan yang maknyuuuuzzzz dah.!
    salam kenal aja…

  55. wiiii.. kereeen..! postingan menarik, itung2 nimba ilmu. ditunggu kunjungan kerumah ya (blog aku), nanti bakal di suguhi makanan yang lumayan maknyuuz… dah.!
    Salam kenal aja…
    ==========

    terimaskih sudah berkunjung. . .;)
    iyya, langsung mampir nanti ya? :lol:

  56. Masih belajar lagi di wordpress
    ======================================

    tetap semangat, untuk belajar. :)

  57. [...] Mau buat kotak chatting di blog? baca dulu yang ini [...]

  58. infonya bermanfaat banget gan,,,,,sampai begadang nih ngorek2 info di sini

    Salam Senyum
    ===================================

    Ganjil ya? :)
    Alhamdulillaah kalau bermanfaat. :)

  59. terimakasih, sangat membantu ^^
    ==========================================

    kembali kasih mba. . . :)

  60. Makasih gan, kunjungan perdana.
    please check my WP – >http://m16lovers.wordpress.com
    =================================

    kembali kasih. . . ^_*
    inysyaAlloh berkunjung. . . :)

  61. makasih untuk tutorialnya gan :)
    kapan2 mampir di blog q y http://blognakkisaran.wordpress.com

  62. terimakasih sudah berhasil di blog saya http://amintea2.wordpress.com

  63. inidapurku · · Balas

    udah aku ikutin 1 by 1 kok gak muncul ya sis
    ===============================

    Pastikan PC sudah terinstall Flash Player, Mba? :)

  64. [...] Mau buat kotak chatting di blog? baca dulu yang ini [...]

  65. Gan,sya coba shoutbox nya kok gk bsa muncul2 yh gan dblog saya,,,
    Mohon pencerahanya gan,,,,thx
    ====================================

    di Komputer sudah terinstall Flash Player belum, mas?

  66. harus tersedia Flash Player ya mbak?

  67. Reblogged this on akhiru and commented:
    terimaksih untuk blog ini, karena juga menambah banyak ilmu saya tentang wordpress
    =============================================

    Sama-sama mba. . . :)

  68. haha terus tingkatkan mba,, jangan hiraukan omongan orang,, maju terus
    =============================================

    Yups. .. :)

  69. [...] murah senyum. Kalau ingin memasang kotak chatting versi shout box langsung saja lihat Tutorial Cara Membuat Shoutbox di rumah Neng [...]

  70. makasih mba, langsung jadi

    Iya, sama2 mas. :)

  71. Info yang bagus..salam kenal dan sekalian ijin sharing, buat pemanis di blog aku…trims

    Sudah kenal, Om Onnie. :)

  72. Maaf mbak Idah…kita sudah berkenalan, maksud aku mampir…he..he…maklum sudah tua, ijin sharing mbak…salam sukses

    Silahkan, Om. :)

  73. mb buat kayak blogmu gmana

    Masuk saja ke wordpress.com, nanti langsung register saja mas. :)

  74. apradiznewcybeer · · Balas

    Like your post.!!!!

    Thanks. . :)

  75. aku ikutan nyoba ah..
    mummpung ada..klo.ga bsa aku.komplen..haha

    Silahkan. .. ;)

  76. sebelum’a thx bngt buat info’a sob..
    tp w bingung letak dasbord’a
    maklum pemula

    Dashbord itu ada di sebelah kiri atas, mas. .. :)

  77. yang sulit dalam bkin ini chat box.. silahkan pake chat ini aja … http://www.xat.com .. jgn lupa kunjungi danangsenoputro.wordpress.com

    Terimaksih untuk referensinya. .. ;)

  78. kok ak ga jd ya shoutbox nya? malah jd “no hotlink please”

    thanks

    1. Ceramati tahap demi tahap dan cermati juga bagian yang harus di edit. :)

  79. tetep ga bisa, sampe pusing berkali2 dicoba o_o

  80. Nah loh ini kenapa ya teh lkog masih “Not Hotlinking Please” .. Hmmmmmm

    Wah, kenapa ya?
    Aduuuuuh, tolong dong cocokkan dengan tutorial. hihiihhi

  81. mtur nuwun tutorialnya :)

    Sami2. . . :)

  82. [...] 4. kalian ingin bisa chatingan bersama teman-teman kalian di wordpressmu?seperti teman aku nih xiipa2ivan.wordpress.com. klik aja yah disini [...]

  83. Mantaps langsung ON AIR gan.. :D

    Mengudara kemana2 ya? :)

  84. [...] Mau buat kotak chatting di blog? baca dulu yang ini [...]

  85. ka idah, ko punya aku ga bisa ya ? jadi ada tulisan “no hotlinking please” gitu ka

  86. […] murah senyum.  Kalau ingin memasang kotak chatting versi shout box langsung saja lihat Tutorial Cara Membuat Shoutboxdi rumah Neng […]

  87. Hihihihii…dulu sudah pernah pasang tapi tak copot lagi :mrgreen:

  88. munculnya kaya gini :

    ngeditnya gimana ?

  89. seberapa perlu ya chatbox untuk sebuah blog

  90. […] senyum disore hari, aku akan menulis dan berbagi tentang cara membuat shoutbox (kotak chating). Sebenarnya Shoutbox bisa bekerja di ruang web apapun, maksudnya untuk blog yang […]

  91. ini yang nama nya ilmu pas dipraktekin beneran bisa.. mkasih ya

Tolong tinggalkan goresan manis disini. . . "salam senyuum" ^_*

Isikan data di bawah atau klik salah satu ikon untuk log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Logout / Ubah )

Twitter picture

You are commenting using your Twitter account. Logout / Ubah )

Facebook photo

You are commenting using your Facebook account. Logout / Ubah )

Google+ photo

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: