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.
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:
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.
Tips yang sangat sangat bagus gan :D sayang seribu sayang, blog saya sudah ada kolom widget dibawah postingannya :D tapi keren kok gan
ReplyDeleteTerimakasih mas. Tidak apa apa lah, mungkin ada sobat Blogger lain yang memerlukan tips ini...
Deletewew keren gan,izin nyimak tutornya:D
ReplyDelete- Blogwalking -
Silakan sob, terimakasih kunjungannya...
DeleteMakasih tutorialnya, berguna! :D
ReplyDeletenyoba ahh :)
ReplyDeletehttp://jagadkawula.blogspot.com/
kode #main-wpr & #main-wrapper tidak ada gan...solusi nya gmn?
ReplyDeleteKhusus buat sobat yang pertanyaanya seperti ini. Coba cara ini yah... Simak dengan teliti.
Delete1. 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"
visit my new blog :D http://katoukumiko.blogspot.com/
ReplyDeletemakasih mass infonya..
ReplyDeleteinfo 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.!
wow..nyari2 baru dapet yang cocok disini.. tapi low untuk merubah background widgetnya gimana yah..
ReplyDeletesobat 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.
DeleteKalau tidak salah sobat hanya perlu menambahkan kode "background:#KODEWARNA;" di dalam "{}" pada "#main".
Deletemakasih gan, terbantu banget.
ReplyDeletesaya coba deh :D
makasih banget mas info nya.
ReplyDeletedi coba dulu.. hehehe http://khusfiya-farma.com/
menarik gan posting nya
ReplyDeletedi coba dulu ke blog saya
http://cecepcom.blogspot.com/
thanks gan,,, baru cara ini bisa berhasil
ReplyDeletemohon 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/
ReplyDeleteThnx admin buat caranya sngt membantu saya untuk mengatasi masalah laptop saya.
ReplyDeletethanks gan informasi artikelnya :)
ReplyDeleteKunjungi juga web kami
http://pengobatanalamimustajab.com/
http://apotekherbalkita.com/
http://grosiracemaxstasik.com/
Nice artikel (y)
ReplyDeleteterimkasih banyak tutornya gan
http://obatjellygamatgoldg.net/
wah akhirnya ketemu juga tutorial ini mas, , nie di bawah postingan apa di bawah menu home mas
ReplyDeleteCara Terbaru Agar Blog Banyak Komentar
mantab, ijin share gan
ReplyDeletehttp://apotekacemaxs.com/pengobatan-alami-paru-paru-basah/
Mantaaap, gan sangat bermanfaaat :)
ReplyDeleteijin share http://grosiracemaxstasik.com/obat-tradisional-alzheimer/
Terimakasih atas informasinya sangat bermanfaat :)
ReplyDeletehttp://kedaijellygamatgoldg.com/
terimakasih infonya gan
ReplyDeletehttp://apotekacemaxs.com/obat-tradisional-radang-paru-paru/
Manteeep sob artikelnya :)
ReplyDeleteKunjungi web kami
http://pengobatanalamimustajab.com/
http://apotekherbalkita.com/wp-admin/
http://grosiracemaxstasik.com/obat-alami-diare/
erimakasih infonya Gan (y)
ReplyDeleteIni yang sedang saya cari-cari
http://grosirobatjellygmat.com/
http://jamutradisionalmujarab.com/
Good guys infonya :) Thanks
ReplyDeletehttp://obatacemaxsid.com/obat-tradisional-kanker-paru-paru/
Sukses terus ya gan, thanks infonya :)
ReplyDeletehttp://kedaiacemaxs.com/obat-tradisional-infeksi-saluran-kemih/
Keren sob artikelnya, Ditunggu artikel yang lainnya :)
ReplyDeleteIzin menyimak saja
http://goo.gl/JNHHBO
Kereeen sob artikelnya :)
ReplyDeletes.id/5CG
Makasih sob informasinya :)
ReplyDeletehttp://goo.gl/yeUiCg
Makasih bgt bro info nya, sangat bermanfaat saya. hehe
ReplyDeleteJangan Lupa mampir ke blog EXPO Lowongan Kerja Terbaru ane ya Lowongan Kerja PT. INKA Multi Solusi
nice artikelnya sob
ReplyDeletehttp://goo.gl/GBecwp
mas tolongin saya dong di blog say tidak punya #main-wrapper dan #main-wpr jadi gimana mas??
ReplyDeletehttp://malingfilm.blogspot.com/
pada template >> edit HTML, sobat cari keyword "blog1"
Deletetapi kalau #wrapper ada mas
Deletegak ada #mainwrapper.. sudah dicoba beberapa cara dengan mengabaikan "main", tapi tetap saja gagal..
ReplyDeletesalam kenal gan
http://www.belajaringgrisfun.com
http://everythingaboutvanrush88.blogspot.com
http://101alasan.blogspot.com
http://pelajaranbahasajerman.blogspot.com/
http://pelajaranbahasajepangonline.blogspot.com/
lumayan ribet.he,he,he,
ReplyDeletetapi layak dicoba..
trims dah sukses
ReplyDeletebermanfaat :)
ReplyDeletemantaf,,, tp aku rubah hanya menambah 1 elemen yg sama lebar elemen posting. tksh gan.
ReplyDeleteaku 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