Cara Membuat Layout Untuk Sebuah Blog

Di bawah ini kita akan mempelajari cara membuat layout blog yang responsif dengan CSS.

Kita akan membuat layout untuk blog responsif yang bervariasi antara dua kolom dan lebar penuh bergantung pada lebar layar.

Mari lihat contoh di bawah ini :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

/* Tambahkan warna latar belakang abu-abu dengan beberapa padding */
body {
  font-family: Arial;
  padding: 20px;
  background: #f1f1f1;
}

/* Header/Blog Title */
.header {
  padding: 30px;
  font-size: 40px;
  text-align: center;
  background: white;
}

/* Buat dua kolom tidak sama yang mengapung di samping satu sama lain * /
/ * Kolom kiri */
.leftcolumn {
  float: left;
  width: 75%;
}

/* Column Kanan */
.rightcolumn {
  float: left;
  width: 25%;
  padding-left: 20px;
}

/* gambar yang di pakai */
.fakeimg {
  height: 200px;
  padding: 20px;
}

/* Tambahkan efek kartu untuk artikel */
.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}

/* Hapus floats setelah columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}

/* Responsive layout - ketika layar kurang dari 800px lebarnya, buat dua kolom bertumpuk satu sama lain, bukan di samping satu sama lain */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {
    width: 100%;
    padding: 0;
  }
}
</style>
</head>
<body>

<div class="header">
  <h2>Blog Anime(Nama Blog)</h2>
</div>

<div class="row">
  <div class="leftcolumn">
    <div class="card">
      <h2>Spritted Away</h2>
      <h5>Rilis,20 Juli 2001</h5>
      <div class="fakeimg" ><img src="https://dosenit.com/wp-content/uploads/2021/01/SpiritedAway.jpg"  style="width:500px;" ></div><br><br><br><br>
      <p>Sinopsis</p>
      <p>Kisah seorang gadis berumur 10 tahun bernama Chihiro dan kedua orangtuanya yang masuk ke sebuah tempat yang terlihat sebagai sebuah taman hiburan yang terabaikan. Setelah kedua orangtuanya berubah menjadi babi raksasa, Chihiro bertemu dengan sosok misterius Haku yang menjelaskan kepadanya bahwa tempat mereka berada adalah sebuah resort di mana makhluk supernatural berisitrahat dari alam duniawi. Untuk dapat membebaskan kedua orangtuanya, Chihiro harus bekerja di sebuah bath house yang dikepalai oleh penyihir bernama Yubaba..</p>
    </div>
    <div class="card">
      <h2>Hello Word(Anime, Movie)</h2>
      <h5>Rilis, 7 November 2019</h5>
      <div class="fakeimg"><img src="https://dosenit.com/wp-content/uploads/2021/01/anime-hello-world.jpg"  style="width:500px;" ></div><br><br>
      <p>Sinopsis</p>
      <p>Film ini akan menjadi kisah perjalanan waktu yang ditetapkan pada tahun 2027 di Kyoto, Jepang. Dikatakan sebagai cerita bahwa "tidak ada yang pernah melihat seseorang menemukan diri mereka" meskipun dengan "adegan, pandangan, dan cahaya yang semua orang tahu.</p>
    </div>
  </div>
  </div>
  <div class="rightcolumn">
    <div class="card">
      <h2>Tentang Saya</h2>
      <div class="fakeimg" ><img src="https://dosenit.com/wp-content/uploads/2021/02/136-1369892_avatar-people-person-business-user-man-character-avatar.png" style="width:250px;"><br>
      <p>Hai Sobat, Semoga Blog ini membantu ya!</p>
    </div>
    <div class="card">
      <h3>Popular Post</h3>
      <div class="fakeimg"><img src="https://dosenit.com/wp-content/uploads/2021/01/1392485796_red-iron-man-on-black-background_facebk.jpg" style="width:300px;"></div><br>
      <div class="fakeimg"><img src="https://dosenit.com/wp-content/uploads/2021/01/Thor_soundtrack_cover.jpg" style="width:300px;"></div><br>
      <div class="fakeimg"><img src="https://dosenit.com/wp-content/uploads/2021/01/captain-amerika.jpg" style="width:300px;"></div>
    </div>
    <div class="card">
      <h3>Follow Me</h3>
      <p>yuk follow terus blog ini!</p>
    </div>
  </div>
</div>

