Sering kali kita dengar soal edit mengedit atau bahkan menciptakan template. Sebenarnya itu bukanlah hal yang susah kalau kita mau dan berusaha untuk berguru dan mencobanya. Hal yang perlu kita kuasai ialah mengetahui kode-kode html, css, dsb. Oke, kali ini saya akan mengajak teman untuk berlatih menciptakan template sederhana dengan menggunakan notepad. Disini saya menggunakan adonan antara html dasar dan aba-aba css. Oke eksklusif saja !
Buka Notepad Terlebih dahulu, kemudian buat aba-aba mirip cara-cara dibawah ini !
1. Pertama buat dulu aba-aba mirip dibawah. Nah, perhatikan kodenya ! Itu semua merupakan aba-aba css yang akan mewakili keseluruhan dari bentuk template. Kenapa harus menggunakan css? Karena dengan css tampilan akan terlihat lebih rapi dan bersih. Untuk keterangan sudah saya berikan dengan himpitan simbol /* dan */ .
<HTML>
<!-- bab kepala -->
<head>
<title>----Micro Cyber KW 2----</title> /* Bagian ini merupakan bab judul */
<style>
/* CSS */
#wrapper{
width: 800px; /* Ini lebar Template secara keseluruhan */
margin: auto; /* Ini untuk menciptakan "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 ialah 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 goresan pena berada ditengah atau center */
border: 2px solid #000000;
}
</style>
</head>
2. Selanjutnya masukkan terlebih dahulu aba-aba untuk membangun bab atasnya. Pada aba-aba bawah terdapat 2 kode, yaitu body dan header. Semua itu saya buat untuk mengatur atau menciptakan tampilan background berupa gambar. Sobat juga sanggup merubahnya dengan warna saja dengan memasukkan aba-aba warna entah dengan nama gambar atau url gambar. NB : Jika teman 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 */ .
<!-- bab badan/body nya -->
<body background="bgcolor.jpg"> /* Ini untuk gambar atau warna background keseluruhan */
<div id='wrapper'>
<!-- bab kepala/ header nya -->
<div class='header'>
<h1><img src="header.png"></h1> /* Ini untuk gambar atau warna background pada header */
</div>
3. Kemudian saatnya menciptakan bab pada postingan artikel/ isinya. Caranya mirip dibawah, yaitu dengan menciptakan heading kemudian menciptakan paragraf. untuk heading disimbolkan dengan aba-aba <h3> dan ditutup dengan </h3> . Kemudian untuk paragraf disimbolkan dengan aba-aba <p> dan ditutup dengan </p> . Pada heading juga sanggup diibaratkan sebagai judul artikel/ isi. Nah untuk aba-aba 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 buruk untuk dilihat, tetapi saya telah bersusah payah berguru dan berusaha untuk memahami perihal 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 persoalan 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 memperlihatkan materi produk kami kepada anda semuanya. Siapa tahu anda tertarik dan ingin membelinya. Kami memproduksi camilan khas Semarang. Yaitu Wingko Babat dan Lumpia. </p>
<a href="#"><b>Baca Selengkapnya ...</b></a> <br><br>
</div>
4. Setelah itu menciptakan bab widget tautan artikel. Caranya mirip dibawah dan aba-aba pagar (#) juga sama diisi link yang akan dituju. Pada aba-aba dibawah juga menggunakan aba-aba 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 menciptakan bab footer atau kaki pada template. Biasanya diisi dengan credit link atau yang lainya dengan menciptakan paragraf.
<!-- bab 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 mirip gambar dibawah ini ! Lalu coba buka hasil dari save-save'an tadi :)
<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 menciptakan bab footer atau kaki pada template. Biasanya diisi dengan credit link atau yang lainya dengan menciptakan paragraf.
<!-- bab 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 mirip gambar dibawah ini ! Lalu coba buka hasil dari save-save'an tadi :)
*Mengapa saya gunakan nama Microcyber2 ? Karena itu ialah salahsatu blog kesayangan aku, hahaha :D (www.microcyber2.blogspot.com)
Nah, itulah yang sanggup 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 berguru dan saling membenarkan apabila terjadi suatu kesalahan. Okelah, semoga artikel diatas bermanfaat untuk teman semuanya. Terimakasih
