Cara letakkan chatbox/shoutbox di header blog (Tutorial)

Assalamualaikum semua..

Selamat menyambut hari raya deepavali pada bangsa indian.. Bangsa lain pun boleh raya jga kn.. Satu Malaysia la katakan.. ^__^

Okey2.. sebelum Armz melalut tah kemana, lebih baik kita terus ke main story. Atas pertanyaan dari kawan Armz ni,  Nashriey Nash nama nak glemer*** hahaha

maka dengan senang hatinya Armz nk ajar korang semua cara letakkan chatbox/shoutbox di header blog. Caranye rumit sikit.. Follow baik baik yer apa yg akan Armz ajar guna ayat cikgu tadika sat.

Part 1. Sebelum tu, bg yg belum signup shoutbox, korang boleh dapatkan disini. Lepas je signup dapatkan code shoutbox tersebut.

Part 2. Yang paling penting korang kena la design header blog korang macam contoh header yang Armz pernah buat dulu.(header edisi kemerdekaan )

 

Upload gambar header korang pada Posting. Ini untuk memudahkan korang dapatkan url link gambar header yg korang buat tadi. Tak tahu macam mana nk dapatkan url link gambar pada post, korang boleh tengok cara nak dapatkan url gambar dengan senang.

Part 1 dan part 2 (ok) da siap, ikut part seterusnya.

Part 3. Copy dan paste-kan code dibawah ni pada Html/JavaScript. Caranya open Dashboard > Design > Page elements > Add a gadget > Html/JavaScript. (pastikan korang letak pada kolum paling atas. Bukan pada sidebar atau main kalau tak faham yg ni, kena tanya Armz). Rujuk gambar dibawah ni pon boleh.

Ini code yg korang kena copy dan paste.

<div style="background-image:url(URL HEADER); background-repeat:no-repeat; width:1000px;   height:500px;"><div style="margin-left:200px; margin-top: 45px; padding-left: 344px; position: absolute; x-index: 300;">

<div style="border: 0px ridge #1569C7; height: 160px; width: 320px;"> LETAK CODE SHOUTBOX KORANG DISINI </span></div></div>

Keterangan:

URL HEADER = letakkan url link gambar (part 2) di sini.

LETAK CODE SHOUTBOX KORANG DISINI = letakkan code shoutbox (part 1) di sini.

width:1000px = lebar gambar header

height:500px = ketinggian gambar header

yang ini mencabar kesabaran korang, satu je pesanan aku "usaha tangga kejayaan" sempat lagi tu

margin-left:200px, margin-top: 45px, padding-left: 344px. Korang kena adjust sendiri kedudukan chatbox tdi biar betul betul berada macam yang korang nak.

Bila dah berpuas hati, klik preview. Bila dah rasa ok,cun, ngam boleh la klik save.

Sampai sini tutorial Armz. Jadi selamat menghias blog korang.

---

Maaf!!! penggunaan "Aku" pada yang lebih tua.

---