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;
}
-- Selesai --
Lihat tutorial lainnya di Azzahrah Design
15 komentar:
terima kasih atas tutorialnya
@vyrent
sebenarnya, ga jauh beda antara classic dengan XML, terutama dengan CSS nya
Yang bikin beda adalah sistem penulisan XML dimana setiap tag pembuka harus ditutup dengan tag itu pula.
makasih mba rini..
tapi apa harus online ya bikinnya?
Untuk sekedar otak-atik, ga harus online. Hasilnya harus disimpan di html template blogger.
Mba makasih ya infonya...kebetulan saya pengen ngubah template blog saya....coba bikin tp gak bisa...hehehehehe
mau cari tmplte bikinan mba aja deh, cuma nnti sya ubah2 dikit...hehehehe
Assalamu'alaykum Mba...
Mau tanya, kalo tampilan blog eror (turun)itu kenapa ya? (padahal tampilan di page element nya udah bener sejajar). Aku dah coba utak atik widht nya tapi gak bener2. Trus biar nyamain tampilan semua browser sama, ada caranya gak ya? (udah googling tapi gak berhasil2 juga, hiks) bikin penasaran banget. Jazaakillah khair ya Mba...
halo...
ada imel ga?
klo ada...
minta donk...
mau nanya2 + minta help dikit...
thx
wah tengkiyu tenan kok baru sekarang aku temukan info ini
jangan lupa kalo ada info terbaru mbok aku dihubungi di sini
http://herbamart.blogspot.com
buat teman-teman juga gitu kalo engko punya info hubungi aku di sini juga
http://herbamart.blogspot.com
jazakillahu khoiron infonya coba tak terapkan tolong diliat yah kalo sudah jadi
Ass.wr.wb.
salam kenal sohib .. dus tutorialnya lengkap nih.. saya bookmarks dulu ah, ntar mampir lagi..
Waw ternyata gitu yah kalau bikin css.. Saya pelajari dulu deh ..makasih infonya sohib.. n selamat berpuasa
pengethuanku soal css template jd brtambh. mbak rini ma kacih yo... ??
Wah, tambah pengalamn nich.. Ijin nyinau ya Mbak....
Thanks...
baru nemuin nih yang blak2an kaya gini.... keren.
terimakasih.
assalamualaikum.
salam kenal, saya ari... mau tanya software untuk membuat template blog pake apa ya?
Post a Comment