Cara Membuat Template Sederhana
Artikel tentang Cisco Packet Tracer, kegunaan dan fungsinya. Jika ada pertanyaan, saran, request atau link rusak, silahkan hubungi admin di Facebook
Terima Kasih :D
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~
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Demikianlah artikel tentang Cara Membuat Template Sederhana. Jika ada pertanyaan, saran, request atau link rusak, silahkan hubungi admin di Facebook Terima Kasih :D
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Anda sedang berada di halaman Cara Membuat Template Sederhana dengan url permalink http://ngaselnet.blogspot.co.id/2016/10/cara-membuat-template-sederhana.html Semoga artikel ini bermanfaat.
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Demikianlah artikel tentang Cara Membuat Template Sederhana. Jika ada pertanyaan, saran, request atau link rusak, silahkan hubungi admin di Facebook Terima Kasih :D
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Anda sedang berada di halaman Cara Membuat Template Sederhana dengan url permalink http://ngaselnet.blogspot.co.id/2016/10/cara-membuat-template-sederhana.html Semoga artikel ini bermanfaat.