<div class="footer">
  <h2>Footer</h2>
</div>

</body>
</html>

Cara Membuat Layout Blog

Langkah 1) Tambahkan HTML:
Contoh

<div class="header">
  <h2>Blog Anime(Nama Blog)</h2>
</div>

<div class="row">
  <div class="leftcolumn">
    <div class="card">
      <h2>Spritted Away</h2>
      <h5>Rilis,20 Juli 2001</h5>
      <div class="fakeimg" ><img src="https://dosenit.com/wp-content/uploads/2021/01/SpiritedAway.jpg"  style="width:500px;" ></div><br><br><br><br>
      <p>Sinopsis</p>
      <p>Kisah seorang gadis berumur 10 tahun bernama Chihiro dan kedua orangtuanya yang masuk ke sebuah tempat yang terlihat sebagai sebuah taman hiburan yang terabaikan. Setelah kedua orangtuanya berubah menjadi babi raksasa, Chihiro bertemu dengan sosok misterius Haku yang menjelaskan kepadanya bahwa tempat mereka berada adalah sebuah resort di mana makhluk supernatural berisitrahat dari alam duniawi. Untuk dapat membebaskan kedua orangtuanya, Chihiro harus bekerja di sebuah bath house yang dikepalai oleh penyihir bernama Yubaba..</p>
    </div>
    <div class="card">
      <h2>Hello Word(Anime, Movie)</h2>
      <h5>Rilis, 7 November 2019</h5>
      <div class="fakeimg"><img src="https://dosenit.com/wp-content/uploads/2021/01/anime-hello-world.jpg"  style="width:500px;" ></div><br><br>
      <p>Sinopsis</p>
      <p>Film ini akan menjadi kisah perjalanan waktu yang ditetapkan pada tahun 2027 di Kyoto, Jepang. Dikatakan sebagai cerita bahwa "tidak ada yang pernah melihat seseorang menemukan diri mereka" meskipun dengan "adegan, pandangan, dan cahaya yang semua orang tahu.</p>
    </div>
  </div>
  <div class="rightcolumn">
    <div class="card">
      <h2>Tentang Saya</h2>
      <div class="fakeimg" ><img src="https://dosenit.com/wp-content/uploads/2021/02/136-1369892_avatar-people-person-business-user-man-character-avatar.png" style="width:250px;"></div><br>
      <p>Hai Sobat, Semoga Blog ini membantu ya!</p><br>
    </div>
    <div class="card">
      <h3>Popular Post</h3><br><br>
      <div class="fakeimg"><img src="https://dosenit.com/wp-content/uploads/2021/01/1392485796_red-iron-man-on-black-background_facebk.jpg" style="width:300px;"></div><br>
      <div class="fakeimg"><img src="https://dosenit.com/wp-content/uploads/2021/01/Thor_soundtrack_cover.jpg" style="width:300px;"></div><br><br><br><br>
      <div class="fakeimg"><img src="https://dosenit.com/wp-content/uploads/2021/01/captain-amerika.jpg" style="width:300px;"></div>
    </div>
    <div class="card">
      <h3>Follow Me</h3>
      <p>yuk follow terus blog ini!</p>
    </div>
  </div>
</div>

<div class="footer">
  <h2>Footer</h2>
</div>

Langkah 2) Tambahkan CSS:
Contoh

body {
  font-family: Arial;
  padding: 20px;
  background: #f1f1f1;
}

/* Header/Blog Title */
.header {
  padding: 30px;
  font-size: 40px;
  text-align: center;
  background: white;
}

/* Buat dua kolom tidak sama yang mengapung di samping satu sama lain * /
/ * Kolom kiri */
.leftcolumn {
  float: left;
  width: 75%;
}

/* Column Kanan */
.rightcolumn {
  float: left;
  width: 25%;
  padding-left: 20px;
}

/* gambar yang di pakai */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

/* Tambahkan efek kartu untuk artikel */
.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}

/* Hapus floats setelah columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}

/* Responsive layout - ketika layar kurang dari 800px lebarnya, buat dua kolom bertumpuk satu sama lain, bukan di samping satu sama lain */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {
    width: 100%;
    padding: 0;
  }
}

CSS How To

Cara Membuat Layout Untuk Sebuah Blog

Cara Membuat Layout Blog

Cara Membuat Google Charts

Cara Membuat Layout ZigZag

You may also like