>>>Selamat Datang :::: Simak berbagai info menarik +++ Kritik, saran, informasi atau artikel dapat dikirimkan kepada kami melalui email prabawa08s@gmail.com >>> Info pemasangan iklan by email atau SMS ke +6285217365999 ::: Terima kasih atas Kunjungannya dan semoga Bermanfaat <<<<

Thursday, July 2, 2015

http://wanskawani.blogspot.com/ KAWANI MEDIA
بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم



Setiap Template blog yang sudah tersedia mengandung unsur yang berbeda - beda, tapi dibalik perbedaan itu ada satu hal persamaan pada setiap design Template Web yaitu memiliki struktrur yang sama diantaranya, Header, Content, Sidebar dan Footer. Lalu sulitkah membuat sebuah Template Website yang sesuai dengan keinginan kita? Bisa dibilang Ya bisa juga tidak! Ini tergantung dari kreativitas para blogger. Kali ini saya akan
berbagi Tutorial Tips Cara Membuat Template Website sederhana, Yok kita coba!

Contoh dasar Layout Website adalah:


Langsung kita mulai:
Buka Code editor yang sering kita gunakan misalnya Notepad++, Sublime dll,
Buat sebuah file misalnya diberi nama blogedit, jangan lupa format dari file ini adalah HTML. Code yang digunakan untuk index HTML adalah:

<html>
<head>
<title>Membuat Layout sederhana</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="container">
 <div class="header">
  <span class="title">Dipakai untuk Header</span>
 </div>
 <div class="content">
  <div class="entry-content">
   <span class="title">Isi dari konten</span>
  </div>
  <div class="sidebar">
   <span class="title">Isi dari sidebar</span>
  </div>
 </div>
 <div class="footer">
  <span class="title">Isi untuk footer</span>
 </div>
</div>
</body>
</html>


Klik Save,  kemudian kita tambahkan style untuk index HTML lalu buat file bernama style dengan format CSS, simpan satu folder dengan file index HTML tadi. Ini Code untuk style CSS:

.container{
 margin:0 auto;
 max-width:978px;
}

.header{
 background:red;
 height:200px;
}
.content{
 overflow:hidden
}
.entry-content{
 background:#eee;
 width:642px;
 float:left;
 display:inline;
 height:500px;
}
.title{
 font-size:40px;
 font-weight:bold;
}
.sidebar{
 background:#21E28D;
 width:336px;
 display:inline;
 float:left;
 height:500px;
}

.footer{
 background:#333;
 height:200px;
}

Kemudian buka lagi index html di browser kita, jika tampilannya sama dengan Contoh dasar Layout Website diatas artinya kita sukses membuatnya dan berhasil dalam membuat tutorial ini. Bagaimana, cukup sederhana kan?

Demikian, semoga bermanfaat, terimakasih atas kunjungannya,mohon komentar dan sarannya, ini hanya sebatas berbagi dalam rangka mempererat silaturaahmi dengan kawan para blogger mani. Semoga sukses.

(diambil dari berbagai sumber) 


Diposting Oleh : Wawan Sihabuddin

Wans Sihabuddin Anda sedang membaca artikel tentang Cara Membuat Templet Blog Sederhana. Anda diperbolehkan mengcopy paste isi blog ini, namun jangan lupa untuk mencantumkan link ini sebagai sumbernya. Beritahukan kepada saya jika ada Link yang rusak atau tidak berfungsi. Apabila suka dengan postingan ini silahkan di Like dan Share dengan tidak lupa Komentar dan Masukannya.

:: Get this widget ! ::

Share artikel ke: Facebook Twitter Google+ Linkedin
Reaksi:

0 komentar:

Waktu Adzan

Pilih Artikel

Arsip Lain

Followers

Translite

English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified
By : Kawani

Sponsor

Random Post

Al-Qur'an

Al-Qur'an Online

Anda juga bisa menggunakan navigasi berdasarkan surat yang telah disediakan dibawah ini:

Shalat Tepat Waktu

Kalender Hijriyah




Perhitungan pada sistem konversi Masehi – Hijriah ini memungkinkan terjadi selisih H-1 atau H+1 dari tanggal seharusnya untuk tanggal Hijriyah

Popular Posts

Space Ad

Ingin Berlangganan Post Terbaru

Subscribe via Email