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,