Jan 25, 2011

Tutorial cara membuat background bercorak pada title sidebar





Tutorial hari nie bagi menjawab pertanyaan Ayuni dan Kak Ieda. Cara membuat background bercorak pada title sidebar. Berikut adalah cara untuk membuatnya..Di harap tutorial ini dapat membantu Ayuni dan Kak ieda serta mereka yang berminat untuk menukar title sidebar kepada lebih menarik dengan bercorak.Jom aku tunjukkan caranya satu persatu...


*Perkara pertama yang korang harus lakukan adalah Download Full Template terlebih dahulu sebagai langkah berjaga-jaga*

Step 1

Dashboard > Design > edit HTML > tick pada Expend Widget Template

Step 2

Tekan Ctrl + F secara serentak di keyboard komputer korang dan kemudian lihat di sebelah kanan atas akan ada keluar satu kotak kecil. Jadi korang copy dan paste keyword di bawah ini ke dalam kotak itu bagi memudahkan korang mencarinya.

sidebar

Step 3

*kemudian cari pula code seperti di bawah*

.sidebar h2 {


*harus di ingatkan setiap template blog berlainan coding jadi sekiranya korang tidak menemukan code seperti di atas cuba cari code ini *

.sidebar.widget.h2 {

*tapi kalau masih tidak menemukannya juga korang cuba cari satu-persatu code yang seakan-akan sama dengan code di atas atau korang boleh tambahkan code berikut pada sidebar content.*


Step 4

Dah jumpa korang boleh gantikan code yang ada kepada code di bawah nie.

.sidebar h2 {
text-align: center;
background:url("http://dl.glitter-graphics.net/pub/2736/2736941xyjm2i19r0.jpg") no-repeat 2px .25em;
margin:0;
padding:0 0.2em;
line-height:1.5em;
}

* contoh url backround yang aku gunakan. korang boleh tukarkan background yang korang suka seperti di SINI. Kalau ada yang berkenan di hati dan sesuai dengan background color blog korang boleh lah copy dan paste codenya di sini*

Step 5

Klik PREVIEW untuk melihat hasilnya sekiranya tiada sebarang error boleh la SAVE.Selamat mencuba..



Note : Tutorial seterusnya aku akan tunjukkan cara membuat background pada title posting.


13 comments:

sarah-najwan said...

huhu..
akak kalu terlibat ngan edit html gak..failed slaluhhhhh...huhuhu..
penakut IT amy...

**pstt:minta tlg amy bole..hehe..ade 2 perkara nk minta..hehe:
1. buat scroll yg n3 lepas itu
2. dan yg ini..hehee..

jika amy bizi..xpe yer..ngada2 akak nih..hehe

A.s.t.i.n.a said...

Gud info Amy.. tengkiu2

nanti ade masa saya tunjuk skill..

Z.u.r.a and I.w.a.n said...

thks 4 sharing..

Mama Zharfan said...

me dtg baca tuto sambil click2 HB :)

ieda said...

dikk tkasih banyak2 .. x cuba layie .. nak buat kat umah lahh laju sikit tenet kat umah tuu ..
kat sini maha raja lembab huhuh

anyway thanx alots dikk muah sbb x kedekut ilmu .. :))

Hanis MY said...

thank uuuuu i likeee...

niesz said...

ade gak org tnye niesz psl tuto nie..hehe..nice info kak.. :)

::FAIZ:: said...

thanks 4 d info

Unamn said...

thanx for the info.. btw una nk tanya boleyh? mcm mne nk buat rounded corner pada blog? contohnya mcm blog una ni .. una nak buat round corner pada post bodyyg wrna putih tu

Abd Razak said...

Assalamualaikum Amy...

Thanks...ada tak lagi website yang lain untuk background graphics tu...kiranya saya nak pilih yang lain

Zaidah said...

zai menyinggah sambil baca tutorial

apdm said...

salam

faham dak murid-murid semua,,,dah senang tu cikgu amy kita ni ajar =)

Unknown said...

nice... thanks...


http://aazzrruull.blogspot.com

Related Posts Plugin for WordPress, Blogger...

Belog KAK AMY Copyright © 2015. Design by MaiGraphikDesign