Membuat Dua Kolom Responsive di Bawah Posting Blog

Baca Juga

Cara Membuat Dua Kolom Responsive di Bawah Posting Blog untuk Related Posts dan Iklan.

CARA membuat dua kolom responsive (mobile friendly) di bawah postingan blog --untuk Related Posts berdampingan dengan Iklan atau dua-duanya buat iklan.

Contohnya seperti di bawah postingan blog ini, berisi Posting Terkait dan Iklan Google (Adsense). Cara membuatnya sangat mudah, tinggal memasukkan kode CSS dan HTML, tanpa JavaScript, berikut ini:

Kode CSS
Simpan di Atas Kode ]]</b:skin>

.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;} .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;}}

Kode HTML
Simpan di bawah atas kode "Social Share" atau di bawah <data:post.body/>

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

Sumber