//Forever Love♥
part 2: kotak tutorial advance (background image)

Tuesday, 29 March 2011 @ 18:12 | 0 Flying kisses ❤


Hye guys. :)
Hari ni kita akan sambung tutorial blockquote yang lebih advance. Sila rujuk tutorial blockquote part 1 dahulu untuk refresh balik memory korang pasal blockquote ni :)
Sekarang kita akan belajar comellkan lagi blockquote dengan meletakkan image atau background kat dalam blockquote korang. Dah ready ke? Kalau dah, jom laa kita mulakan.

rujuk tutorial blockquote part 1 sebagai panduan.



1. Korang tekan dashboard design edit HTLM (tick expand widget)

2. Kemudian korang tekan ctrl+f and cari code ]]></b:skin>

3. korang dah jumpa code tu? tengok balik code yang korang dah paste sebelum code ]]></b:skin> tu.

ini adalah code asal:
.post blockquote {
background: #FFCC99;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
padding: 6px;
Border: 1px solid #000000;
margin:1em 20px;
}
4. Kalau dah jumpa, korang perlu tambah edit sikit code original tu. Tengok betul-betul okey? Ini code yang perlu korang tukar.
background: #FFCC99;
5. Tukar code dekat atas tu dengan code ni.
background-image:url('URL GAMBAR');
6. Code blockquote korang sepatutnya jadi macam ni bila korang dah edit.
.post blockquote {
background-image:url(' URL GAMBAR');
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
padding: 6px;
Border: 1px solid #000000;
margin:1em 20px;
}
7. Edit URL GAMBAR tu dengan url gambar yang korang suka. Tekan sini untuk cari background yang comell.

8. Dah puas hati? korang tekan preview and kalau tiada sebarang masalah, just save saja laa.









Older Post | Newer Post
3 applelovelove[s]


Hello little earthling jello, awkward strangers and mysterious stalkers (:



please click the like button to support my blog. :) i love♥ you guys so much.rawr!






Blog's name: ujawa4ever.blogspot.com
Blog's owner: Alwani Zulhilman

I'm using this template from blogskin, tweak and twist the coding and made it mine.

Background :Glitter-graphics
Icons : Iconspedia
Images : We❤it,Glitter-graphics