Tentang Ilmu Komputer, Android, Panduan Blogging dan Tips di Internet.

Cara Membuat 2 Kolom Widget di Bawah Posting Blog

Kebutuhan kolom atau lapak widget dalam menunjang tampilan Blog setiap Blogger berbeda-beda. Ada yang butuh dengan kolom widget di bawah header, ada juga yang tidak memerlukanya. Ada yang yang memerlukan kolom widget di bagian bawah Blog, ada juga yang tidak memerlukanya. Perbedaan kebutuhan kolom widget juga terdapat pada jumlahnya. Ada yang butuh 1 kolom, 2 kolom, atau pun 3 kolom. Memang hal seperti ini mudah diatasi jika menggunakan widget bawaan blogspot, karena kita dapat menambah atau menambah jumlah kolom widget yang diperlukan.

Cara Membuat 2 Kolom Widget di Bawah Posting Blog

Tapi bagaimana dengan kolom widget pada template yang bukan bawaan blogspot? Bagaimana jika pada widget tersebut tidak menyediakan kolom atau jumlah kolom widget yang sobat butuhkan. Sebenarnya pasti ada cara untuk menambah kolom widget tersebut, tentunya dengan sedikit Edit HTML. Para Blogger yang membahas Tutorial Blogging pun sudah banyak yang mengulasnya.

Contohnya saya pada kesempatan kali ini akan membahas kolom widget yang berada di bawah posting Blog. Biasanya kolom widget pada posisi ini hanya tersedia 1 kolom saja, bagaimana dengan milik sobat? Tidak jarang para Blogger yang membutuhkan 2 kolom widget pada posisi ini. Maka dari itu saya akan memberi salah satu cara Membuat 2 Kolom Widget di Bawah Posting Blog. Berikut langkah-langkahnya:

Cara Membuat 2 Kolom Widget di Bawah Posting Blog

  • Login ke akun Blogger sobat.
  • Pada halaman dashboard, sobat masuk ke halaman Template dan klik Edit HTML.
  • Cari kode seperti berikut, fokuskan untuk mencari kode #main-wrapper, atau #main-wpr. Perlu diketahui kode elemen pada setiap template berbeda-beda.
