Cara Menambahkan Tiga Kolom Widget Di Footer Untuk Blog

Tambahkan Tiga Kolom Widget Di Footer

Membuat halaman blog terlihat cantik dan menarik juga rapi itulah yang kita inginkan. Menambahkan Tiga Kolom Widget Di Footer atau kita sebut elemen widget dapat memberikan gaya baru pada blog anda.Membahas tutorial blog yang berhubungan dengan menambah kolom sebenarnya kang roni sudah pernah share dengan judul Cara super mudah menambahkan elemen di atas postingan dan kali ini kang roni juga akan membahas cara menambahkan kolom/elemen widget akan tetapi letaknya bukan di atas postingan tapi di bagian bawah footer dan kita tahu bahwa footer itu adalah merupakan bagian paling bawah pada halaman blog,yang lebih keren lagi kita akan menambahkan tiga kolom widget sekaligus,jadi bukan hanya satu kolom widget seperti yang kangroni share dulu (menambahkan kolom di atas posting).

Sebagai contoh,sobat lihat gambar dibawah ini yang akan menjelaskan bagaimana kita akan melakukan/membuat dan menambahkan tiga kolom sidebar ke bagian footer di template blogger.


Bila sobat sudah mengerti mari kita lanjutkan untuk melihat bagaimana Cara Menambahkan Tiga Kolom Widget Di Footer Untuk Blog.

1.Pergi ke Rancangan/Desain >Edit HTML.
2.Download Template Lengkap,Sebelum mengedit template Anda, Anda mungkin ingin menyimpan sebuah salinan dari template tersebut untuk keamanan bila terjadi kesalahan dalam peletakan kode nanti.
3.Cari kode ]]></b:skin> kemudian tambahkan kode dibawah ini tepat di atasnya.

#footer-left {
width: 33%;
float: left;
margin:5px;
text-align: left;
}
#footer-center {
width: 34%;
float: left;
margin:5px;
text-align: center;
}
#footer-right {
width: 33%;
float: right;
margin:5px;
text-align: right;
}
#footer-column-container {
clear:both;
}
.footer-column {
padding:5px;
}

4.Selanjutnya sobat cari kode ini

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

Setelah ketemu sobat ganti kode yang di cetak tebal dengan kode dibawah ini

<div id='footer-wrapper'>
<div id='footer-column-container'>
<div id='footer-left'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer-center'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer-right'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>
</div>

---------------------------Save dan lihat hasilnya pada halaman "Rancangan/Desain"

Perhatikan keterangan lebih lanjut,bila sobat tidak menemukan kode pada langkah nomor 4 seperti dibawah ini

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

Sobat cari aja kode <div id='footer'> kemudian dibawahnya taruh kode ini

<div id='footer-wrapper'>
<div id='footer-column-container'>
<div id='footer-left'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer-center'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer-right'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>
</div>

---------------------------Save dan lihat hasilnya pada halaman "Rancangan/Desain"

Ket:Bila hasilnya nanti tidak sejajar itu berarti ukuran kolom widgetnya terlalu besar,jadi sobat perlu merubah angka yang di cetak warna merah di atas dengan nilai angka yang lebih rendah.


Buat blog cantik rapi menarik dengan Menambahkan Tiga Kolom Widget Di Footer.Cara Menambahkan Tiga Kolom Widget Di Footer Untuk Blog.

Related Post:

24 comments:

Betwin188.com Agen Bola Terbaik Dukung Anti Rasisme EURO 2012 said...

mantab gan infonya,,,,,
mampir gan di blog sy

roni said...

pasti sobat

Dewi Purnama said...

Hi.. salam kenal, bisa bantu aku tidak..? aku lg bingung ni cara ngedit postingna, antara judul dan isi posting itu ada space lumayan lebar, jadi judul sm isinya itu jaraknya jauh bgt, aku uda usaha edit rancangannya utk bag.posting, tp ttp ga bs, cb km liat dl blogku di everlastingkoreanbeauty.blogspot.com liat posting2ku psti jauh bgt jarak antara jdul dan isinya, mohon bantuannya, trima kasih.. :)

