Cara Membuat Posting Dua Kolom Di Homepage Blog

Tutorial Belajar Blog - Cara Membuat Posting Dua Kolom Di Homepage Blog adalah judul posting yang akan kita bahas kali ini, Tutorial ini sebelumnya inspirasi dari template mas sugeng dan template yang saya gunakan ini.

Sesuai dengan judul postingan Cara Membuat Posting Dua Kolom Di Homepage Blog kenapa banyak blogger ingin mempunyai tampilan sesimple mungkin ataupun semenarik, banyak juga yang membuat tampilan homepage ( Halaman Utama ) Blog yang biasanya satu kolom di homepage menjadi dua ( 2 ) kolom .

Berikut gambar dari  hasil cara membuat posting dua kolom homepage blogspot yang telah saya buat di blog uji coba pada template yang akan saya share setelah postingan ini.

Before ( Sebelum )

After ( Sesudah )

Berikut Cara Membuat Posting Dua Kolom Di Homepage Blog

1. Masuk ke akun blogger anda
2. Klik menu Template >> Edit Html >> tekan Ctrl+F pada keyboard anda
3. Cari Kode ]]></b:skin>
4. Letakkan kode berikut dibawah kode ]]></b:skin>
   

   <b:if cond='data:blog.pageType != &quot;item&quot;'>
   <style>
   .post {width:250px;height:200px;margin:0 20px 5px 0;overflow:hidden;float:left;}
   </style>
   </b:if>

   
   Catatan 1 :
   
   • Jika anda ingin menambahkan background cukup memasang kodenya saja seperti berikut ini
     

     .post {background:#00000;width:250px;height:200px;margin:0 20px 5px 0;overflow:hidden;float:left;}

   • Atur lebar dan tinggi postingan
     

     width:250px;height:200px;

   • Atur jarak antar postingan
     

     margin:0 20px 5px 0;

   
   Catatan 2 :
   Jika di blog anda terdapat Readmore, atur juga jumlah kata, lebar dan tinggi gambar yang terdapat didalam kode Readmore tersebut
   Contoh:
   

   <script type='text/javascript'>
   var thumbnail_mode = "float" ;
   summary_noimg = 250; ← perkecil angka ini
   summary_img = 250; ← perkecil angka ini
   img_thumb_height = 200; ← perkecil angka ini
   img_thumb_width = 200; ← perkecil angka ini
   </script>
   <script type='text/javascript'>
   .............
   </script>

5. Selanjutnya cari kode .post {
   Pasang auto diantara kode jarak dalam .post {
   Sebelum
   

   .post {margin:0.5em 0 1.5em;}

   Sesudah
   

   .post {margin:0.5em auto 0 1.5em;}

   
   
   Penambahan auto ini sebenarnya hanya tambahan saja agar jarak antar artikel sesuai. Bisa anda tambahkan, bisa juga tidak, namun untuk mengetahuinya apakah perlu menambahkan auto, silahkan preview blog terlebih dahulu dan bandingankan hasilnya antara ada dan tidak adanya auto
   
   
6. Setelah selesai. Preview blog anda terlebih dahulu dan lihat hasilnya. Jika hasilnya seperti gambar berikut ini, dimana link Posting Lama terlihat seperti gambar berikut ini
   
   
   
   Pada gambar diatas, link Posting Lama atau sejenisnya berada sejajar dengan artikel blog dan untuk mengembalikan ke posisi sebenarnya yaitu berada di bawah kanan, silahkan cari kode <b:include name='nextprev'/> dan tambahkan kode <div style='clear: both;'/> tepat diatas <b:include name='nextprev'/>
   Hasilnya:
   <div style='clear: both;'/>
   <b:include name='nextprev'/>
7. Preview lagi blog anda
8. Selamat! Halaman depan atau homepage blog anda sudah berubah menjadi dua kolom posting

Demikian Tutorial Tentang Bagaimana membuat dua kolom post di halaman utama blog ini, Semoga Dapat membantu teman - teman blogger semua 

Referensi  : Mbah Google , PanduanTemplateblog , Oktri Darmadi