Menambah Widget Tiga Kolom Sejajar di Atas Footer

Bagaimana menambahkan 3 kotak lagi di bawah main wrapper? Pertanyaan ini dilontarkan oleh sobat OB Ad4m San dalam komentarnya di posting membuat menu horizontal. Mungkin singkatnya, yakni menambah widget tiga kolom sejajar di atas footer (sama aja he.. he.. he..). Untuk kode CSS dalam trik blogger ini harus disesuaikan dengan template blog kamu.

Berikut trik blogger menambah widget tiga kolom sejajar di atas footer :
  • Login ke account blogger kamu.
  • Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".
Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.
  • Cari kode ]]></b:skin> dan Copy-Paste (copas) kode berikut di atasnya.
Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.
/* -- bottom -- */

#bottom {
width:
850px;
clear:both;
margin:0 auto;
float:left;
padding:10px 0;
color:
#333;
background:#ffffff;
border-top:#ffffff;
border-bottom:#ffffff;
}

#bottom a:link {
color:
#006699;
text-decoration:none;
}

#bottom a:hover {
color:#c06000;
text-decoration:underline;
}

#bottom a:visited {
color:
#808080;
text-decoration:none;
}

#bottom h2 {
color:#000000;
padding:10px 0 2px 0;
margin:0 0 10px 0;
border-bottom:1px dotted
#333;
font-size:11px;
font-weight:bold;
line-height:1.4em;
text-transform:uppercase;

}

#bottom ul {
padding:0;
margin:0;
color:
#333;
}

#bottom ul li {
list-style-type:none;
border-bottom:1px dotted
#333;
background: url("http://lh3.ggpht.com/_w3vbLlHM5kg/SbaWQmXKL8I/AAAAAAAAAEc/W7TmnpAs0x4/s144/Arrobblue.png") no-repeat 0px .17em; padding-left:17px;
margin-top:2px;
}

#bottom1 {
width:260px;
float:left;
padding-left:15px;
}

#bottom2 {
width:260px;
float:left;
padding:0 20px 0 20px;
}

#bottom3 {
width:260px;
float:right;
padding-right:15px;
}

Catatan :
  1. Ganti kode yang berwarna hijau sesuai dengan lebar template blog kamu.
  2. Untuk variabel width di kode #bottom harus sesuai dengan lebar template blog kamu.
  3. Untuk variabel width di kode #bottom1, #bottom2, dan #bottom3 dapat kamu ubah dengan lebar yang kamu inginkan, tapi harus memperhatikan point nomor 2.
  4. Ganti kode yang berwarna merah dengan karakter blog kamu.
  5. Khusus untuk kode background: url("http://lh3.ggpht.com/_w3vbLlHM5kg/SbaWQmXKL8I/AAAAAAAAAEc/W7TmnpAs0x4/s144/Arrobblue.png") no-repeat 0px .17em; padding-left:17px; merupakan kode untuk menambahkan icon panah biru dalam teks kamu jika menggunakan metode penomoran, baik angka maupun butir-butir. Kalau kamu kurang suka silakan hapus kode tersebut atau ganti url dalam tanda kurung dengan icon kamu sendiri.
  • Cari kembali kode HTML <div id='footer-wrapper'> atau kode yang sejenis. Kemudian copas kode di bawah ini di atas kode tersebut.
<div id='bottom'>
<b:section class='bottom' id='bottom1' preferred='yes'/>
<b:section class='bottom' id='bottom2' preferred='yes'/>
<b:section class='bottom' id='bottom3' preferred='yes'/>
</div>

  • Jangan lupa disimpan.
Catatan : Sekarang coba kamu klik Tata Letak --> Elemen Halaman. Sekarang kamu akan melihat ada tampilan widget baru di bawah template blog kamu dan sudah bisa menambah beberapa gadget didalamnya.

Revisi :

Pantesan banyak teman-teman OB yang gagal menerapkan trik blogger ini, ternyata karena pengaruh kode <!-- ... --> yang ikut diterjemahkan dalam bahasa pemprograman. Sekarang kodenya telah diupdate dengan meniadakan kode yang OB sebutkan di atas.
Atas perhatian teman-teman yang terlanjur kecewa dengan kegagalan trik ini, OB haturkan maaf yang sebesarnya.

