Halo !!! Saya Kang Ismet, ini adalah blog tentang AMP HTML dan cara penerapannya

Cara Membuat Postingan 2 Kolom di Homepage

Cara Membuat Postingan 2 Kolom di Homepage | Jika kemarin saya sudah posting mengenai Cara Membuat Posting Top Komentator di Blog | Kali ini saya akan posting mengenai Cara Membuat Postingan 2 Kolom di Homepage | Apa maksudnya,,? Untuk lebih jelas sobat bisa perhatikan gambar berikut ini...!!

 Postingan 2 Kolom di Homepage
 Postingan 2 Kolom di Homepage
Sudah tau apa maksudnya. Sekarang kita kembali ke Cara Membuat Postingan 2 Kolom di Homepage Bagaimana setalah sobat telah melihat gambar di atas sobat sudah taukan maksudnya Membuat Postingan 2 Kolom di Homepage  sekarang apakah sobat ingin membuatnya..? Marilah simak tutorial berikut ini..!!!



  • Login Ke Blogger
  • Pergi ke Template >> Edit HTML
  • Setelah itu sobat cari kode ]]></b:skin> Untuk mempermudah sobat bisa gunakan F3 atau Ctrl+F
  • Letakan kode di bawah ini tepat di bawah kode ]]></b:skin>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
#main-wrapper {width:620px;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:300px;height:265px;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;}
.post h2{font-size:13px;font-weight:bold;line-height:1.3em;color:#000;text-transform:none;padding-bottom:5px}
.post h2 a,.post h2 a:visited,.post h2 strong{color:#000}
.post h2 strong,.post h2 a:hover{color:#444;text-decoration:underline}
</style>
</b:if>
Keterangan dari kode di atas :

#main-wrapper {width:620px; : Cocokan dengan #main-wrapper di template blog sobat
width:300px;                            : 300px adalah lebar dari setiap posting yg akan di tampilkan
height:265px;                           : 265px adalah tinggi dari setiap posting yg akan di tampilkan

Cocokan kode kode ditas denagn template blog sobat masing-masing
  • Klik Preview terlabih dahuluSetelah sudah cocok klik simpan

25 komentar:

  1. follback gan
    dan beri komentar blog saya

    BalasHapus
  2. keren, langsung berhasil di blog saya..

    BalasHapus
  3. wah artikelnya bagus gan.
    kunjungi juga ya gan blog ILMU 212

    BalasHapus
  4. wow gampang juga ya.. makasih sob infonya...

    BalasHapus
  5. ternkasih sob,,tapi di blog saya ngak bisa di bagi jadi 2 sob,,tetap satu aja jadinya sob,,kalau kolomya ada sob,,tapi hanya 1,,

    BalasHapus
  6. valid di semua template gak tuh sob

    BalasHapus
  7. wah saya juga pasang postingan 2 kolom lho gan.
    cek aja di blog saya...

    Minta G+ back nya :D

    BalasHapus
  8. met mlm mas wah ini mantap mas postingannya. ngomong2 stiap postingan slalu ada aq heheheh sip mas bro mantap genk postingannya. aq rekws mas 4 kolom mas

    BalasHapus
  9. Mantap Artikelnya Gan....


    www.windows404.blogspot.com

    BalasHapus
  10. Ijin, nulis yahh.. tapi gk copy-paste dehh.... pastii

    BalasHapus
  11. Mantap mas bro.. :D
    Artikelnya nanti saya coba..

    BalasHapus
  12. wah klo di blog saya jadi aneh gan -_-

    BalasHapus
  13. Terima kasih informasinya sangat berguna sekali.

    BalasHapus
  14. waduh di blog ane belom berhasil

    BalasHapus
  15. Buat nara blog, kl boleh memberi masukan....

    Bukannya tag conditional seharusnya berada di atas style CSS...?

    Ma'af kl salah.....

    BalasHapus
  16. , wah , di blog saya gak berhasil sobat.

    BalasHapus
  17. ini yang aku dulu tanyakan... xixixi

    BalasHapus
  18. mantep gan , izin praktek dulu :D

    BalasHapus