Mengetahui Dasar Penyusunan Template Blog

Kali ini saya akan bercerita dan mencoba membongkar dasar pembuatan template atau cara membuat template dengan hasil karya kita sendiri. Sebelumnya kita harus tahu dahulu dasar-dasarnya agar hasil dari template yang kita rancang sesuai dengan yang kita inginkan.

Bicara mengenai template, dulu saya sangat sering mendownload dan menggunakan template-template gratis yang disediakan oleh situs penyedia template yang bertebaran di internet. Salah satu situs yang saya sering gunakan jasanya adalah Zoom Template. Namun, seiring berjalannya waktu dan kebiasaan saya dalam memodifikasi template-template yang ada. Akhirnya hal tersebut membawa saya menemukan cara bagaimana membuat template dengan karya sendiri.

Sebelum lebih jauh membahas artikel ini, ada baiknya kamu menyiapkan beberapa perlengkapan agar dapat mempermudah pekerjaan kamu dalam merancang template :

- Sangat dianjurkan mempunyai program Notepad++

- Terhubung ke Internet

Adapun susunan yang terdapat pada sebuah template umumnya, yakni :
- Title

- Header
- Menu Navigasi

- Content

- Sidebar, dan

- Footer

Selanjutnya adalah susunan rangkaian kode pada template blog khususnya untuk pengguna blogger. Coba perhatikan dan fahami rangkaian contoh kode yang saya susun berikut:

DEMO

<!DOCTYPE html>
<html>
<head>
<title>Title Blog</title>
<b:skin><![CDATA[
body {
background: #FFFFFF;
color: #424242;
margin: 0 auto;
padding: 5px;
width: 900px;
height: auto;
}
header {
background: #FAFAFA;
color: #585858;
margin: 0;
padding: 5px;
}
#outer-wrap {
width: 100%;
overflow: hidden;
}
#main-wrap {
width: 620px;
float: left;
}
#sidebar-wrap {
width: 270px;
float: right;
overflow: hidden;
}
footer {
background: #FAFAFA;
color: #585858;
margin: 0;
padding: 5px;
width: 100%;
height: 130px;
}
]]></b:skin>
</head>
<body>
<header><h1>Judul Blog</h1></header>
<div id='outer-wrap'>
<div id='main-wrap'><p>Isi Konten Blog</p></div>
<div id='sidebar-wrap'><p>Bagian Sidebar</p></div>
</div>
<footer><h3>Copyright 2013</h3></footer>
</body>
</html>

Dengan menggunakan kode diatas, silahkan kamu copy-paste ke file baru notepad++ lalu disimpan. Karena kode diatas akan menjadi langkah awal kita dalam merancang template yang akan saya bahas pada artikel selanjutnya. Dan karena kode tersebut hanya berupa contoh, maka kamu dapat mengatur kembali kode diatas sesuai kehendak kamu. Diharapkan tutorial kali ini dapat membantu kamu dalam mengetahui susunan rangkaian kode pada pembuatan template blog.

20 comments :

Gupitan

15 November 2013 at 03:56

Ternyata kerangkanya seperti ini ya Sob,,, bermanfaat skali sob buat belajar bikin template

Mizz Aiza

15 November 2013 at 08:27

sehingga kini saya menggunakan template yang dibuat oleh orang lain.. untuk membikin sendiri saya tidak pandai.. tambahan pula dengan pelbagai code lagi saya tidak faham..