Tuesday, 26 February 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.

KATEGORI:
arrow_back
arrow_forward

19 komentar

keren nih 2 kolom.. :D

come back..

wah thanks gan izin sedot yaa :D

This comment has been removed by the author.

Hahahaha...hampir sama caraku biasanya,kalau mau buat 2 colum gini,Cuma beda di tag kondisionalnya,dan cssnya :)

owh, begitu ya, makasih udah berkunjung

mohon kliknya ya dan mohon untuk diisi!!!:
nama, email, dan jawab 5 pertanyaan dengan memilih salah satu jawaban yang telah disediakan,,, link ini hanya untuk survei kepada pengguna internet..silahkan klik:
http://www.idsurvei.com/survei/SudarFlare
atas bantuan dan partisipasinya saya ucapkan terima kasih.. Salam buat semuanya..!!!

wih, banyak banget komentar nya :D

kalau takut salah edit, backup aja dulu templatenya

iya, betul
makasih udah berkomentar

kq kode nya gak ada saya cari mas yg script type='text/javascript < yg ini sama ini]]>

saya lihat blog yang km share di g+ sudah 2 kolom
saran saya sih dari pada edit 2 kolom sendiri, lebih baik cari aja template yang sudah 2 kolom
karena, kode setiap template sedikit berbeda

mas mksdnya tambah auto itu gmn ya? tlong jawab :)

maksudnya pada css yang ".post { margin:0.5em auto 0 0.4em;..."

Berkomentarlah dengan baik dan benar, dilarang SPAM!
Tata Tertib Berkomentar
EmoticonEmoticon