/* -- Main -- */
a img{border-width:0}
.post-body img{border:0px solid #ccc;margin:5px}
#main-wrapper a:hover{color:#c13a10;text-decoration:underline}
a:link,a:visited,#main .post-body a:link,#main .post-body a:visited{color:#346ba4;text-decoration:none}
a:hover,#main .post-body a:hover{color:#999;}
#main-wrapper a:link,#main-wrapper a:visited{text-decoration:none}
#main-wrapper{float:left;width:650px;margin:0;padding:0}
.post h3 a:hover{color:#A91B33;text-decoration:none}
.post-body{line-height:1.6em;margin:0;text-align: justify;}
.post img{padding:5px}
.post h2, .post h2 a {color: #444;font-family: Arial;font-weight: 400;margin: 0 0 5px;padding: 10px 0 0;}
.post blockquote{border-left:3px solid #DDD;margin:5px 0 5px 10px;padding:0 10px;color:#888;text-align:left;}
.post blockquote p{margin:0;padding:0 0 15px}
.post,.comments{background:#FFF top no-repeat;float:left;border-bottom:1px solid #DDD;width: 630px;margin:0 0 10px;padding-left:10px;padding-right:10px;padding-bottom:10px}
.post h3,.post h3 a {color:#444;font-size:17px;font-family:Georgia, Tiles New Roman;font-weight:400;margin:0 0 5px;padding:10px 0 0}
/* -- End Main -- */

  • Letakan kode berikut tepat di bawah kode yang berwarna merah.
#main {width:650px;float:center;}
#main-left{border:1px solid #000000;padding:10px;width: 300px;float:left;}
#main-right{border:1px solid #000000;padding:10px;width: 300px;float:right;}

  • Sobat ubah kode 650px dengan ukuran lebar Main bar Blog sobat.
  • Dan ubah kode 300px pada #main-left dengan ukuran lebar kolom widget kiri yang sobat inginkan, kode 300px pada #main-right dengan ukuran lebar kolom widget kanan yang sobat inginkan.
  • Sobat juga bisa mengubah kode 1px dengan lebar border yang sobat inginkan, dan kode #000000 dengan warna border yang sobat inginkan. 
  • Kemudian cari kode seperti berikut, fokuskan mencari kode <div id='main-wrapper'> atau <div id='main-wpr'>. Perlu diketahui bahwa kode elemen setiap Template berbeda-beda.
<div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
        </b:section>
</div>

  • Tambahkan kode berwarna biru berikut pada kode di atas tadi sehingga hasilnya menjadi seperti berikut.
<div id='main-wrapper'>
<div id='main'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
<b:section class='main-left' id='main-left' style='width: 300px; float: left;'>
</b:section>
<b:section class='main-right' id='main-right' style='width: 300px; float: right;'>
</b:section>
</div>
</div>
  • Ubah ukuran width sesuai dengan lebar kolom widget kanan/kiri yang sebelumnya telah sobat tentukan. 
  • Klik Simpan Template, dan silakan lihat hasilnya.
  • Jika berhasil, maka akan muncul 2 Kolom Widget di Bawah Posting Blog.
Cara Membuat 2 Kolom Widget di Bawah Posting Blog

Artikel terkait : Cara Membuat 2 Kolom Widget di Bawah Posting Blog

Artikel Blog Regi Brader Lainnya :

43 komentar:

  1. Tips yang sangat sangat bagus gan :D sayang seribu sayang, blog saya sudah ada kolom widget dibawah postingannya :D tapi keren kok gan

    ReplyDelete
    Replies
    1. Terimakasih mas. Tidak apa apa lah, mungkin ada sobat Blogger lain yang memerlukan tips ini...

      Delete
  2. wew keren gan,izin nyimak tutornya:D
    - Blogwalking -

    ReplyDelete
  3. nyoba ahh :)

    http://jagadkawula.blogspot.com/

    ReplyDelete
  4. kode #main-wpr & #main-wrapper tidak ada gan...solusi nya gmn?

    ReplyDelete
    Replies
    1. Khusus buat sobat yang pertanyaanya seperti ini. Coba cara ini yah... Simak dengan teliti.
      1. Sentuhkan cursor pada tulisan edit pada kolom posting. Perhatikan yang saya lingkari
      lihat gambar "http://4.bp.blogspot.com/-cYT-mTJAh48/Up8OOvOKOnI/AAAAAAAAEbc/pKI2ec1g5b0/s1600/Untitled.png"

      2. Cari kode "blog1" pada edit template. Maka bagian yang di lingkari adalah kode elemen main-nya.
      lihat gambar "http://2.bp.blogspot.com/-oWJS1QqJ1jU/Up8OUL5bxlI/AAAAAAAAEbk/tLSwvmdOt1A/s1600/Untitled1.png"

      Delete
  5. visit my new blog :D http://katoukumiko.blogspot.com/

    ReplyDelete
  6. makasih mass infonya..
    info seputar bola, prediksi bola ter-update..
    berita bola TERBARU DAN TERPERCAYA hanya ada di Bola368.net
    Kunjungi juga Bola368.org , Anda puas Kami pun senang.!

    ReplyDelete
  7. wow..nyari2 baru dapet yang cocok disini.. tapi low untuk merubah background widgetnya gimana yah..

    ReplyDelete
    Replies
    1. sobat bisa mengubah-ngubah tampilan termasuk background dengan merubah script CSS-nya. Script Css itu yang "#main-wrapper {blabla}". Untuk scripting silakan lakukan sendiri, saya sendiri kurang paham.

      Delete
    2. Kalau tidak salah sobat hanya perlu menambahkan kode "background:#KODEWARNA;" di dalam "{}" pada "#main".

      Delete
  8. makasih gan, terbantu banget.
    saya coba deh :D

    ReplyDelete
  9. makasih banget mas info nya.
    di coba dulu.. hehehe http://khusfiya-farma.com/

    ReplyDelete
  10. menarik gan posting nya
    di coba dulu ke blog saya
    http://cecepcom.blogspot.com/

    ReplyDelete
  11. thanks gan,,, baru cara ini bisa berhasil

    ReplyDelete
  12. mohon di bantu mas saya sudah mencoba cara di atas namun tidak bisa bisanya hanya menambahkan kolom di atas postingan saja.. ini blog saya,, http://bloggerexperimen.blogspot.com/

    ReplyDelete
  13. Thnx admin buat caranya sngt membantu saya untuk mengatasi masalah laptop saya.

    ReplyDelete
  14. thanks gan informasi artikelnya :)
    Kunjungi juga web kami
    http://pengobatanalamimustajab.com/
    http://apotekherbalkita.com/
    http://grosiracemaxstasik.com/

    ReplyDelete
  15. Nice artikel (y)
    terimkasih banyak tutornya gan
    http://obatjellygamatgoldg.net/

    ReplyDelete
  16. wah akhirnya ketemu juga tutorial ini mas, , nie di bawah postingan apa di bawah menu home mas
    Cara Terbaru Agar Blog Banyak Komentar

    ReplyDelete
  17. mantab, ijin share gan
    http://apotekacemaxs.com/pengobatan-alami-paru-paru-basah/

    ReplyDelete
  18. Mantaaap, gan sangat bermanfaaat :)
    ijin share http://grosiracemaxstasik.com/obat-tradisional-alzheimer/

    ReplyDelete
  19. Terimakasih atas informasinya sangat bermanfaat :)

    http://kedaijellygamatgoldg.com/

    ReplyDelete
  20. terimakasih infonya gan
    http://apotekacemaxs.com/obat-tradisional-radang-paru-paru/

    ReplyDelete
  21. Manteeep sob artikelnya :)
    Kunjungi web kami
    http://pengobatanalamimustajab.com/
    http://apotekherbalkita.com/wp-admin/
    http://grosiracemaxstasik.com/obat-alami-diare/

    ReplyDelete
  22. erimakasih infonya Gan (y)
    Ini yang sedang saya cari-cari
    http://grosirobatjellygmat.com/
    http://jamutradisionalmujarab.com/

    ReplyDelete
  23. Good guys infonya :) Thanks
    http://obatacemaxsid.com/obat-tradisional-kanker-paru-paru/

    ReplyDelete
  24. Sukses terus ya gan, thanks infonya :)
    http://kedaiacemaxs.com/obat-tradisional-infeksi-saluran-kemih/

    ReplyDelete
  25. Keren sob artikelnya, Ditunggu artikel yang lainnya :)
    Izin menyimak saja
    http://goo.gl/JNHHBO

    ReplyDelete
  26. Kereeen sob artikelnya :)
    s.id/5CG

    ReplyDelete
  27. Makasih sob informasinya :)
    http://goo.gl/yeUiCg

    ReplyDelete
  28. Makasih bgt bro info nya, sangat bermanfaat saya. hehe
    Jangan Lupa mampir ke blog EXPO Lowongan Kerja Terbaru ane ya Lowongan Kerja PT. INKA Multi Solusi

    ReplyDelete
  29. nice artikelnya sob
    http://goo.gl/GBecwp

    ReplyDelete
  30. mas tolongin saya dong di blog say tidak punya #main-wrapper dan #main-wpr jadi gimana mas??
    http://malingfilm.blogspot.com/

    ReplyDelete
    Replies
    1. pada template >> edit HTML, sobat cari keyword "blog1"

      Delete
  31. gak ada #mainwrapper.. sudah dicoba beberapa cara dengan mengabaikan "main", tapi tetap saja gagal..
    salam kenal gan

    http://www.belajaringgrisfun.com
    http://everythingaboutvanrush88.blogspot.com
    http://101alasan.blogspot.com
    http://pelajaranbahasajerman.blogspot.com/
    http://pelajaranbahasajepangonline.blogspot.com/

    ReplyDelete
  32. lumayan ribet.he,he,he,
    tapi layak dicoba..

    ReplyDelete
  33. mantaf,,, tp aku rubah hanya menambah 1 elemen yg sama lebar elemen posting. tksh gan.
    aku rubah begini krna gk sama format tiap template:

    #main-gayaku {
    background:transparent;
    float:left;
    width:99%;
    max-width:700px;
    margin:0 0 10px;
    }




    hehee,,, maklum newbie gan

    ReplyDelete

Copyright © 2013-2016 Blog Regi Brader - All Right Reserved