Tertanda,

OB
http://optimasi-blog/blogspot.com

Sebagai tambahan OB akan sedikit mencoba untuk menjelaskan modifikasi kode CSS pada variabel width (#bottom1, bottom2, bottom3) agar sesuai dengan width di kode #bottom (kode yang berkedap-kedip).

Misal :
  1. #bottom { width:850px;}
  2. Trik perubahan variabel width dalam kode #bottom1, #bottom2, #bottom3 adalah dengan memperhatikan lebar (padding) yang terpakai yakni 15px (#bottom1), 20px + 20px (#bottom2), 15px (#bottom3). Jadi total lebar yang telah digunakan adalah 70px.
  3. Sisa lebar (width) adalah 850px-70px = 780px.
  4. Sekarang tinggal memvariasikan 780px ke dalam 3 kolom. Sebagai contoh untuk membuat 3 kolom sama lebarnya, maka lebar (width) dalam kode #bottom1, #bottom2, #bottom3 masing-masing sebesar 260px.

Selamat menambah widget tiga kolom sejajar di atas footer...

49 komentar untuk “Menambah Widget Tiga Kolom Sejajar di Atas Footer”

  1. trim's sangat membantu, blogku udah ditambah gadgetnya.

    BalasHapus
  2. mas klo sejajarnya kesamping gmn mas?? itu sejajarnya kebawah y??

    BalasHapus
  3. to Ad4m San: klo "kolom" berarti ke samping, nah klo "baris" baru yg ke bawah

    BalasHapus
  4. Thanks berat, tak coba dulu deh......sapa tahu berhasil....

    BalasHapus
  5. Mas,saya dah coba tapi jadinya atas,tengah dan bawah.Bukannya kanan,tengah,dan kiri.
    Yang saya inginkan yaitu kolom kanan,tengah dan kiri.Gimana caranya ya Mas OB?

    Thanks bantuannya :)

    ini alamat blog saya www.rizeman.co.cc

    BalasHapus
  6. to rizeman: ntar OB liat dulu ke blognya...

    BalasHapus
  7. to all: Mohon maaf yang sebesarnya, jika teman-teman gagal menerapkan kode menambah widget 3 kolom ini. Tapi kabar gembiranya posting udah OB update dan ada revisinya. OB love you, frieds :X

    BalasHapus
  8. Gpp mas hehehe tadinya juga bingung kok ke atas kotaknya hikzzz :D

    BalasHapus
  9. Boleh dicoba nih,.... tengkyu yah bro,...

    BalasHapus
  10. Ko punya ku malah ke bawah...! kirain diplit jadi kiri, tengah, kanan..

    BalasHapus
  11. Ko punyaku malah ke bawah...! kirain displit jadi kiri, tengah, kanan..apanya yang salah ya..?

    BalasHapus
  12. to sti@wan: terima kasih kembali :D

    to Misbah: harusnya ke samping, coba ubah width per-item-nya, baik di bottom, bottom1,2, dan 3

    BalasHapus
  13. bagus sekali artikelnya.....
    Kalau saya pasang widget ini, apa gak tambah berat loadingnya ?

    Terimakasih

    BalasHapus
  14. to kwangkxz: Klo widgetnya diisi dengan image, javascript, mungkin loadingnya berat. Tapi klo cuma nambah aja, yakin deh tidak akan berat di loading :D

    BalasHapus
  15. Thanks OB nanti tak praktekin, aku baru aja ganti layout. coba d lihat yah :
    Panca

    BalasHapus
  16. wah boleh dicoba nih. tapi saya belum tau mau diisi apaan? ada saraaan?

    8-} 8-}

    BalasHapus
  17. bro, kalo pengen nambah kolom tempat widget kayak pynya kamu gmn????

    BalasHapus
  18. bisa ndak tambah kolom widget di samping posting, kalo punyaku kan pakai template default di blogger.com... pinginnya ditambah kolomnya... tanpa ngusak posting yang udah ada...
    makasih atas infonya....!

    BalasHapus
  19. Thank's ats inf0nya,sngat membntu...untuk pemula sperti sya...btw kunjuni jg bl0g baru q di ' milikisemua.blogspot.com

    BalasHapus
  20. gatot aku!!! di tmp saiia gag ada (div id='footer-wrapper')nya kang.. pusing berat nii :(( huhuhuhuhuh

    BalasHapus
  21. akh, aku dah nyoba..
    ku kira nambah elemenya di footernya... Hufff..
    Untuk dah aku backup:-t

    BalasHapus
  22. thanks infonya udah berhasil ni.....

    BalasHapus
  23. Sob,, Thank's infony...
    Tapi cara biar widget 3 kolomynya k tengah gimana...?
    Widget 3 kolom di atas footer ku terlalu ke kanan...
    Tolong d cek k blog-ku...:)]
    Thank's...

    BalasHapus
  24. thanx info tetapi setelah dicoba hanya kolom ke-3 yang bisa diedit widged nya. kolom 2 dan 2 ndak bisa di edit. tapi bisa lewat didrag (geser) widget, kenapa ya?

    BalasHapus
  25. salam kenal..
    Ada pertanyaan nih
    blog saya terdiri dari 3 colum . kanan , tenggah , dan kiri. Dimna kanan dan kiri untuk widget dan tenggah untuk posting artikel. Kalau saya ingin menambahkan satu colum yang agak lebar dari kanan ke kiri dibagian bawah seperti blog ini kodenya gmna yach?..mohon pencerahannya ( maklum masih belajar ). Terima kasih jawabannya

    BalasHapus
  26. wah langsung jadi ! thank ya mas

    BalasHapus
  27. asik nich,, kapan2 pengen nyoba dulu ah :)
    Thanks banget tutorialnya :)

    BalasHapus
  28. NI YANG ANE CARI BRO.....INFO BAGUS.....

    BalasHapus
  29. OB di templte aku koq nggak ada (div id='footer-wrapper')-nya gimana dunk padahal aku khan kepengen ngebuat 3 kolom widget-nya tuh penting banget... Please tolong kasih solusinya yach !!! :0}]

    BalasHapus
  30. aq pengen edit laman, kemudian laman tersebut hanya mnampilkan html/javascript saja, tapi javascript tsb. tak muncul di hal. awal/ beranda. ada yg taw......?

    BalasHapus
  31. he he...di cariin muter - muter kesana kemari ternyata di sini tho!!! thanks Bro!!!

    BalasHapus
  32. nice post sob..
    sob mau tanya..
    cara membuat kolom footer gmn ?
    template saya ga ada kolom footernya ?
    mohon bantuannyaa

    BalasHapus
  33. @Fajri Tkj : OB, rasa template blog kk Fajri sudah ada footernya (<div id='footer-wrapper'>). Mungkin cuma dapat dilihat dalam mode edit HTML. Jadi jika kk ingin menambah kode di footernya terpaksa manual

    BalasHapus
  34. kalau mau nambahin kodenya secara manual gimana sob ?

    BalasHapus
  35. @fajri tkj : Coba kk cari kode <div id='footer-wrapper'> dibawahnya ada kode <div class='footer section' id='footer'></div>.
    Nah, masukkan teks biasa dulu diantaranya, misal :
    <div class='footer section' id='footer'>
    Copyright by Berbagi Informasi Seputar Internet
    </div>

    BalasHapus
  36. Masalahku, cm pada buton tengah jaraknya terlalu ke kiri, jadi lenggang ke button kanan terlalu jauh..
    udah aq utak utik, tetep aja gitu, sekali jadi tapi button kanan malah jadi kebawah.. :D

    BalasHapus
  37. coba yang botom 2 padding nya ditambah angkanya
    contoh: padding:0 50px 0 50px;
    ditambah angkannya jadi seperti ini: padding:0 75px 0 75px; semoga membantu..

    BalasHapus
  38. @Viyan Pradita:
    Agan bisa juga menambah masing - masing width (#bottom1, #bottom2, #bottom3). Atau ubah dalam persen (misalnya: width:30%;).

    BalasHapus
  39. thanks udah aku pake, dan berhasil. walaupun sedikit modifikasi dan sedikit pening.... hehehe...


    cekidot http://bundabeauty.blogspot.com/

    BalasHapus
  40. Makasih sob atas info yang keren nih.. langsung nyoba

    Popular di blog Aku "Ketahui Rahsia Buah Dada Wanita (18sx)"

    BalasHapus