Membuat Dua Kolom Responsive di Bawah Posting Blog

Komunikasi Praktis
Dua Kolom Responsive di Bawah Posting Blog
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 

Discover more from Komunikasi Praktis

Subscribe now to keep reading and get access to the full archive.

Continue reading