ioCerita: Tutorial Dasar 6 Tata Letak

Tutorial Dasar 6 Tata Letak

Selamat pagi dan apa kabar, sahabat blogger? Saya harap kamu tetap dalam keadaan sehat. Artikel ini akan menjadi yang terakhir dari semua tutorial dan langkah awal untuk kita semua. Berbaring di sofa temukan posisi yang paling nyaman untuk bersantai, ambil segelas kopi, dan mainkan musik. Lalu let's Go! Ayo kita belajar!

Tata Letak

Permulaan dari segalanya adalah penyusunan tata letak. Pada kali ini kita akan menyusun peletakkan komponen blog kita. Kita hanya akan menggunakan 4 komponen yaitu menu, blogpost, sidebar, dan footer.

Dalam project kali ini kita akan menggunakan framework boostrap. Kamu bisa membaca dokumentasi boostrap di sini.

Langkah awal, copy code ini lalu select all semua code yang ada di blogger editor kemudian paste.


<html>
<head>
<title>Title of Blog</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<b:skin>
<![CDATA[
/****CSS CODE*****/
]]>
</b:skin>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

Setelah itu, copy code ini setelah tag pembuka body lebih tepatnya dibawah tag <body>


<div class="container">
 <div class="menu space"></div>
 <div class="space d-flex flex-row justify-content-between wrap">
 <div class="blogpost"></div>
 <div class="sidebar"></div>
 </div>
 <div class="footer space"></div>
 </div>

Masukkan CSS ini ke dalam blogger kalian.


.menu {
  background: tomato;
  margin-top: 0!important;
}

.space {
  padding: 15px;
  margin: 15px;
}

.rl-nospace {
  margin-left: 0;
  margin-right: 0;
}

.sidebar {
  float: right;
  width: 30%;
  background-color: gray;
}

.blogpost {
  width: 65%;
  height: 500px;
  background-color: blue;
}

.wrap {
  padding-left: 0;
  padding-right: 0;
}

.footer.space {
  margin-bottom: 0!important;
  background-color: mediumseagreen;
}

Sudah? Step terakhir kamu bisa menambahkan section sidebar di div sidebar.


<b:section class='sidebar' id='sidebar' preferred='yes' showaddelement='yes'></b:section>

Simpan dan liat website mu sekarang. Hasil akhirnya akan seperti ini.

Uwa ... tata letak sudah selesai. Next step kita akan mendesain menu.

Saya sudahi dulu tutorial kali ini. Jika ada pertanyaan silahkan sampaikan unek - unekmu di komentar. Kalau ada kata - kata yang menyinggung perasaanmu aku minta maaf.

Terima kasih dan sampai jumpa lagi.

Semangat belajar! Have fun day! Ganbantte Minna!!