Cara Membuat Template Sederhana Menggunakan Text Editor Kalian
Sering kali kita dengar soal edit mengedit atau bahkan membuat template.
Sebenarnya itu bukanlah hal yang susah jika kita mau dan berusaha untuk
belajar dan mencobanya. Hal yang perlu kita kuasai adalah mengetahui
kode-kode html, css, dsb. Oke, kali ini saya akan mengajak sobat untuk
berlatih membuat template sederhana dengan menggunakan notepad. Disini
saya menggunakan campuran antara html dasar dan kode css. Oke langsung
saja !
Buka Notepad Terlebih dahulu, kemudian buat kode seperti cara-cara dibawah ini !
1. Pertama buat dulu kode seperti dibawah. Nah, perhatikan kodenya ! Itu
semua merupakan kode css yang akan mewakili keseluruhan dari bentuk
template. Kenapa harus memakai css? Karena dengan css tampilan akan
terlihat lebih rapi dan bersih. Untuk keterangan sudah saya berikan dengan himpitan simbol /* dan */ .
<HTML>
<!-- bagian kepala -->
<head>
<title>----Micro Cyber KW 2----</title> /* Bagian ini merupakan bagian judul */
<style>
/* CSS */
#wrapper{
width: 800px; /* Ini lebar Template secara keseluruhan */
margin: auto; /* Ini untuk membuat "CENTER" blog pada Browser */
}
.header{
height: 150px; /* Ini Untuk mengatur tinggi di header */
background-color:#FFA500; /* Ini Untuk mengatur warna background pada header*/
margin: 10px 10px 1px 10px;
padding: 10px;
border: 2px solid #000000; /* Border untuk mengatur ketebalan garis tepi dan #000000 adalah warna untuk garis tepi*/
}
.bagian-post{
float: right; /* Ini Untuk memposisikan Widget di kiri */
width: 525px; /* Ini Untuk mengatur lebar kotak postingan*/
height:400px;
margin: 0 10px 1px 0;
padding: 10px;
background-color: #ffffff;
border: 2px solid #000000;
}
.bagian-widget{
float: left; /* Ini untuk memposisikan Widget di Kanan */
width: 205px;
height:400px;
margin: 0 1px 1px 10px;
padding: 10px;
background-color:#8B0000;
border: solid 2px #000000;
}
.footer{
width: 800x;
background-color: #006400;
margin: 0 10px 10px 10px;
padding: 10px;
text-align: center; /* Ini untuk memposisikan tulisan berada ditengah atau center */
border: 2px solid #000000;
}
</style>
</head>
2. Selanjutnya masukkan terlebih dahulu kode untuk membangun bagian
atasnya. Pada kode bawah terdapat 2 kode, yaitu body dan header. Semua
itu saya buat untuk mengatur atau membuat tampilan background berupa
gambar. Sobat juga bisa merubahnya dengan warna saja dengan memasukkan
kode warna entah dengan nama gambar atau url gambar. NB : Jika
sobat ingin memberi background gambar dengan nama gambar, maka gambar
harus dijadikan satu folder dengan notepad yang telah disave ! Untuk keterangan sudah saya berikan dalam himpitan simbol /* dan */ .
<!-- bagian badan/body nya -->
<body background="bgcolor.jpg"> /* Ini untuk gambar atau warna background keseluruhan */
<div id='wrapper'>
<!-- bagian kepala/ header nya -->
<div class='header'>
<h1><img src="header.png"></h1> /* Ini untuk gambar atau warna background pada header */
</div>
3. Kemudian saatnya membuat
bagian pada postingan artikel/ isinya. Caranya seperti dibawah, yaitu
dengan membuat heading kemudian membuat paragraf. untuk heading
disimbolkan dengan kode <h3> dan ditutup dengan </h3> .
Kemudian untuk paragraf disimbolkan dengan kode <p> dan ditutup
dengan </p> . Pada heading juga bisa diibaratkan sebagai judul
artikel/ isi. Nah untuk kode pagar (#) dibawah, silahkan isi dengan link
yang akan dituju/ lanjutan artikel. Karena itu diibaratkan dengan read
more atau baca selengkapnya.
<!--Bagian Postingan-->
<div class='bagian-post'>
<h3>Inilah Template Buatan Pertama Saya</h3>
<p>Mungin ini terlalu jelek untuk dilihat, tetapi saya telah
bersusah payah belajar dan berusaha untuk memahami tentang web design.
Saya Membuat template ini atas ilmu dari guru saya yang mengajar di smk
telekomunikasi tunas harapan, dan juga hasil browshing saya di dunia
internet. Saya sangat semangat kalau masalah website, walaupun itu bukan
juruan saya hehehehe :D </p>
<a href="#"><b>Baca Selengkapnya ...</b></a> <br><br>
<h3>Belanja Murah Disini</h3>
<p>Selamat Siang semua, kali ini saya akan menawarkan bahan
produk kami kepada anda semuanya. Siapa tahu anda tertarik dan ingin
membelinya. Kami memproduksi makanan ringan khas Semarang. Yaitu Wingko
Babat dan Lumpia. </p>
<a href="#"><b>Baca Selengkapnya ...</b></a> <br><br>
</div>
4. Setelah itu membuat bagian widget tautan artikel. Caranya seperti
dibawah dan kode pagar (#) juga sama diisi link yang akan dituju. Pada
kode dibawah juga menggunakan kode heading yaitu <h2> dan ditutup
dengan </h2> .
<!-- Bagian Widget-->
<div class='bagian-widget'>
<h2>Artikel Terkait</h2>
<ul type="square">
<li><a href="/">Beranda</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Dasar-dasar CSS</a></li>
<li><a href="#">Buku Tamu</a></li>
<li><a href="#">Website Online ku</a></li>
</ul>
</div>
<div style='clear:both'>
5. Kemudian yang terakhir saatnya membuat bagian footer atau kaki pada
template. Biasanya diisi dengan credit link atau yang lainya dengan
membuat paragraf.
<!-- bagian footer-->
<div class='footer'>
<p>Copyright ©2015 - Design template : by Faiz Ihsan - Web Created : www.microcyber2.blogspot.com</p>
</div>
</body>
</HTML>
6. Setelah selesai, kemudian save notepad tadi seperti gambar dibawah ini ! Lalu coba buka hasil dari save-save'an tadi :)
*Mengapa saya gunakan nama Microcyber2 ? Karena itu adalah salahsatu blog kesayangan aku, hahaha :D (www.microcyber2.blogspot.com)
Nah, itulah yang dapat saya bagikan pada kesempatan kali ini. Untuk para
MASTAH WEB DESIGN, Walaupun tutorial diatas memang sangat cupu ya itu
memang cupu. Karena saya juga masih belajar, begitu pula dengan pemula
lainya. Mari kita sama-sama belajar dan saling membenarkan apabila
terjadi suatu kesalahan. Okelah, semoga artikel diatas bermanfaat untuk
sobat semuanya. Terimakasih~