Tutorial : Sidebar

4:26 PM



Assalamualaikum =)

Hai semua...

Dengar cerita dua hari kerajaan umumkan cuti untuk bebudak sekolah. Hooray! Aku tolong sorakkan untuk korang, haha. Ok takde, gurau je! Adik aku tu ha, kemahin happy kot dengar dapat cuti. Pula tu dua hari, hurmmm... Dulu aku masa sekolah, kalau boleh tak nak cuti. Nak juga pergi sekolah! Tapi budak sekarang macam dah terbalik pula, rasanya...Ada je yang minta permission mak ayah nak ponteng sekolah, lagi pula dengar berita kerajaan bagi cuti ni...Hurm,lagi sakanlah soraknya...

So oklah, hari ni seperti yang di janjikan dekat entry yang lepas tu...Aku akan buat satu entry untuk sidebar, seeprti yang di request oleh Syikin. Maaf ye awak, kita baru sempat nak 'godeh' balik HTML (study balik, kot lupa). Maklumlah, masa first time apply tutorial ni kat blog...Memang berejam juga, lagilah aku pakai simple template. 

Serious cakap, dalam banyak - banyak template aku guna selama ni...Simple template agak susah untuk di edit (ni pendapat akulah). 

So Shikin minta aku ajarkan dia macam mana nak buat sidebar macam blog aku ni. 

Dekat bawah ni tutorialnya. 
Tapi sebelum tu nak bagitahulah, yang tutorial huda buat ni untuk simple template. 


Step 1 : Dashboard > Template > Edit HTML
Step 2 : Cari code /* Headings . Copy code dibawah ni;
h2.date-header {
text-align:center;
background-color:transparents; repeat scroll bottom center;
border-bottom: 0px solid #2B65EC;
margin:1em;
font:normal 12px Century Gothic;
color: #000000;
}
h2 {
text-align:center;
background-color:transparents; repeat scroll bottom center;
border-bottom: 2px solid #F778A1;
margin:1em;
font:normal 12px Century Gothic;
color: #000000;
}
 *kemudian pastekan code yang korang dah copy tadi di bawah code /* Headings

Step 3 : Cari pula code /* Widgets . Copy code dekat bawah ni;
.sidebar {
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
margin:0 0 1.5em;
padding:20px;
font-size: 95%;
background: #ffffff url(URL BACKGROUND) repeat scroll bottom center;
border: 2px solid #F778A1;
line-height:1.9em;
}
*kemudian pastekan code yang korang dah copy tadi, di bawah code  /* Widgets

Step 4 : Preview. If no error, save template dan lihat hasilnya.
Siap! =)

Nota :
code yang di bold kan tu, contoh (#F778A1) < ok ni adalah code warna. Korang boleh tukar ikut suka korang nak warna apa. 
URL BACKGROUND pun korang boleh letak background yang korang suka. 
untuk code h2.date-header { ni, kalau tak letak pun tak apa kot. Kalau korang nak delete code ni pun boleh (kalau tak ada error dalam coding korang). 
So oklah sampai sini je. Thanks singgah dan tengok tutorial ni. Selamat mencuba! =)

Bye, salam

You Might Also Like

0 comment di sini.