Wednesday, January 12, 2011

TUTORIAL : Letak code untuk banner di sidebar

Assalamualaikum semua… selamat hari hari semua :D Wahhhh gembiranya Nisa pagi pagi ni. Maklumlah kita bangun pagi kena ceria, kena senyum lebar, barulah awet muda ye tak???

Ouh oke marilah kita kembali ke pangkal jalan. Hari ni Nisa nak buat tutorial macam mana nak letak code banner kat sidebar. Kalau korang tak faham apa yang Nisa cakap ni, meh Nisa tunjuk.

 

Capture

Haaaa kat sidebar tu, code dia akan jadi macam kat atas ni. Code tu akan diletakkan dalam kotak scroll macam di atas. Selalunya blogger buat macam ni untuk letak code banner exchange.

 

LANGKAH 1 :

Kena cari code untuk banner dulu. HTML code banner ni akan direct kan banner yang di klik ke blog kita. Langkah 1 ni Nisa ajar camne nak generate code untuk gambar.

<a href="LINK-URL"><img src="PIC-URL" alt="" width="50" height="75"></a>

Oke mula mula ganti LINK URL dengan URL blog kita. Kalau letak URL blog orang lain, nanti masa klik banner sampai ke blog orang lain pulak. Hehehee~ PIC URL tu pulak ganti dengan URL gambar banner kita.

Macam mana nak dapat kan URL gambar?? Gambar tu mesti di upload dalam komputer. Maknanya upload lah dulu dalam photobucket ke, flickr ke, myspace, facebook atau apa apa website yang korang ada.

Dekat gambar tu nanti, tekan right-click, lepas tu klik pada View Image (bagi pengguna Mozilla Firefox). Bagi pengguna Google Chrome, tekan right-click dan klik pada Open image in new tab.

Contoh : Banner ni Nisa upload kat album dalam facebook Nisa.

haha*Lepas right click, tekan View Image (Mozilla Firefox) atau Open image in new tab (Google Chrome), gambar akan keluar dalam page macam ni. Bahagian yang di highlight kan itulah PICTURE URL.

Lepas tu jangan lupa adjust height dengan width dalam HTML code tu ye. Saiz ideal (bagi pendapat Nisa) untuk paparan banner di blog ialah 125x125.

 

LANGKAH 2 :

Copy link ni.

<div align="center">
<textarea cols="20" name="code" rows="3">TEXT APE NAK LETAK</a></textarea></div>

Sekarang tukar TEXT APA NAK LETAK SINI dengan code gambar yang dah siap tadi.

rows=”3” boleh tukar nombor tu dengan nombor lain. Contoh : tukar kepada nombor 5 untuk 5 baris code.

 

LANGKAH 3 :

  • Di dashboard blogger, klik Design.
  • Klik Add Gadget. Pilih Configure HTML/Java Script.

Capture

Code dalam perenggan pertama, seperti dalam kotak merah adalah code gambar banner sahaja (Langkah 1). Nanti kat sidebar tu, dia akan keluar sebagai gambar lah kan. Tapi masa kat sini, set la width x height dia 200 (atau apa apa size yang disukai) sebab kat sidebar nanti biar dia keluar besar sikit, senang orang nampak.

P/S : Tambah code <center> kat depan code dan </center> masa akhir code.

Code dalam perenggan kedua, seperti dalam kotak biru, adalah code yang dah siap macam dalam langkah 2.

Lepas siap tu, klik pada Rich Text untuk lihat macam mana ia akan terpapar di sidebar anda nanti.

Capture2

Oke kalau dah puas hati, sila klik SAVE.

 

 

Tutorial suka suka :D Bye bye.

29 comments :

efa said...

nice info la..

Nazterjah said...

bagus2..tutorial yang mudah difahami...nak tanya skit la..mcm ne nak wat benda alah kat bawah header blog 2 ek? maksud sy yang ada perkataan Home,Aku,Dia & DSLR, etc. Xpandai nak buat la..heheh

Nisa A. said...

@efa

thanks :)

Nisa A. said...

@Nazterjah

ouhh yg tu abng sy buat kan.
sy pon x reti. ehee
:P

Noor Arikal Mohd Razali said...

eh eh , comel lah banner tu . hihi . macam mana ye nak buat banner comel mcm tu ? :)

niesz said...

gud info la dear..thanx tau..

Nadhirah-chan said...

baru je nak request tuto ni kat blog lain , tengok2 dah ada kat sini . hehek . saya curik tau .

p/s : soalan Nazterjah tu tentang lava lamp menu . boleh terjah kat sini :
http://mymijie.blogspot.com/2010/10/tutorial-blogspot-cara-memasang-jquery.html

sori menyebok . peace :)

yad'z said...

nazterjah... dekat add gadget ade bende tuh... juz add page... ^^

baru perasan lah.. nisa dah tak pakai point form... cara posting baru ye... ^^

iamzulfadli said...

lalu lalu disini http://www.sisiberbeza.com/

Aisya Rahim said...

It really helps . thank u :)

Faaein Himura said...

wah.. baguslah.. panduan yg bermakna bagi sesiapa yang de banner ni.. =]

Ayun Ayunar said...

Nisa.. ayun nye URL banner tu tukarkan yer.. http://www.freeimagehosting.net/uploads/7d052874a7.gif .. TQ!

Nisa A. said...

@Noor Arikal Mohd Razali

OUHH tu abang sy buatkan
:D

Nisa A. said...

@niesz

hehe welcome :D

Nisa A. said...

@Nadhirah-chan

hehee oke dear :D

Nisa A. said...

@yad'z

hehehe
still pakai pointform..
ikut kesesuaian entry :D

Nisa A. said...

@iamzulfadli

hye there...
thanks for dropping by :D

Nisa A. said...

@Aisya Rahim

most welcome :D

Nisa A. said...

@Faaein Himura

hehehe thanks :D

Nisa A. said...

@Ayun Ayunar

hehe oke dah tkar
:D

Julia said...

hype,..nice toto..tq
from:http://honeytulipsite.blogspot.com/

Nisa A. said...

@Julia

thankss :D

fikri farid said...

nisa !!! nk request nih.. nanti bile2 free,post la ape2 pasal blog tutorial eh.. byk bnd tataw nih.. :)

Nisa A [Saya Suka Menaip] said...

@fikri farid

hehehe insyaAllah :)

ct N honey said...

tq utk tutorial ini

Aqmil Lambung said...

akhirnya dapat jugak.....





Blog Bukan Sekadar Tulisan | by Aqmil Lambung

Farie Faraway said...

Farie baru apply tutorial ni tadi , terima kasih yea . =D

ruby farahin said...

hihihi dah jadi dah. thanks akak :D

Shauky Sprite said...

thank... muahahaha...