Jan 26, 2011

Tutorial cara membuat background bercorak pada title footer


Ok hari nie aku akan teruskan pula dengan tutorial bagi melengkapi dua tutorial yang lepas iaitu cara membuat background bercorak pada title footer. Menambah background di title footer adalah untuk kelihatan lebih cantik dan menarik.Malah ia juga akan menampakkan blog lebih kemas. Berikut langkah-langkah membuatnya...

Step 1

Dashboard > Design > edit HTML > tick kotak "Expend Widget Template" kemudian cari code seperti di bawah. * Sebelum pada itu haruslah DOWNLOAD FULL TEMPLATE sebagai langkah berjaga-jaga.*

#bottom h2 {

Step 2

Dah jumpa copy code di bawah nie di bawah code seperti di Step 1


padding:7px 0 2px 0;
margin:0 0 10px 0;
border-bottom:1px dotted #cccccc;
font-size:12px;
font-weight:bold;
color:#0000FF;
text-align:center;
line-height:1.4em;
text-transform:uppercase;
}

*hasilnya seperti di bawah nie*

#bottom h2 {
padding:7px 0 2px 0;
margin:0 0 10px 0;
border-bottom:1px dotted #cccccc;
font-size:12px;
font-weight:bold;
color:#0000FF;
text-align:center;
line-height:1.4em;
text-transform:uppercase;
}

Step 3

Kemudian tambahkan background di akhir code di step 2 sebagai contoh boleh lihat di bawah.

#bottom h2 {
padding:7px 0 2px 0;
margin:0 0 10px 0;
border-bottom:1px dotted #cccccc;
font-size:12px;
font-weight:bold;
color:#0000FF;
text-align:center;
line-height:1.4em;
text-transform:uppercase;
background:url ("http://dl.glitter-graphics.net/pub/2736/2736941xyjm2i19r0.jpg") no-repeat 2px .25em;
}

*contoh background yang aku guna , kalau korang nak menukarnya boleh lihat di SINI. seeloknya biarlah sama dengan yang berada di title sidebar dan posting supaya ia nampak tidak serabut.*

Step 4

klik PREVIEW dan sekiranya tiada sebarang error boleh la SAVE.


******Selamat Mencuba*******



Note : Insyaallah sekiranya ada masa aku akan tunjukkan pula bagaimana cara untuk membuat border melengkung di sekeliling title sidebar , posting dan footer.


10 comments:

wahida said...

fuiyooooo, tutorial lagi...

♥ Che NamNam ♥ said...

tq for sharing.its good..!!

Unknown said...

ooo..mcm tu ye. Thanks sharing...:)

Zaidah said...

amy klu blog akak tak ade kod #bottom h2 tu macam mana plak....

Kak Amy said...

Kak zaidah > aka try cari code yangs eakan-akan same than cuba paste dekat code tue...preview dulu tengok hasilnya..

Abd Razak said...

Assalamualaikum Amy..

Thank you for sharing, belum pernah cuba lagi, tengah cari graphic yang cantik :)

niesz said...

kak, tutorial nk cantik kan blog archive selain scroll box ade x?hehe..

::FAIZ:: said...

sharing is Caring

AngahSayang2314 said...

wahhh thanks amy

Kak Amy said...

ustaz razak > insyaallah nanti kalau amy dapat web tue amy inform ye...

Related Posts Plugin for WordPress, Blogger...

Belog KAK AMY Copyright © 2015. Design by MaiGraphikDesign