Berbicara Themlate Blog adalah sebuah desain tampilan halaman yang berisikan dokumen file model-model tambahan yang dikodekan dalam bahasa program dan siap pakai.
Untuk memulai pembuatan template blog dengan CSS3, hendaknya anda membuat layout terlebih dahulu. Dalam membuat layout web/blog, hal yang sangat penting untuk diperhatikan dala tema web/blog itu sendiri sehingga Anda bisa menyesuaikan tema dan tampilannya. Bagian untuk membuat layout disini adalah menata bagian-bagian web seperti header, sidebar, konten utama, dan footer.
Untuk membuat layout, tidak perlu menggunakan terlalu banyak program, cukup coretan dikertas, Untuk melakkan coretan dengan menggunakan komputer, anda dapat menggunakan program Microsoft Word, paint atau program Photoshop untuk hasil yang lebih baik.
Contoh Struktur HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="wrapper">
<div id="head">
<h1> Header</h1>
</div>
<div id="menu">
<h2> Menu </h2>
</div>
<div id="konten">
<h2> Konten </h2>
</div>
<div id="sidebar">
<h2> Sidebar </h2>
</div>
<div id="footer">
<h3> Footer</h3>
</div>
</div>
</body>
</html>
 |
| Gambar : Tampilan Kode Struktur Di atas |
Coba anda lihat code Css dari html diatas
@charset "utf-8";
/* CSS Document */
body {
}
#wrapper
{
}
#header
{
}
#menu
{
}
#konten
{
}
#sidebar
{
}
#footer
{
}
Supaya bisa lebih efektif anda bisa menghubungkan antara file .html dengan code Css diatas dengan membagi 2 page yang satu mempunyai ekstensi .Html dan yang satu menggunakan .Css
Berikut Kode yang bisa anda gunakan untuk menhubungkan antara file html dan css;
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />Anda bisa meletakan posisi koding diatas antara <head></head> seperti kode diatas atau lebih tepatnya anda bisa memasangnya di bawah tag title.
<title>Untitled Document</title>
<link type="text/css" href="css/css.css" rel="stylesheet" />
</head>
