Kode Dua Kolom Responsive di Atas Posting Halaman Depan

Baca Juga

Kode Dua Kolom Responsive di Atas Posting Halaman Depan. Demonya bisa dilihat di Halaman Depan Blog Ini.

Jika Anda ingin memasangnya di blog Anda, berikut ini kodenya:

Kode CSS:

.KolomKiri,.KolomKanan { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;} .DuaKolom {position:relative;margin:.5em;} .KolomKiri, .KolomKanan {border:1px solid #ccc;padding:1.25em;width:49%;background:#f1f1f1} .KolomKiri {margin-bottom:.5em;} @media screen and (min-width: 47.5em){ .KolomKiri {margin-right: 19.5em;} .KolomKanan {position:absolute;top:0;right:0;width:18.75em;width:49%;}}@media screen and (max-width:800px) {.KolomKiri, .KolomKanan {width: 100%;}}

Kode HTML:

<div class="DuaKolom">
<div class="KolomKiri">
<h2>Kolom Kiri</h2>
</div>
<div class="KolomKanan">
<h2>Kolom Kanan</h2>
</div> </div>

Kode HTML dan TEKS-nya bisa dijadikan begini:

<div class="DuaKolom">
<div class="KolomKiri" style="border:none;">
<h4>Apa Itu HTML?</h4>
<p>Hyper Text Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII.</p>
</div>
<div class="KolomKanan" style="border:none;">
<h4>Apa Itu CSS?</h4>
<p>Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, dll.</p>
</div> </div>
<br/>