Cara Membuat Dua Kolom Posting Di Homepage Blog

Cara Membuat Dua Kolom Posting Di Homepage Blog

Cara Membuat Dua Kolom Posting Di Homepage Blog. Sesuai dengan judul postingan Cara Membuat Dua Kolom Posting Di Homepage Blog. Berikut ... 22.43.00

Cara Membuat Dua Kolom Posting Di Homepage Blog. Sesuai dengan judul postingan Cara Membuat Dua Kolom Posting Di Homepage Blog.
Berikut Cara Membuat Posting Dua Kolom Di Homepage Blog

Masuk ke akun blogger anda
Klik menu Template >> Edit Html >> tekan Ctrl+F pada keyboard anda
  



Cari Kode ]]></b:skin>
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>

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. Setelah selesai. Preview blog anda terlebih dahulu dan lihat hasilnya.

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'/>

Preview lagi blog anda

[source]