Kamis, 07 Februari 2013

Cara Membuat Dua Kolom Posting Homepage Blogspot

Cara Membuat Dua Kolom Posting Homepage Blogspot ini merupakan artikel request dari mas Ibnu Syamsun dalam komentarnya disini oke mbak ane sukses menerapkan di blog ane makasih tutorialnya sangat jelas. request "membuat posting 2 kolom di hompage dong" :) Untuk membuat dua kolom posting homepage blogspot ini sebenarnya sudah ada di mesin pencari Google namun sedikit ada tambahan yang perlu saya benahi dari beberapa artikel tentang cara membuat dua kolom posting homepage blogspot agar lebih baik lagi. Berikut gambar dari hasil cara membuat dua kolom posting homepage blogspot yang telah saya buat di blog saya sendiri

Cara Membuat Dua Kolom Posting Homepage Blogspot

Berikut Cara Membuat Dua Kolom Posting Homepage Blogspot
  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:400px;margin:0 20px 5px 0;overflow:hidden;float:left;}
    </style>
    </b:if>


    Tambahan 1 :
    • Jika anda ingin menambahkan background cukup memasang kodenya saja seperti berikut ini
      .post {background:#00000;width:250px;height:400px;margin:0 20px 5px 0;overflow:hidden;float:left;}
    • Atur lebar dan tinggi postingan
      width:250px;height:400px;
    • Atur jarak antar postingan
      margin:0 20px 5px 0;

    Tambahan 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

    Cara Membuat Dua Kolom Posting Homepage Blogspot

    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
Jika ada pertanyaan tentang cara membuat dua kolom posting homepage blogspot ini, mari kita diskusikan bersama dengan meninggalkan komentar untuk artikel ini, Cara Membuat Dua Kolom Posting Homepage Blogspot

Cara Membuat Dua Kolom Posting Homepage Blogspot Rating: 4.5 Diposkan Oleh: ana sriwahyuni

25 komentar:

  1. wah, makasih atas tutorialnya... sudah diterapkan di blog saya
    saya ada pertanyaan, gimana cara agar tinggi postingan yang kiri dan yang kanan itu sama, di blog saya postingan nya ada yang tinggi dan ada yang rendah. terlihat jadi berantakan. mohon solusi nya jonarendra.blogspot.com

    BalasHapus
    Balasan
    1. FREE DOWNLOAD SEDUCE ME AND OTHER SEX GAMES ADULT 18+ FOR PC FULL VERSION LATEST VERSION COMPRESSED 18+ DOWNLOAD FROM HERE-->>>> www.argames786.blogspot.com

      Hapus
  2. @Jona Rendra itu dikarenakan perbedaan panjang judul setiap artikel yang berbeda, untuk mengatasinya atur jarak antara judul artikel dengan artikel (post body)

    BalasHapus
  3. ooowh, begitu ya, makasih ya saya coba dulu

    BalasHapus
  4. hadeh hasilnya cuman terbelah 2.. yang sebelah kosong ..

    BalasHapus
  5. @Debie Randy memang seperti itu hasilnya mas Randy, kalau dikembangkan lagi dengan penambahan beberapa kode akan menjadi tampilan seperti layaknya toko online atau blog-blog galery
    biar yg sebelah tidak kosong, sesuaikan lebarnya..

    BalasHapus
  6. triknya sangat keren , memang harus sedikit di otak atik agar hasinya maksimal . terima kasih master :)

    BalasHapus
  7. wiw , mantep sob , ane praktikin dulu ya hehehe :D

    BalasHapus
  8. thanks gan, infonya keren, mau ane coba dulu di blog saya BELAJAR IPTEK

    BalasHapus
  9. gan, boleh nanya g? kenapa saya bikin pstingan baru ko munculnya 1 sih bukan 3 atau lebih.....tolong dibales.....plzz

    BalasHapus
    Balasan
    1. maksudnya? tampilan kolom artikelnya atau artikel yg tampil cuma 1?
      jika kolomnya, sesuaikan ukuran lebarnya Om Dan
      jika artikelnya itu terserah Om Dan,,,

      Hapus
    2. udah, tapi di homepage blogger masih tampil 2 postingan, bukan 3 atau lebih nih ssnya:http://2.bp.blogspot.com/-_5v1e5TepuY/UZDa3oI2F1I/AAAAAAAAAFc/5gUvwM6H_hI/s1600/Untitled.png gimana tuh?

      Hapus
  10. mantap saudaraku... terima kasih yaa.. homepage blog saya sudah menjadi 2 kolom.. http://yandisangdebu.blogspot.com

    BalasHapus
  11. makasih sangat membantu sekali buat saya yang masih pemula salam kenal http://idegemilang.blogspot.com/

    BalasHapus
  12. mantab masbro, makasih ya tutornya
    aku kemarin punya beberapa tampilan pengkondisian seperti ini, cuman ilang gara2 depfreeze, lupa gak tak pindah ke disk lain
    makasih banyak ya

    BalasHapus
  13. wah ternyata requestnya dikabuklan.
    makasih sob. tapi setelah dicoba2 kaya berantakan gitu, jadi ane rubah ke tampilan biasa lagi.
    sekali lagi makasih atas tutorialnya

    BalasHapus
  14. Emang kalo gini enak gan, blognya jadi keliatan rapi (y)

    BalasHapus
  15. makasih tutornya saya akan terapkan di blogku

    BalasHapus
  16. terima kasih infonya gan,.. saya akan coba,.

    i like you artikel,..

    BalasHapus
  17. mantab, trima kasih banyak tutornya, sangat membantu saya dalam membuat blog toko online...

    BalasHapus
    Balasan
    1. panduan diatas hanya dasarnya saja, belum 100% jadi, jika digunakan untuk toko online masih jauh dari kata sempurna, sebagai saran: lebih baik gunakan template khusus toko online saja.. :)

      Hapus
  18. Saya kan coba mas , lihat saja blog saya tentang baju koko bordir

    BalasHapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia