Bisakah membuat dua kolom yang dapat diisi dengan konten pada blog? Kolom yang mirip dengan aplikasi MS.word pada MS.Office. Tentu saja bisa cara pembuatannya juga tidak sulit, tujuan dari artikel ini tidak lain adalah untuk berlatih kode CSS pada halaman web.
Gambar diatas adalah tangkapan layar demo halaman w3school tempat kami mencobakan trik ini. Dengan kode css kita dapat memanipulasi tampilan halaman kita yang berisi konten menjadi bentuk dan fungsi yang kita kehendaki. Contoh sederhana ini juga berguna sebagai alat melatih pemahaman kita terhadap css apalagi sebagai pemula.
Jangan lupa klik Run terlebih dahulu agar kolom sebelah kanan menampilkan demo daripada hasilnya. Melalui alat w3school sobat bisa mengedit kode kode yang sudah ada dan menyesuaikannya dengan kebutuhan desain sobat sendiri.
Adapun kode css yang saya buat adalah sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 10px;
height: 500px; /* Should be removed. Only for demonstration */
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<h2>Dua kolom berdampingan</h2>
<div class="row">
<div class="column" style="background-color:#F0F8FF;">
<h2>Singularity 1</h2>
<p>Kebanyakan manusia memandang kematian sebagai takdir yang tidak dapat dimungkiri, tidak dapat diatasi dan tidak dapat dihindari. Tetapi para ilmuwan, dan orang orang yang menguasai teknologi mempertanyakannya. Bagaimana jika kematian itu hanyalah sebuah peristiwa yang sesungguhnya dapat kita atasi? Mengapa kita tidak menggunakan segala sumberdaya untuk mengatasinya?..</p>
</div>
<div class="column" style="background-color:#FFF0F5;">
<h2>Singularity 2</h2>
<p>Kebanyakan manusia memandang kematian sebagai takdir yang tidak dapat dimungkiri, tidak dapat diatasi dan tidak dapat dihindari. Tetapi para ilmuwan, dan orang orang yang menguasai teknologi mempertanyakannya. Bagaimana jika kematian itu hanyalah sebuah peristiwa yang sesungguhnya dapat kita atasi? Mengapa kita tidak menggunakan segala sumberdaya untuk mengatasinya?..</p>
</div>
</div>
</body>
</html>
Sobat bisa menerapkan percobaannya dengan meletakan kode tersebut pada opsi "postinban baru" lalu pilih HTML. Save dan lihat hasilnya.
www.editblogtema.net
 |
| Gambar kode css berikut hasil pembuatan dua kolomnya. |
Jangan lupa klik Run terlebih dahulu agar kolom sebelah kanan menampilkan demo daripada hasilnya. Melalui alat w3school sobat bisa mengedit kode kode yang sudah ada dan menyesuaikannya dengan kebutuhan desain sobat sendiri.
Untuk lebih jelasnya lihat DEMO
Adapun kode css yang saya buat adalah sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 10px;
height: 500px; /* Should be removed. Only for demonstration */
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<h2>Dua kolom berdampingan</h2>
<div class="row">
<div class="column" style="background-color:#F0F8FF;">
<h2>Singularity 1</h2>
<p>Kebanyakan manusia memandang kematian sebagai takdir yang tidak dapat dimungkiri, tidak dapat diatasi dan tidak dapat dihindari. Tetapi para ilmuwan, dan orang orang yang menguasai teknologi mempertanyakannya. Bagaimana jika kematian itu hanyalah sebuah peristiwa yang sesungguhnya dapat kita atasi? Mengapa kita tidak menggunakan segala sumberdaya untuk mengatasinya?..</p>
</div>
<div class="column" style="background-color:#FFF0F5;">
<h2>Singularity 2</h2>
<p>Kebanyakan manusia memandang kematian sebagai takdir yang tidak dapat dimungkiri, tidak dapat diatasi dan tidak dapat dihindari. Tetapi para ilmuwan, dan orang orang yang menguasai teknologi mempertanyakannya. Bagaimana jika kematian itu hanyalah sebuah peristiwa yang sesungguhnya dapat kita atasi? Mengapa kita tidak menggunakan segala sumberdaya untuk mengatasinya?..</p>
</div>
</div>
</body>
</html>
www.editblogtema.net