Free Islamic Blogger Templates: September 2006

Tutorial sebelumnya mengenai pembuatan template Non CSS. Tutorial kali ini membahas penggunaan CSS atau Cascading Style Sheet. Merupakan pengumpulan data style yang kita gunakan dalam pembuatan template.
Template kita sebelumnya:
-----------------------------------------
<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title><$BlogPageTitle$></title>
<$BlogMetaData$>
</head>
<body style="background:#ADD2FF url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-bgcontent.jpg) repeat-y center; font:12px verdana; color:#01244F;" link="#000000" vlink="#000000" leftmargin="0" topmargin="0" rightmargin="0" marginwidth="0" marginheight="0">
<div align="center">
<div id="content" align="left" style="width:750px; border-top:5px solid #FFE53C">
<div id="header">
<img src="http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-header1.jpg" /><img src="http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-header2.jpg" /><img src="http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-header3.jpg" />
</div>
<div id="sidebar" style="float:left; width:230px; border-top:5px solid #FFE53C; font-size:11px;">
<h2 style="background:#D6E9FD url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-title.jpg) no-repeat 0 0; font-weight:bold; font-size:14px; color:#A93101; padding-left:20px; padding-top:5px; padding-bottom:5px;">...Hari Kemarin</h2>
<ul style="list-style:none; margin-left:0; line-height:1.5em;">
<BloggerPreviousItems>
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;">
<a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a>
</li>
</BloggerPreviousItems>
</ul>
<h2 style="background:#D6E9FD url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-title.jpg) no-repeat 0 0; font-weight:bold; font-size:14px; color:#A93101; padding-left:20px; padding-top:5px; padding-bottom:5px;">...Kumpulan Arsip</h2>
<MainOrArchivePage>
<ul style="list-style:none; margin-left:0; line-height:1.5em;">
<BloggerArchives>
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;">
<a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a>
</li>
</BloggerArchives>
<ArchivePage>
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;">
<a href="<$BlogURL$>">Current Posts</a>
</li>
</ArchivePage>
</ul>
</MainOrArchivePage>
<$BlogMemberProfile<$BlogMemberProfile<$BlogMemberProfile<$BlogMemberProfile$>
amp;gt;
amp;gt;
<h2 style="background:#D6E9FD url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-title.jpg) no-repeat 0 0; font-weight:bold; font-size:14px; color:#A93101; padding-left:20px; padding-top:5px; padding-bottom:5px;">...Blog Teman</h2>
<ul style="list-style:none; margin-left:0; line-height:1.5em;">
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;">
<a href="http://riniaisyah.blogspot.com/" target="_blank">rini medan</a>
</li>
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;">
<a href="http://blogger-skin-resources.blogspot.com/" target="_blank">free skin</a>
</li>
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;">
<a href="http://moeslimah.blogspot.com/" target="_blank">muslimah</a>
</li>
</ul>
</div>
<div id="main" style="float:right; width:500px; padding:5px;">
<Blogger>
<BlogDateHeader>
<h2 style="text-align:right; font:bold 85% Georgia,Serif; color:#4487CD; text-transform:uppercase; letter-spacing:.3em;">
........... <$BlogDateHeaderDate$> </h2>
</BlogDateHeader>
<BlogItemTitle>
<BlogItemUrl><a href="<$BlogItemUrl$>" title="external link"></BlogItemUrl>
<h3 style="background: url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-title.jpg) no-repeat 0 0; padding:2px 14px 2px 25px; font:bold Georgia,Serif; color:#A93101; border-bottom:1px dashed #000000;"><$BlogItemTitle$></h3>
<BlogItemUrl></a></BlogItemUrl>
</BlogItemTitle>
<p style="background:#D6E9FD url("http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-bgpost.jpg") no-repeat bottom right; line-height:1.5em;">
<$BlogItemBody$>
</p>
<p style="line-height:1.5em; color:#4487CD; text-align:right;">
<em style="float:left; text-align:left;">posted by <$BlogItemAuthorNickname$>@ <a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$></a>
</em>
<MainOrArchivePage>
<BlogItemCommentsEnabled>
<a style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-comment.gif) no-repeat 0 .3em; padding-left:14px;" href="<$BlogItemPermalinkUrl$>#komentar"><$BlogItemCommentCount$> comments</a>
</BlogItemCommentsEnabled>
</MainOrArchivePage><$BlogItemControl$>
</p>
<ItemPage>
<BlogItemCommentsEnabled><a name="comments"></a>
<h4 style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-comment.gif) no-repeat 0 1em; padding-left:14px; padding-top:10px; font-size:14px; border-top:1px dashed #000000;"><$BlogItemCommentCount$> Comments:</h4>
<dl>
<BlogItemComments>
<dt style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-comment.gif) no-repeat 0 .3em; padding-left:14px;" id="c<$BlogCommentNumber$>"><a name="c<$BlogCommentNumber$>"></a>
At <$BlogCommentDateTime$>, <$BlogCommentAuthor$> said...
</dt>
<dd>
<p>"<$BlogCommentBody$>"</p>
<$BlogCommentDeleteIcon$>
</dd>
</BlogItemComments>
</dl>
<p><$BlogItemCreate$></p>
<p><a href="<$BlogURL$>"><< Home</a></p>
</BlogItemCommentsEnabled>
</ItemPage>
</Blogger>
</div>
<div id="footer" style="clear:both; background:#FFE43B; text-align:center; padding:2px;"><$BlogPageTitle$></div>
</div>
</div>
</body>
</html>
--------------------------------

