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

52   komentar

Yang kayak gini nih Mas, yang saya cari-cari :D
Reply Delete
banyak ko gan ..search di google...tinggal pilih2 kayak di dipasar,heheheh *bang*
Reply Delete
keren gan.. nice artikel :)

kunjungan pertama nih..

salam http://nandarious.blogspot.com/
Reply Delete
thx infonya
berguna banget nie.. bg saya yg baru terjun di blogger..
Reply Delete
Anonim mengatakan... 16 September 2013 pukul 06.59
Saya nyari gini abis ng tau namanya yg bner ny apa makasih sob

kunjungan balik
Reply Delete
@all thanks dah berkomentar.... semoga bermanfaat gan
Reply Delete
mas, saya mau nnya kalau utk di WP gmna yak
Reply Delete
Anonim mengatakan... 3 Oktober 2013 pukul 10.44
terimakasih atas tutorial membuat posting dua kolom ini,,
sangat bermanfaat gan....
Reply Delete
Anonim mengatakan... 26 Oktober 2013 pukul 03.57
Tutorialnya bisa dipakai ini untuk beberapa template yang mau diedit.
Reply Delete
Anonim mengatakan... 21 November 2013 pukul 01.51
masih perlu Banyak belajar nih gan
Reply Delete
Anonim mengatakan... 28 November 2013 pukul 06.26
thanks tutornya di atas sob, akan saya modifikasi lg jika ada waktu hehe
-keep blogging-
Reply Delete
kalo naronya bukan di homepage gimana ...? misalnya di menu yang lain
Reply Delete
Anonim mengatakan... 26 Desember 2013 pukul 03.40
tutornya eemank tokcer gan
iijin coba yh
Reply Delete
thanks bang, sangat berguna nih ;) salam dari rici
Reply Delete
saya baru belajar nge blog dan artikelnya sangat membantu terima kasih dan mungkin kalau berkenan silahkan mampir. http://deasin-rumah-minimalis.blogspot.com/
Reply Delete
sebelumnya thanks gan berhasil di blog saya, tpi masalah nya page static nya jadi ancur, gimana solusinya?? contoh page static saya -> http://mbah-siyam.blogspot.com/p/link-exchange-mbah-siyam.html

mbah-siyam.blogspot.com
Reply Delete
http://karyacoretpena.blogspot.com/
thanks.
Reply Delete
Thanks Bro
Izin Copas Ya Bro ^.^
Reply Delete
template preview itu namanya apa gan??? bsa diposting ga??
Reply Delete
Simple ya Mas. Tapi mungkin yang agak lama menyesuaikan tinggi sama lebarnya itu biar dapat ukuran yang fix. hehe
Reply Delete
terima kasih atas info nya gan,sangat membantu
http://www.duniagame.info/
Reply Delete
wah bermanfaat banget ni mas kalau boleh tambahin lagi dong mas untuk buat 3 kolom atau 4 kolom karena ane berencana mau buat blog gambar seperti ini http:/www.galleryphotoonline.blogspot.com
Reply Delete
Komentar ini telah dihapus oleh pengarang.
Delete
gan ko tulisan berandanya malah ada disamping juga ya gan..?
solusi gan..
Reply Delete
Anonim mengatakan... 3 Juli 2014 pukul 06.31
nanti di coba deh bos...
Reply Delete
Komentar ini telah dihapus oleh pengarang.
Delete
kalo cara itu dibuat di pagesnya saja bisa ?
Reply Delete
Mau mendapatkan backlink berkualitas, disini tempatnya

http://goo.gl/WkNCTQ
Reply Delete
Kalau cara buat postingan biar kayak tamplate galerry gimana
Reply Delete
makasih infonya gan...
www.onestopre.blogspot.com
Reply Delete
berhasil tengs mas. klaw ada waktu silahkan kunjungi blog saya : fauzanpostal.blogspot.com
Reply Delete
Penjelasannya bagus dan detail menyertakan berbagai sumber yang terpercaya

Info untuk menghasilkan uang (memonetize) dari blog, website dan bisnis online bisa belajar dengan mengklik link di bawah ini

http://www.asianbrain.com/letter.html/903484
Reply Delete
makasih infonya.
mampir-mampir sini gan : http://www.workattacks.com/
Reply Delete
ini yang saya cari - cari baru nemu juga akhirnya
Reply Delete
Terima kasih Sekali gan,,, silahkan kunjung balik http://sonihendriawan.blogspot.com
Reply Delete
snippet/ringkasan di halaman utamanya ga nampak lagi sob
Reply Delete
Gan, setelah saya aplikasikan, postingnya cuma muncul di sebelah kiri. setelah saya lebarkan tetap ngumpul di bagian kiri.. gimana caranya agar bisa di kanan dan kiri? bisa dilihat disini (uji coba) sialannnn.blogspot.com
Reply Delete

thanks a lot for the info,, permit try yaa .... http://goo.gl/ajW73o
Reply Delete
kenapa artikelnya jadi ga bisa di klik
Reply Delete
kenapa artikelnya jadi ga bisa di klik
Reply Delete
Ni info gan http://alfianrizqqi.blogspot.com
Reply Delete
terima kasih.

http://edukatif-online.blogspot.com
Reply Delete
Thx artikel ny bg..
Salam hangat buara para blogger disini..
Jasa-website-medan.blogspot.com
Reply Delete
pecinta musik jandhut
http://joget-musika.blogspot.in/
Reply Delete
klo diliat versi mobile apa gk rusak?
Reply Delete
http://tryandhika-master-admin-trykoen-2.blogspot.co.id/
Reply Delete
http://tryandhika-master-admin-trykoen-2.blogspot.co.id/
Reply Delete
Komentar ini telah dihapus oleh pengarang.
Delete
Tampilan Posting dihalaman depan memang berubah jadi 2 kolom. Tapi efek nya tampilan halaman mandiri malah jd ikut berubah juga sama seukuran tampilan post yg di rubah... ????? sempet gw coba tuh..
Reply Delete

Posting Komentar

Cancel Reply