Cara Membuat Artikel Postingan Menjadi Dua Kolom di Blogger

Description: Cara Membuat Auto Read More Depan Dua Kolom Responsive di Homepage. Pure CSS tanpa JavaScript sehingga Fast Loading
Tampilan halaman depan blog, terutama template bawaan blogger, umumnya satu kolom. Kita bisa mengubahnya menjadi dua kolom agar lebih banyak postingan blog yang dapat di lihat atau di sajikan di halaman depan.

Bagi yang blognya belum menggunakan auto readmore, yaitu tempilan posting berupa judul tulisan, gambar thumbnail, dan cuplikan isi tulisan (snippet/ringkasan/summary), ada dua tahap untuk membuatnya.

1. Membuat Auto Readmore terlebih dahulu.
2. Menjadikannya dua kolom.

Membuat Auto Readmore #1

1. Template > Edit HTML
2. Pasang kode CSS Image Thumbnail berikut ini di atas kode ]]></b:skin>

.thumbnail-post { width:100px; height:100px; float:left; margin:0px 10px 0px 0px; }

3. Ganti kode <data:post.body/> yang kedua atau ke tiga dengan kode HTML/XML Auto Readmore berikut ini:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:post.firstImageUrl'> <a expr:href='data:post.url'><img class='thumbnail-post' expr:title='data:post.title' expr:src='data:post.firstImageUrl'/></a> <b:else/> <a expr:href='data:post.url'><img class='thumbnail-post' expr:title='data:post.title' src='http://1.bp.blogspot.com/-XeZs003zT-4/UwM1mfc9l3I/AAAAAAAAAlw/TNTcFCMPH4A/s1600/no-image-thumbnail.jpg'/></a> </b:if> <div class='post-snippet'> <data:post.snippet/> </div> <div class='rm-button-wrap'> <a class='button' expr:href='data:post.url'>Baca Selengkapnya</a> </div> </b:if> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <data:post.body/> </b:if> <b:if cond='data:blog.pageType == &quot;static_page&quot;'> <data:post.body/> </b:if>

4. Save Template

Menjadikan Dua Kolom #2

1. Simpan kode berikut ini di atas kode </head>

<!-- Two Col Start -->

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<style type='text/css'>

.post-outer {

  width:50%;

  height:auto;

  float:left;

}

.post {

    background: #fff;

    margin: 5px;

    padding: 0;

    height: auto;

    min-height: 120px;

    border: none;

    line-height: normal;

    font-size: small;

}

.post h2 {

    margin: 0 0 5px;

    border: none;

    font-size: 13px;

    font-family: Tahoma;

    font-weight: 700;

}

.post-thumbnail img {

    float: left;

    margin: 0 10px 12px 0;

    background: #fff;

    width: 85px;

    height: 85px;

    padding: 0;

    border: none;

    box-shadow: none;

}

@media screen and (max-width:885px){

.post-outer{margin:5px 5px 0 0;}

}

@media screen and (max-width:800px){

.post-outer {width:100% !important;float: none !important;margin-top:5px;}

.post h2 {font-size:17px;}

}

@media screen and (max-width: 768px){

.post h2 {font-size:15px;}

}

@media screen and (max-width:600px){

.post h2 {font-size:17px;}

}

@media screen and (max-width:500px){

.post h2 {font-size:14px;}

}



#blog-pager,.date-header {clear:both !important;}

</style>

</b:if>

</b:if>

<!-- Two Col End -->

2. Edit ukuran lebar (width) dan tinggi (hight) sesuai dengan lebar area blog post template yang anda gunakan.
3. Save Template

Demikian Membuat Auto Readmore Halaman Depan Dua Kolom Responsive. Jika mengalami error atau yang lain nya, coba anda baca lagi tutorial nya di atas dengan teliti. Terima kasih telah berkunjung ke blog saya, silahkan Like dan Share FP kami untuk berkembangnya blog kami ^_^.