Sesuci Kejora

Tutorial : Cantikkan Post Footer

Jun 2, 2011 | 5 comments

Assalamualaikum Warahmatullahi Wabarakatuh

Hee.. Baru dapat jumpa tuto ni dari Akak Fatin Nazirah >CLICK<. Tapi dia bagi kod untuk background warna, Amirah tak minat sangat so Amirah godek-2 Google untuk cari kod background bergambar. Pastu Amirah ambik kod blockquote Amirah biar footer tu ada hover gambar kecil kat hujung. Selamat mencuba yea~!

1) Dashboard ↪ Design ↪ Edit HTML

2) Cari kod .post-footer {

3) Paste kod ni kat bawah .post-footer { tu

background: url(URL BACKGROUND);
Border: 2.5px dashed #FF0080;

Oren : Saiz border
Biru : Jenis border ~ dashed (-----) dotted (. . . . .) solid (_____)
Merah : Warna border

4) Ni step optional untuk centerkan ayat korang tu. Tambah kod ni bawah .post-footer {

text-align: center;

5) Untuk hover, tambahkan kod ni selepas semua kod .post-footer {

.post-footer:hover {
background-image:url(URL GAMBAR);
background-position:bottom right;
background-repeat:no-repeat;
}

Sape-2 yang tak faham macam mana kedudukan kod-kod tu, tengok sini :

.post-footer {
text-align: center;
background: url(URL BACKGROUND);
Border: 2.5px dashed #FF0080;
margin: -.25em 0 0;
color: $textColor;
font-size: 87%;
}

.post-footer:hover {
background-image:url(URL GAMBAR);
background-position:bottom right;
background-repeat:no-repeat;
}

5) Preview kalau dah jadi Save Template.

Tolong credit kat Amirah kalau nak guna tuto ni coz Amirah tak copy dari sape-2 tuto ni yea ;)

Labels: Tutorial

NEW

OLD