Kalau diperhatikan, ada banyak tag style bahkan ada yang berulang penggunannya. Dengan menggunakan CSS, penulisan style dapat diringkas.
Tag style CSS diletakkan di antara tag <head>, yaitu:

<head>
<title><$BlogPageTitle$></title>
<$BlogMetaData$>

<style type="text/css">
</style>
</head>

1. Body
<body style="background:#ADD2FF url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-bgcontent.jpg) repeat-y center; font:12px verdana; color:#01244F;" link="#000000" vlink="#000000" leftmargin="0" topmargin="0" rightmargin="0" marginwidth="0" marginheight="0">
Ambil isi dari style dan pindahkan pada CSS. Setiap titik koma (;) dibuat perbaris. Untuk url background diberi tanda petik, menjadi:

<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;
}
</style>

Margin dituliskan dengan: margin:0 auto;.
Padding diatur: padding:0;.
Tentukan align dengan menulis text-align:center;.

Hasilnya menjadi:
<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;
}
</style>

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:

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;
}

Selanjutnya, atur juga jarak antar baris pada paragraph sidebar, yaitu:

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

6. Sidebar Title
<h2 style="background:#D6E9FD url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-title.jpg) no-repeat 0 0; font-weight:bold; font-size:14px; color:#A93101; padding-left:20px; padding-top:5px; padding-bottom:5px;">...Hari Kemarin</h2>

Ambil style untyk h2, pindahkan pada CSS, namakan sidebar-title (boleh juga diberi lain, misal 'judul-sidebar' dengan aturan dasar tidak boleh ada spasi) dengan tata cara penulisan diawali dengan tanda titik atau .sidebar-title :

.sidebar-title {
background:#D6E9FD url("http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-title.jpg")
no-repeat 0 0;
font-weight:bold;
font-size:14px;
color:#A93101;
padding-left:20px;
padding-top:5px;
padding-bottom:5px;
}

Untuk menggunakan element sidebar title ini pada tag <h2> harus ditambahakan tag class, yaitu :
<h2 class="sidebar-title">...Hari Kemarin</h2>

Hal yang sama berlaku untuk semua judul yang ada di bagian sidebar. Hapus tag style dan tambahkan class-nya. Pada judul 'Kumpulan Arsip' dan 'Blog Teman.

7. Daftar List pada Sidebar (khusus sidebar)
<ul style="list-style:none; margin-left:0; line-height:1.5em;">
Dipindahkan menjadi:

#sidebar ul {
list-style:none;
margin-left:0;
line-height:1.5em;
}

Hapus semua style yang terdapat pada tag <ul>.
<li style="background:url("http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif") no-repeat 0 .45em; padding-left:16px;">
Pindahkan menjadi:

#sidebar ul li {
background:url("http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif") no-repeat 0 .45em;
padding-left:16px;
}

Sama seperti tag <ul>, hapus juga semua style yang ada pada tag <li>.

8. Main
<div id="main" style="float:right; width:500px; padding:5px;">
Pindahkan style ke CSS menjadi :

#main {
float:right;
width:500px;
padding:5px;
}

9. Tanggal
<h2 style="text-align:right; font:bold 85% Georgia,Serif; color:#4487CD; text-transform:uppercase; letter-spacing:.3em;">........... <$BlogDateHeaderDate$> </h2>

Ambil style untuk penulisan tanggal dan masukkan ke dalam CSS beri nama date-header :

.date-header {
text-align:right;
font:bold 85% Georgia,Serif;
color:#4487CD;
text-transform:uppercase;
letter-spacing:.3em;
}

Gunakan CSS ini dengan menggunakan class:

<h2 class="date-header">........... <$BlogDateHeaderDate$> </h2>

10. Judul Posting
<h3 style="background: url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-title.jpg) no-repeat 0 0; padding:2px 14px 2px 25px; font:bold Georgia,Serif; color:#A93101; border-bottom:1px dashed #000000;"><$BlogItemTitle$></h3>

