Tutorial : Sidebar Dan Post Title Melengkung

Ana Myhusna | 21:54 | 0Comments |

Hai semua. Okay, semalam Ana ada buat tutorial warna background jadi background bergambar kan? Okay, ada yang tanya. Post title dia tak jadi pape. Kosong. Ada tajuk je. Macam mana nak bagi ada warna kat belakang? Ha! Macam mana nak keluar warnna kalau tak design lagi post title nya kan? Okay.. So, Ana nak buat tutorial post title melengkung. Ana buat untuk sidebar sekali ye. Design yang macam kat blog Ana nih.
Okay, nampak kan? Orite! Taknak buang masa,, jom start!

Mula-mula sekali, korang pergi
Dashboard - Template - Edit HTML
Post Title
1. Tekan F3 atau CTRL+F. Cari code dibawah :
h3.post-title {
Jumpa? Kalau tak jumpa, cari code bawah ni.

.post-title {
Tak jumpa jugak?

.post h3 {
Okay, mesti dah jumpa kan? Kalau tak jumpa, pandai-pandailah menggodek-godek template tu ye. :)

2. Copy code yang Ana kasi ni ya.
margin: 1.6em 0 .5em;
font:11px century gothic;
text-transform:none;
text-align:center;
letter-spacing: 2px;
padding:5px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 15px;
border-bottom: 4px solid #ffcfcf;
background: #f5a9d0;
}

3.  Pastekan dekat bawah code yang korang dah jumpa tadi. Tapi, sebelum tu korang buang dulu anak-anak code yang ada bawah code yang korang cari tadi. *Kalau ada jelah*
4. Dah paste? Preview & save!

Sidebar Title
1. Tekan F3 atau CTRL+F dan cari code dibawah :
h2 {
jumpa? kalau tak jumpa cari code lagi satu nih

.sidebar h2 {
 Mesti dah jumpa kan? Okay, jom teruskan!

2. Buang anak-anak code yang ada bawah code yang korang dah jumpa tadi. *Kalau ada*
3. Copy code yang Ana kasi ni, dan pastekan dekat bawah 
margin: 1.6em 0 .5em;
font:11px century gothic;
text-transform:none;
text-align:center;
letter-spacing: 2px;
padding:5px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 15px;
border-bottom: 4px solid #ffcfcf;
background: #f5a9d0;
}
3. Preview dan save!

Done! Simple design for sidebar and post title isn't it? Selamat mencuba ye!
Assalamualaikum

No comments:

Post a Comment

Love you!