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 ikla
n
.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