Navbar

Global Var

Senin, 25 Februari 2013

Cara Membuat Dua Kolom Postingan Di Beranda Blog

Cara Membuat Dua Kolom Postingan Di Beranda Blog. Pada artikel Jona Rendra ini, saya akan memberikan sebuah cara mengedit blog dengan membuat dua kolom postingan di beranda. Di buat 2 kolom supaya terlihat lebih elegan dan hemat tempat. Box box pada post di home page ini akan memberi kesan blog anda lebih profesional. Itu menurut saya. Coba saja lihat gambar dibawah ini yang sudah menerapkan Cara Membuat Dua Kolom Postingan Di Beranda Blog.

Cara Membuat Dua Kolom Postingan Di Beranda Blog

Gambar diatas adalah screenshot dari homepage blog Jona Rendra. Anda juga ingin membuat postingan anda dua kolom? Ikuti langkah langkah berikut ini.

Cara Membuat Dua Kolom Postingan Di Beranda Blog

1. Login ke akun blogger anda
2. Masuk ke template > edit HMTL > Lanjutkan > centang expand template widget
3. Cari kode ]]></b:skin>, kemudian paste kode berikut ini dibawahnya
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
.post {width:250px;height:400px;margin:0 20px 5px 0;overflow:hidden;float:left;}
</style>
</b:if>
4. Cari lagi kode <script type='text/javascript'> yang mirip seperti kode dibawah ini:
<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 200;
summary_img = 200;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
5. Mungkin ada sedikit perbedaan pada angka diatas dengan HTML di template blog anda. Jika angkanya lebih besar daripada angka diatas, misalkan 300, 300, 250 dan 250, ganti dengan angka yang lebih kecil agar sesuai dengan lebar postingan pada setiap kolomnya. 

Jika tidak disusutkan, readmore otomatis tersebut akan terpotong. Tetapi jika anda tidak menggunakan readmore otomatis, tida perlu melakukan langkah Keempat
6. Cari kode .post lihat rangkaian kode dibawahnya yang mirip seperti ini :
.post { margin:0.5em 0 0.4em; padding-bottom:0.4em;font:13px Verdana, Arial, sans-serif; }
ganti menjadi :
.post { margin:0.5em auto 0 0.4em; padding-bottom:0.4em;font:13px Verdana, Arial, sans-serif; }
dengan menambahkan auto
Langkah tersebut berguna untuk mengatur jarak setiap postingan
7. Klik simpan template
Catatan:

  • Kode HTML pada setiap template berbeda beda. Jika sudah begitu, langkahnya biasanya pasti berbeda pula. Agar cara ini dapat berhasil, anda harus menyesuaikan kode kode pada template anda.

Bagaimana? apakah anda sudah berhasil membuat postingan anda menjadi dua kolom di halaman beranda blog? Sekian dulu postingan saya yang berjudul Cara Membuat Dua Kolom Postingan Di Beranda Blog, semoga bermanfaat untuk anda dan karena ini edit HTML, pasti banyak sekali ketidaksesuaiannya maka dari itu silahkan poskan komentar untuk bertanya.

0 komentar:

Comments Utility