Advertisement here

Tutorial membuat template website

Sebuah template website memang berbeda-beda, namun dibalik perbedaan itu ada satu hal persamaan pada setiap website. Ya, mereka selalu mempunyai struktur yang sama, yaitu header, content dan footer. Apakah membuat template website itu susah? Dibilang susah ngga, dibilang gampang juga tidak! Ini tergantung dari kreatifitas orang yang membuatnya. Kali ini saya akan berbagi tutorial membuat dasar sebuah template website.

Goal dari tutorial ini adalah sebagai berikut:

Dasar membuat layout website
Langsung saja, silahkan buka code editor yang sering anda gunakan misalnya notepad++, sublime dkk. Buat sebuah file misalnya diberi nama index, jangan lupa format dari file ini ada html. Berikut code yang digunakan untuk index.html:

<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 . Kemudian buat file bernama style dengan format .css , simpan satu folder dengan file index.html tadi.
Berikut 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 anda. Jika tampilannya sama dengan goal diatas maka anda sukses dalam tutorial ini. Sekian tulisan pengalaman ngajarcss tentang Tutorial membuat template website ini, semoga bermanfaat untuk belajar google adsense

Next Post Previous Post
18 Comments
  • Unknown
    Unknown January 12, 2014 at 3:48 AM

    cara menambahkan menu seperti dropdown di dalam nya gimana gan? saya ikuti template ini menu nya jadi. tapi content + sidebar nya jadi di samping menu. mau saya menu nya di bawah header dan content + sidebar di bawah menu help ya...

    • Rangga
      Rangga January 12, 2014 at 7:41 PM

      Halo mas,

      Itu menu dropdownya disimpen di section mana?

      Coba tambahkan code css ini di class content.

      Code css untuk class content dibuat seperti ini:

      .content{
      overflow:hidden;
      clear:both;
      }

      Kalo masih belum bisa, coba codenya simpen di pastebin.com :D
      Nanti sya coba bantu .

    • Unknown
      Unknown January 17, 2014 at 4:06 AM

      tq gan dah dibales. tenyata gara2 file css nya saya satukan gak pisah jadinya benrantakan

    • Rangga
      Rangga January 17, 2014 at 4:40 AM

      owh jadi dah ketemu masalahnya, oke gan kalo gitu :D

  • Unknown
    Unknown May 26, 2014 at 3:25 AM

    footernya kok gak bisa tampil mas..
    smuanya bisa cuman footernya aja yang gak tampil..

    • Rangga
      Rangga May 28, 2014 at 3:09 AM

      ga bisa tampil gimana gan? coba taruh di jsfiddle .
      Apakah code nya udah sama kayak diatas?

  • Ki Sekar
    Ki Sekar December 9, 2014 at 7:01 AM

    terimakasih mas admin,,, artikelnya sangat bermanfaat untuk saya...

    salam kenall...
    Ki Sekar
    by : www.mustikasakralspiritual.com

  • Unknown
    Unknown December 12, 2014 at 6:25 PM

    This comment has been removed by a blog administrator.

  • Unknown
    Unknown December 12, 2014 at 7:37 PM

    Maaf mas Rangga ato yg lain mgk bisa jawab,, untuk style.css maksudnya di mssukan gitu di html di setiap kategori masing2 ato gimana,, maklum newbe baru belajar,, tolong ya mau jawab,, thks..

    • Rangga
      Rangga December 13, 2014 at 6:13 AM

      jadi gini mas ziggy, mas buat file namanya style.css nah isinya itu khusus untuk style saja. bukan dimasukan ke html, tpi dalam satu folder ada file html dan css. di html mas masukin strukturnya, untuk stylenya mas masukan ke style.css

  • Unknown
    Unknown December 25, 2014 at 8:27 PM

    terimakasih sob untuk tutorialnya, sangat membantu banget..
    http://acemaxsshop.com/obat-radang-paru-paru-tradisional/

  • Hendra Prasetya
    Hendra Prasetya April 19, 2015 at 12:20 AM

    hallo sy masih pemula tentang web design. mau tanya, kenapa inline elemen bisa di set width dan height nya hanya karena attribute float nya di set. tolong penjelasannya :)

  • Unknown
    Unknown November 26, 2015 at 11:40 PM

    berhasil gan

  • chandra
    chandra September 22, 2016 at 12:26 PM

    makasih info semoga berguna buat orang banyak
    http://www.sumberindonesia.com/
    http://gula77.blogspot.co.id

  • chandra
    chandra September 22, 2016 at 12:26 PM

    makasih info semoga berguna buat orang banyak
    http://www.sumberindonesia.com/
    http://gula77.blogspot.co.id

  • SITUS PKV JUDI QQ ONLINE
    SITUS PKV JUDI QQ ONLINE January 19, 2017 at 3:12 PM

    This comment has been removed by a blog administrator.

  • F TV
    F TV July 29, 2017 at 9:06 PM

    Salam kenal

  • AQUATIC Fishing ART
    AQUATIC Fishing ART October 20, 2017 at 1:18 AM

    nice informasinya kawan
    http://essenaquatic.xyz

Add Comment
comment url
Related Post
tutorial