Blog Pribadi tempat Berbagi Ilmu dan Pengalaman

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.

Membuat Posting Blogger Menjadi 2 Kolom Responsive


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.

No comments:

Post a Comment