Tutorial Float Widget With Image

Float Widget adalah satu keadaan di mana widget yang kita letak akan sentiasa terapung di bahagian yang telah kita tentukan. Antara contoh terdekat float widget adalah seperti yang berada di atas kanan blog EastbulletdotCom ini.(widget ni mungkin dah dibuang pada masa anda baca entri ni). Biasanya float widget ni digunakan para bloggers untuk memaparkan iklan nuffnang, shoutbox, ataupun text pengumuman untuk pengunjung. Float widget boleh terdiri dari pelbagai item sama ada imej sahaja, teks sahaja atau imej dan teks bersama. Dalam tutorial ini EB akan tunjukkan macam mana nak buat float widget with image.

Pertama sekali kita sediakan imej yang kita nak float tersebut. Sebagai contoh EB gunakan imej di bawah :

Kemudian guna code float widget dan pastekan pada ruangan widget. Untuk pengguna blogspot, pastikan add new gadget tu sebagai HTML/JavaScript. Dan untuk pengguna wordpress gunakan widget text.

Untuk mengubah kedudukan float widget tu, hanya perlu bermain dengan nilai “top” , “right”. Bermain dengan nilai tu ialah tukar angka “0px” dan “10px”. Semakin tinggi nilai, semakin jauh widget tu dari sudut yang dinyatakan. Selain itu, boleh juga tukarkan “top” kepada “bottom” untuk float kan di bahagian bawah dan juga tukarkan “right” pada “left” jika mahu float di bahagian kiri.

Sekarang ini anda dah berjaya buat float widget!! Jika anda ikut sepenuhnya step dalam tutorial buat float widget ni, anda boleh nampak perkataan “Tutorial From EastbulletdotCom” terapung di bahagian atas kanan blog anda.

Untuk letakkan imej yang telah anda uploadkan tadi sebagai objek terapung dalam float widget, letakkan pula code di bawah ni dan gantikan dengan perkataan “Tutorial From EastbulletdotCom”.

Jika anda mengikut step dalam tutorial float atau widget terapun ni dengan betul, kini anda dah boleh lihat floating image dalam blog anda di bahagian atas kanan.

Sekiranya anda rasa nak link kan image tersebut pun boleh iaitu dengan menambah lagi sati baris code. Jadi code yang lengkap untuk fload widget with image and link adalah seperti di bawah :

Suka untuk EB ingatkan, sebarang URL yang dipastekan tu gunakanlah yang penuh iaitu bersama http:// .

Update : ikuti tutorial float/widget terapung berserta image dan text bergerak.

——————Tutorial tambahan——————

Tutorial Dapatkan URL Image Untuk Pengguna Blogspot

Setahu EB blogspot ni tiada image upload dalam laman blogger.com sendiri. Kalau nak upload image pun kene gunakan picasaweb.google.com . Kerana di picasaweb inilah semua gambar yang anda upload dalam blog di simpan. Jadi kalau nak gunakan imej sebagai float widget dalam blog, saya lebih sarankan anda upload ke dalam blog sendiri. Jangan guna photobucket atau sebarang image hosting yang lain. Jadi pertama sekali untuk gunakan imej tu anda kenalah upload pic. Just gunakan teknik upload gambar yang biasa anda gunakan dalam “Posting”.