Sedara-mara

Background Image Sidebar

Salam buat smua blogger yang sudi masuk ke blog incik wanshah walaupun sudah lama tak uptodate. mcm lama sangat plak. rasanya baru seminggu jer kot. heuheue.. :) kerja kat opis terlampau banyak. Al-maklum la dh hujung² tahun. kesian.. kesian kat aku la weh.. wawawa.. Ok la, kali ni nak wat tutorial yang direquest oleh blogger yg jugak adik sedara aku yang mulut dia bising bangat. heheh.. jgn mare aa.. :)

yang dimaksudkan dengan Background Image Sidebar adalah seperti gambar dibawah ni. tapi gambar background ni tak lawa sangat la. :-P korang bleh create gambar lawa² sket. :) zasSS!!..

Untuk memulakan tutorial ni, pastikan korang backup template korang dulu ye. pastu ikuti step² dibawah ni. :)

Step 1:
Create 1gambar(guna Photoshop @ sewaktu dgnnya), yang mana size width dia mengikut size width sidebar korang. Dlm tutorial ni, size width sidebar ialah 220px, so gambar adalah seperti dibawah ni yang mana width dia adalah 220px.

Step 2:
Host-kan image korang tu kat mana² hosting dan dapatkan URL-nye. Kalau tak tau, boleh tengok tutorialnya kat sini.

Step 3:
Setelah dapat URL image background, copy coding dibawah ni.
#HTML3 {
padding: 0 5px 0 5
border: solid #000000 1px;
background: #ffffff;background-image:url("https://sites.google.com/site/wanshahdanblog/img/tuto1.jpg");
background-repeat:no-repeat;
background-position:bottom right;
background-attachment:scroll;
}
#HTML3 - merujuk kepada ID sidebar. untuk mengetahui ID sidebar yang korang nak letakkan bground img, pergi ke Design -> Edit HTML -> tekan CTRL+F dan cari nama sidebar korang tu. contohnya disini, saya cari nama sidebar "tutorial blog". lihat gambarajah dibawah.

so, ID bagi sidebar Tutorial Blog adalah HTML3.
https://sites.google.com/site/wanshahdanblog/img/tuto1.jpg - gantikan dengan URL image yang korang dapat pada step 2 tadi.

Step 4:
Pergi ke Design -> Edit HTML -> cari coding "sidebar-wrapper" pastekan coding tadi dibawah sidebar-wrapper seperti dalam gambarajah dibawah.


Step 5:
Pastikan korang dah tukar ID sidebar(#HTML3) tadi dan jugak URL image. Kalau dah confirm, Save Template dan lihat hasilnya. :)

p/s:- selamat mencuba dan berjaye la ye. :)


Yang Betul,

8 komen yang best:

imanshah said...

wah macam ni ye..hurm esok nak try kalau berjaya..haha

wanshah said...

Ok cikgu. dh cuti skolah ada bnyak masa. bleh wat slalu. :-P

sahromnasrudin said...

salam wanshah..aku ada emel permintaan buat tutorial..ada ko dpt tak???

ikan emas said...

cantik, menarik dan tertarik..

tapi

bab dah curi masa ni yg agak susah sikit

♫ AMALINA ♫ said...

yess . tengs ye abg wan . nanty akk try ye . trimas-2

Nafisa81 said...

komplikated nyer...kata si pemalas nak cuba..

wanshah said...

sahrom: yup, ada dapat bro. tutorial tu akan menyusul ikut que. hehehe.. lagi 2hari sy publish kat sini ek.

amalina: camni ke ko nak weh kak ngah?..

nafisa81: alamak, complicated ke?.. saya xpandai sangat nak mengajo orang. hueheu.. kalau ada yg xfaham roger2 ek. nanti saya betulkan.

♫ AMALINA ♫ said...
This comment has been removed by the author.
Related Posts with Thumbnails

 
Dikuasakan Oleh Blogger | Gubahan Oleh Ady © 2009 | Resolusi: 1024x768px | Paparan Terbaik: Firefox | Top