Nak tahu tak bagaimana cara nak menambah background picture di belakang sidebar title blog korang seperti blog ini? First sekali apa yang korang perlu buat ialah mencari atau mencipta sendiri gambar yang korang mahu jadikan sebagai background sidebar. Korang perlu resize / crop pic tersebut mengikut kesesuaian Sidebar width (otherwise, ianya akan cropped).Contohnya, gambar yang aku guna ialah bersaiz 184px wide, and 56px height. Well, to be honest, korang kena bermain-main dengan benda ni sikit, sampai lah korang dapat saiz yang betul. Contoh camni:
or 
Then after gambar dah siap, korang kena upload gambar tu dalam free web host (contohnya macam Photobucket, Picasa, TinyPic etc.) untuk mendapatkan URL dia. Bila dah siap, pergi ke Layout --> Edit HTML and click Ctrl+F and taip kat situ '.sidebar h2{'. Cari sampai dapat ye. Then tambah line (berwarna hijau) ke dalam code :
.sidebar h2 {
background:url(URL OF THE PICTURE)no-repeat;
margin:0px;
padding:0px 0.9em;
line-height:53px;
}
background:url(URL OF THE PICTURE)no-repeat;
margin:0px;
padding:0px 0.9em;
line-height:53px;
}
- replace URL OF THE PICTURE dengan URL address hosted picture korang tadi. e.g : http://photobucket.jpg
- yang warna orange tu, sebenarnya korang boleh adjust alignment title.
- biru, untuk increase or decrease line height (so kalau korang ada picture yang 22px height, setlah line height kepada 22px). Hasilnya TADAA.. Selamat mencuba :)
P/S : After baca jangan lupa click-click nuff and drop comment ya. :) Thank you.
Let me know if benda ni tak jadik. If tak boleh jugak, try copy paste kat comment box kat bawah ni ye..
Let me know if benda ni tak jadik. If tak boleh jugak, try copy paste kat comment box kat bawah ni ye..
XOXO,
24 Comments:
tu dia. hunny bunny dah mula keluar tutorial. keep it up. wakaka.
mkn kfc jum!
nice info..kene try nih
khai : haha, tutorial yg senang2 bolehlah wat.
kfc? kau belanja lah.
imam : wat cepat! (tibe nak pakse) lol
x leh copy la code tu..
Eh2, sorry.. sebab blog ni mmg disable copy paste. copy dari sini ye..:
.sidebar h2 {
background:url(URL OF THE PICTURE)no-repeat;
margin:0px;
padding:20px 0px 20px 0px;
line-height:22px;
x bleh jgak...he3..xpela...salin..
ok..tq akk :)
hehe. olraitt dik...
nanti aku try k? hehehhe
kepada yg tak boleh wat jugak mcam yg kat atas tu or tak jumpa .sidebar h2, boleh try yang bawah ni.. cari bahagian "headings.."
h2 {
background:transparent;
background-image:url(URL OF THE PICTURE);background-repeat:no-repeat; background-position:bottom center;
color:$sidebarcolor;
padding:20px 0px 20px 0px;
font:$headerfont;
line-height:22px;
text-transform:none;
letter-spacing:1px;;
text-align:center;
border:0px double #f3e4c9;
}
niwh yang aku da wat..
h2 {
background:transparent;
background - image:;background-repeat:no repeat;background-position:buttom-center;
color:$sidebarcolor;
padding:20px 0px 20px 0px;
font:$headerfont;
line-height:22px;
text-transform:none;
letter spacing:1px;
text-align:center;
border:0px double #000000;
}
mana background image url nya? hehe
e.g :
background-image:url(http://photobucket.jpg);
lagi satu position tu bottom.. hehe
background-image tu kene rapat kott...
eh gedik komen niwh..aku da letak da url yew..sabor jela..hua5
emm..cam xjadi buat tutorial ni la..:(
da jadi da...tQ ye..hehe..
hehe, jadi dah? ok2.. welcome..
berjaya! check it out... even tak lawa la... hahaha
hi honey, mcm best aje..nk try jugak ye...tq
akak,macam mana kita nak buat bentuk bulat tu ek?
tq hunnybunny.....nice tutorial!!!
nanti nak cube ! tengs sis ;D
ala x faham la..=(
Post a Comment