Membuat Tampilan 2 Kolom di Homepage

Aizzan Blog -- Hai sobat blogger, bagaimana upacaranya kemarin? semoga lancar dan penuh hikmat. Oh ya sebelumnya saya mau mengucapkan selamat hari jadi Indonesia yang ke 68 pada hari sabtu 17 Agustus 2013 kemarin, lomba apa nih yang sobat tunggu - tunggu saat agustusan seperti sekarang ini? 


Pastinya ya banyak sekali namun yang paling di tunggu - tunggu yaitu panjat pinang, balap karung, balap kelereng, makan kerupuk, dan balap bakiak.  
Nah, untuk pada kesempatan di malam ini saya akan berbagi sedikit tentang tutorial cara membuat tampilan dua kolom di homepage, dimana yang semula postingan di homepage hanya ada satu kolom sekarang bisa menjadi dua kolom postingan di homepage blog sobat. Untuk demonya sudah saya terapkan pada blog ini bisa langsung cek di beranda dan di bawah ini adalah screenshotnya

Membuat tampilan 2 kolom di homepage
Klik pada gambar untuk memperbesar
Langsung saja sobat mengikuti tahap - tahap di bawah ini untuk membuat tampilan 2 kolom di homepage
1. Login ke blogger sobat
2. Masuk ke "Template"
3. Backup data dulu sebelum lanjut untuk "Edit HTML"
4. Masuk ke "Edit HTML"
5. Cari kode ]]></b:skin>, lebih cepat tekan Ctrl+F (F3)
6. Masukan kode di bawah ini tepat di bawah kode ]]></b:skin>
    <style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
#main-wrapper {width:650px;padding-left:5px;padding-right:5px;border-right:1px solid #ddd;}
h2.date-header, .jump-link, .feed-links, .post-footer {display:none;}
#blog-pager {width:98%; clear:both;}
.post {margin:.01em 10px 10px 0;background:none;width:250px;height:200px;float:left; border-bottom:3px double #ddd; positon:relative;overflow:hidden;}
.post-body {margin:0.2em 0 .75em;line-height:1.4em;font-size:13px;color:#111;overflow:hidden;}
.post h3 {height:32px;font-size:15px;font-weight:bold;line-height:1.3em;color:#102D57;text-transform:none;font-family:Arial;}
.post h3 a, .post h3 a:visited, .post h3 strong {font-weight:bold;color:#102D57;}
.post h3 strong, .post h3 a:hover {color:#000;text-decoration:underline;}
</b:if>
</style>
7. Setelah itu simpan dan lihat hasilnya

Semoga artikel di atas dapat membantu dan bermanfaat buat sobat, jika ada kritik maupun saran bisa sobat sampaikan melalui kolom komentar di bawah ini dan bisa juga melalui form Contact Me.
Previous
Next Post »
20 Komentar
avatar

wah ternyata simple juga yah kodenya tidak terlalu rumit buat bikin homepage 2 kolom

Balas
avatar

Iya sob, yang saya pake cuma ini doang buat bikin homepage 2 kolom di blog :)) semoga bermanfaat :)

Balas
avatar

Gampang juga ya sob, gak usah susah lagi belajar html.

Balas
avatar

terima kasih dengan informasi ini...sangat berguna...code nya boleh saya apply dalam blog saya :)

Balas
avatar

informasi yang sangat berguna. terima kasih kerana share, saya boleh gunakan code ini di blog saya yang lain. have a nice day :)

Balas
avatar

iya nih sob, kagak perlu susah" buat belajar :)

Balas
avatar

Silahkan sob jika itu bermanfaat buat sobat dan terimakasih sudah support :)

Balas
avatar

Silahkan sob jika itu bermanfaat buat sobat dan terimakasih sudah support :)

Balas
avatar

Terimakasih sob atas supportnya :))
semoga dapat bermanfaat dan berguna :)

Balas
avatar

wah boleh nih tipsnya.. jadi 2 kolom tambah meriah ya mas..

Balas
avatar

iya nih sob tambah banyak juga yang di tampilkan :)

Balas
avatar

Miep miep...Hello... with a smile from Brugge my friend

Balas
avatar

Thank you for visiting my blog :)

Balas
avatar

Terimakasih atas support dan kunjungannya om :))

Balas
avatar

Makasih sob, semoga dapat membantu dan bermanfaat :)

Balas
avatar

Salam kenal, maaf sebelumnya, saya ingin mengembalikan tampilan blog menjadi 1 kolom, bagaimana ya cara mengembalikannya ?..mohon pencerahanya..

Balas
avatar

tinggal delete kode diatas aja gan.

Balas

Tinggalkan komentar anda dibawah ini dengan tata cara sebagai berikut :

1. Jangan OOT (Out Of Topic)
2. Menggunakan bahasa yang sopan dan sesuai
3. Jangan mencantumkan livelink di kolom komentar
4. Masukkan link pada tempatnya
5. Jangan SPAM