Ambil style untuk penulisan judul posting, masukkan ke dalam CSS dan beri nama post-title :

.post-title {
background: url("http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-title.jpg") no-repeat 0 0;
padding:2px 14px 2px 25px;
font:bold Georgia,Serif;
color:#A93101;
border-bottom:1px dashed #000000;
}

Gunakan CSS ini dengan menggunakan class:

<h3 class="post-title"><$BlogItemTitle$></h3>

11. Isi Postingan

<p style="background:#D6E9FD url("http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-bgpost.jpg") no-repeat bottom right; line-height:1.5em;">
<$BlogItemBody$>
</p>

Ambil style ini dan masukkan ke dalam CSS, beri nama post :

.post {
background:#D6E9FD url("http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-bgpost.jpg") no-repeat bottom right;
line-height:1.5em;
}

Gunakan CSS ini dengan menggunakan class:

<p class="post"><$BlogItemBody$></p>

12. Post Footer

<p style="line-height:1.5em; color:#4487CD; text-align:right;">
<em style="float:left; text-align:left;">posted by <$BlogItemAuthorNickname$>

@ <a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$></a>
</em>

Ada dua style:
Pindahkan style paragraph (p) menjadi:

.post-footer {
line-height:1.5em;
color:#4487CD;
text-align:right;
}
Gunakan CSS ini dengan menggunakan class:
<p class="post-footer>

Pindahkan style em menjadi:
.post-footer em {
float:left;
text-align:left;
}

13. Hyperlink Post Footer Komentar

<a style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-comment.gif) no-repeat 0 .3em; padding-left:14px;" href="<$BlogItemPermalinkUrl$>#komentar"><$BlogItemCommentCount$> comments</a>

Ambil style untuk link komentar, pindahkan ke CSS, beri nama comment-link. Karena ini merupakan link, maka diawali dengan a. :
a.comment-link {
background:url("http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-comment.gif") no-repeat 0 .3em;
padding-left:14px;
}

Gunakan CSS ini dengan menggunakan class:
<a class="comment-link" href="<$BlogItemPermalinkUrl$>#komentar"><$BlogItemCommentCount$> comments</a>

NOTE !
Untuk penggunanan IE5/Mac, CSS yang digunakan:

html>body a.comment-link {
background:url("http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-comment.gif") no-repeat 0 .3em;
padding-left:14px;
}

Sehingga kedua CSS ini dituliskan / digunakan.

14. Judul Komentar

<h4 style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-comment.gif) no-repeat 0 1em; padding-left:14px; padding-top:10px; font-size:14px; border-top:1px dashed #000000;"><$BlogItemCommentCount$> Comments:</h4>

Ambil style-nya, pindahkan ke CSS, beri nama comment-title :
.comment-title {
background:url("http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-comment.gif") no-repeat 0 1em;
padding-left:14px;
padding-top:10px;
font-size:14px;
border-top:1px dashed #000000;
}

Gunakan CSS dengan menggunakan class :
<h4 class="comment-title"><$BlogItemCommentCount$> Comments:</h4>

15. Komentar

<dt style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-comment.gif) no-repeat 0 .3em; padding-left:14px;" id="c<$BlogCommentNumber$>">
Ambil style, pindahkan ke CSS beri nama .comment-poster :
.comment-poster {
background:url("http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-comment.gif") no-repeat 0 .3em;
padding-left:14px;
}

Aktifkan CSS ini dengan menggunakan class :
<dt class="comment-poster" id="c<$BlogCommentNumber$>">

16. Footer
<div id="footer" style="clear:both; background:#FFE43B; text-align:center; padding:2px;"><$BlogPageTitle$></div>
Ambil style, pindahkan ke CSS, beri nama .footer :
#footer {
clear:both;
background:#FFE43B;
text-align:center;
padding:2px;
}

17. Blockquote

Blockquote atau kutipan bisa kita disain, misalnya:
blockquote {
margin:5px 90px 5px 5px;
border:1px dashed #01244F;
background:#CAD8E6;
border-width:1px 0;
padding:5px 15px;
font-style:italic;
}

18. Border untuk Gambar

Terakhir, bila ingin, kita dapat mengatur border gambar. Kalau ingin semua gambar pada #main memiliki border, maka element CSS yang digunakan adalah #main img. Namun, bila yang ingin diberi border hanya gambar-gambar postingan, maka element CSS nya .post img.
Misalnya, aku ingin memberi border untuk tiap gambar yang kuposting, maka element CSS yang kugunakan:

.post img {
margin:0 0 5px 0;
padding:3px;
border:1px solid #C86FC7;
}