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