Memasang ShoutBox di Sidebar
October 24th, 2009 | 12:42 pm | Tutorial | No response
Apa itu Shoutbox?
Shoutbox merupakan sebuah gadget/widget yang berkonsepkan “Instant Guest Book” untuk blog/website. Shoutbox sangat penting di sesebuah blog/website kerana ia akan memudahkan pelawat meninggalkan pesanan atau jejak lawatan mereka.
Pada masa ini terdapat banyak shoutbox yang boleh digunakan, antaranya termasuklah ShoutMix, CBox, SBox, Bumpin dan sebagainya. Selain itu, ada juga blogger yang gemar menggunakan gadget/widget sembang yang lain, seperti Chatroll dan Chatango. (Difahamkan ada sesetengah gadget/widget sembang, terutamanya yang menggunakan komponen flash akan melambatkan loading sesebuah blog/website).
Berbalik kepada pemasangan shoutbox tadi…
Pertama sekali apa yang perlu anda lakukan ialah mendapatkan shoutbox anda. Ini boleh dilakukan dengan mendaftar di mana-mana penyedia widget yang disebutkan di atas. Jika blog sudah sedia terpasang shoutbox, langkah untuk memasang shoutbox di sidebar lebih mudah.
Untuk Blogspot
1. Login di dashboard, kemudian paparkan halaman Layout – Page Element.
2. Setelah itu, klik pada Add a Gadget, kemudian pilih HTML/JavaScript.
3. Seterusnya apabila kotak Configure HTML/JavaScript dipaparkan tampalkan (paste) skrip seperti berikut pada ruangan Content:

4. Apabila selesai, simpan (save) gadget HTML/javascript yang di-update, tetapi pastikan anda tidak meletakkan tajuk (title) pada skrip berkenaan. Setelah itu, lihat laman blog anda. Kini anda memiliki shoutbox yang diletakkan di sidebar (kiri).
5. Kedudukan (Position) gadjet tu tak kisah, boleh diletakkan di mana-mana.
Untuk WordPress
1. Pergi ke wp-admin (Dashboard), lihat menu Appearance, kemudian pilih widget.
2. Pilih widget jenis Text, kemudian Add New. Copy dan paste skrip di atas (pastikan anda tidak lupa memasukkan skrip shoutbox anda sekali).
3. Boleh letakkan widget berkenaan di mana-mana position, pastikan anda tidak meletakkan nama widget.
Beberapa Perkara Penting yang Perlu Diberi Perhatian
1. Dalam skrip di atas terdapat beberapa perkataan yang ditandakan dengan warna merah. Skrip itu sebenarnya boleh diubahsuai. Contohnya perkataan float:right pada skrip tersebut menunjukkan yang shoutbox anda diletakkan di sebelah kiri sidebar.
2. Background URL pada kod di atas bermaksud url di mana imej anda disimpan. Dalam contoh skrip di atas, saya menggunakan imej seperti berikut yang saya simpan di url seperti di atas (http://kulanzsalleh.com/blog2/tab3.png).
Anda boleh menukarkan imej tersebut dengan imej yang lain mengikut kesukaan anda (Salah satu yang sering digunakan adalah yang berikut).
3. Skrip shoutbox anda mesti dimasukkan di bahagian berikut:

4. Apabila butang imej Jejak Lawatan diklik, shoutbox anda akan dipaparkan seperti berikut. Untuk mengembalikannya kepada keadaan asal, klik butang imej sekali lagi.

5. Sekiranya anda ingin meletakkan shoutbox itu di sidebar sebelah kiri pula, anda hanya perlu menukarkan beberapa kod. Perhatikan kod yang ditulis dengan perkataan left dan right. Anda hanya perlu menukarkan perkataan left menjadi right dan sebaliknya perkataan right pula menjadi left. Dengan kata lain tukarkan secara berlawanan sahaja.
Jika anda berminat untuk membuat shoutbox seperti ini, anda hanya perlu copy-paste skrip berikut dan ubahsuai ikut keperluan anda.
Untuk skrip di atas, saya setkan supaya shoutbox diletakkan di sebalah kanan sidebar… selamat mencuba…
















