Membuat Posting Blogger Menjadi 2 Kolom Responsive

Sebelumnaya blog saya mengalami troubel, sehingga membuat saya untuk mengalihkan akun blogger dengan akun blogger yang baru, sebab setelah saya mengotak-atik bagian HTML blogger pada data:post.body menjadi kacau dan berantakan. Meskiun template saya sudah ganti dengan difault, namun hasilnya masih sama, berantakan.

Bagian data:post.body saya menjadikannya 2 kolom, sebab menurut saya untuk template saya sedang pakai ini agak terlalu boros memanjang, sehingga saya menjadikannya 2 kolom.

Sebelumnya saya menggunakan cara yang saya temukan di google (browsing), namun menurut saya masih kurang sempurna, sebab pada tag kondisional tidak sempuna, bagian halaman static masih mengikuti lebar dari posting 2 kolom.

Saya sempurnakan menjadi seperti ini dengan tambahan responsifnya, berikut ini kode CSSnya dengan tag kondisionalnya:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style>
@media screen and (max-width:1920px){
.post {width:50%;height:230px;padding:5px;overflow:hidden;float:left;}
  }
@media screen and (max-width:1024px){
.post {height:260px;}
  }
@media screen and (max-width:610px){
.post {width:100%;height:200px;}
  }
@media screen and (max-width:414px){
.post {width:100%;height:250px;}
.post-title {font-size:18px;}
  }
</style>
</b:if> 
</b:if>

Kemudian,...

Bagaimana caranya memposisikan bagian seperti diatas? sebelumnya pasti di bagian samping postingan kan...

Tambahkan kode HTML berikut,

<div style='clear: both;'/>

diatas kode HTML

<b:include name='nextprev'/>

Sehingga menjadi seperti ini :

<div style='clear: both;'/>
<b:include name='nextprev'/> 

Untuk mempermudah gunakan CTRL+F untuk mencari kode tersebut.

Newer Post Older Post