Tutorial Blockquote Icon

 sebelum di hover
selepas di hover
hye
tutorial nie iema nax tunjukkan cara buat blockquote versi ketiga pulax
lihat gambar di atas
nax macam toe, jom follow tutorial nie
 P/S : nax copy, highlight dan guna ctrl + c
 Dashboard -> Template -> Edit HTML
 ctrl + f, cari kod nie
.post blockquote {
 kalau tax jumpa kod toe korang kena tambah la
 macam mane nax tambah, cari kod nie, Ctrl + f (untuk memudahkan pencarian)
.post-body {
 copy dan paste kod nie betul2 di atas kod yang dicari tadi
.post blockquote {
 dah siap paste kod tadi, copy dan paste kod nie pulax dan letak betul2 dibawah .post blockquote {
background:url(URL BACKGROUND) center;
border-top: 2px dotted #F5E0CC;
border-left: 2px dotted #F5E0CC;
border-right: 2px dotted #F5E0CC;
border-bottom: 2px dotted #F5E0CC;
margin:1em 20px;
padding: 5px;
}
.post blockquote:hover {
background:url(URL ICON);
background-position:bottom right;
background-repeat:no-repeat;
border-top: 2px solid #F5E0CC;
border-left: 0px solid #F5E0CC;
border-right: 0px solid #F5E0CC;
border-bottom: 2px solid #F5E0CC;
}
color kuning kalau tax nax letax background, kosongkan tempat toe
color merah ketebalan border sebelum di hover
color oren boleh ubah ke solid, dashed
color hijau ubah color border sebelum di hover
color coklat letax url icon
color biru muda ketebalan border selepas di hover
color biru boleh ubah ke solid, dashed
color ungu ubah color border selepas di hover
 dah siap edit, preview dulu dan save
selamat mencuba 

2 comments:

Shiro Usagi said...

iema nak tanye
kode dibwah post blockquote tu mesti paste kat mana?
shi pate kat atas blockquote tak jadi paste bawah blockquote background footer jadi transparant
nak kejelasan laa :(

iema said...

@Shiro Usagi copy paste betul2 bawah kod post blockquote toe