Tutorial Membuat Template Blog/Web dengan CSS siri 2 ~ Discover Everything In Evshare

Wednesday, July 22, 2009

Tutorial Membuat Template Blog/Web dengan CSS siri 2

Wednesday, July 22, 2009 Tutorial Blog No comments

Assalamualaikum...bertemu lagi kita, sori bebanyak..cz lama tak update blog..maklumlah banyak kerja nak di siapkan insyallah saya akan sambung tutorial membuat template yang saya buat minggu lepas....Ohya! gambar kat sebelah tu hanyalah hiasan ...kalau tak suka...sila abaikan..hehhe..saje letak gambar tu...sebab dah takde gambar yang sesuai...

Ok...kita sambung dari tutorial lepas....

2. TD

Pada bagian element body CSS, copy font, color, margin, padding, dan text-align kemudian buat element baru CSS yang dinamai TD :

td {
font:12px verdana;
color:#01244F;
margin:0 auto;
padding:0;
text-align:center;
}

3. LINK

Pada bagian tag <body> masih terdapat unsur link, yaitu:
<body link="#000000" vlink="#000000">
Link ini, pada CSS dipisahkan menjadi elemen-elemen BERIKUT:

a:link {
color:#000000;
}
a:visited {
color:#000000;
}
a:hover {
color:#01244F;
}

a:link merupakan pengaturan link. a:visited pengaturan link yang sudah pernah dibuka. a:hover pengaturan link yang disorot.

Untuk sementara, CSS yang sudah ada:
--------------------------------------
<style type="text/css">
body {
background:#ADD2FF url("http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-bgcontent.jpg") repeat-y center;
font:12px verdana;
color:#01244F;
margin:0 auto;
padding:0;
text-align:center;
}
td {
font:12px verdana;
color:#01244F;
margin:0 auto;
padding:0;

text-align:center;
}
a:link {
color:#000000;
}
a:visited {
color:#000000;
}
a:hover {
color:#01244F;
}

</style>
-----------------
4. Content

<div id="content" align="left" style="width:750px; border-top:5px solid #FFE53C">
Ambil style dan align untuk content, pindahkan pada CSS. Karena content merupakan tag id, maka pada CSS, penamaan content diawali dengan karakter # atau #content.

#content {
width:750px;
border-top:5px solid #FFE53C;
text-align:left;
}

5.Sidebar

<div id="sidebar" style="float:left; width:230px; border-top:5px solid #FFE53C; font-size:11px;">
Ambil style untuk sidebar, pindahkan pada CSS. Karena sidebar merupakan tag id, maka pada CSS, penamaan sidebar diawali dengan karakter # atau #sidebar.

#sidebar {
float:left;
width:230px; >
border-top:5px solid #FFE53C;
font-size:11px;
}

Seterusnya, atur juga jarak antara baris pada paragraph sidebar, iaitu:

#sidebar p {
line-height:1.5em;
}

.....Bersambung