Dewi Purnama said...

di bagian tata letak itu aku edit ttp ga bisa :(

roni said...

Dewi purnama:Salam kembali dari kang roni, setelah kang roni lihat kode template blog sobat kayaknya ada kode seperti ini
------------------------
google_ad_height = 250;
------------------------
Untuk mencarinya Buka halaman
- Dasbor
- kemudian klik Rancangan/Tata letak, selanjutnya klik Edit HTML .
- Setelah kode template sobat terbuka silahkan beri centang pada kotak Expand Template Widget untuk memaksimalkan pencarian kode template.
Langkah selanjutnya cari kode seperti di atas,untuk mempermudah pencarian tekan tombol F3 pada keybord nanti akan keluar kolom pencarian,setelah itu sobat masukkan aja kode yang dicari.
- Setelah kode seperti di atas ketemu sobat ganti aja angka 250 menjadi 40 atau bisa menyesuaikan sendiri.
- Langkah terakhir klik SIMPAN TEMPLATE dan lihat hasilnya.

Aku Dan Internet said...

wah pancet lebar jadine.,.,!!!

Penerjemah Tersumpah said...

Di blog saya kok gak ada footer-wrapper ya mas?

Penerjemah Tersumpah said...

Udah saya coba lagi copas dibawah div id=footer, hasilnya malah baris kok mas bukannya kolom?

roni said...

mungkin sobat bisa mencoba untuk ditaruh di atas kode

<script type='text/javascript'>
if (typeof(BLOG_attachCsiOnload) !=

wawan Nurdiansyah said...

klo yang lebih dari 3 gmn y ?
soalnya klo 3 udah ada d menu blogger jadi g usah pasang scrip segala .,. thamk's you kang

roni said...

Langkah terakhir gunakan kode dibawah ini:

<div id='footer-wrapper'>
<div id='footer-column-container'>
<div id='footer-left'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer-center'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer-right'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div id='footer-right'>
<b:section class='footer-column' id='col4' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>
</div>

Info dan Tips Uda Nazar said...

ane sukses dengan sempurna nyedot ilmu dari kang roni, tetapi langkah no.4 saya letakkan di atas kode end outer-wrapper karena template ane tidak ada gadget di bagian footer..thanks banget kang.

roni said...

Sama2 sobat, and selamat sobat bisa bereksperimen sendiri

Agust Setiawan said...

bro kalo di template ku nggak ada... solusinya untuk ngasih element footer seperti tutor brother gmn ya... soalnya aku search footer section nya ndak ada

Tionghoa said...

kang, aku coba ganti ke 4 colom, sudah ikuti langkah terakhir seperti yg di post di komentar, dan aku sudah ganti ukuran ke 25% untuk tiap kolom, kok jadi egk beraturan yah posisinya dibawah?

herman said...

apa harus kecilin dibawah 25% yah kang?

roni said...

Agus setiawan,karena kang roni blum lihat blog sobat and gak tahu sobat pakai template yg mana jadi coba taruh di atas kode </body>

roni said...

Tionghoa, ya betul angkanya di kecilin lagi, tapi kalau hasilnya tidak memuaskan itu berarti sobat harus memperlebar body

Emak Kruz said...

berguna gan.

Dittik.tk said...

Mantap master, kapan2 mau nyoba,, ditunggu kunbalnya ya master dan tinggalkan jejak di koment,, thx infonya

abdullah said...

sob di blog ane nda ada
<div id='footer-wrapper gmn cara nya yach????
mohon pencerahanya

http://sunnahmu.blogspot.com/

adhy said...

makasih gan.. sdh bisa di template ku, tapi peletakannya sedikit berbeda.

Sewa Hiace Malang said...

Izin praktek ya boss, makasih

Fajar Subekti said...

Mantab gan tutornya, dicoba dulu lanjut bookmark

Post a Comment