Selamat Datang Di Blog Bisnis Online Terpercaya www.maslukis.com


Jumat, 04 November 2016

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.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.

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.


Baca Juga:

Comments
0 Comments

0 komentar:

Posting Komentar

 
Copyright © 2018. Info Hari Ini . All Rights Reserved
Jl. Delta Raya Utara Kav. 49 - 51 Deltasari Baru, Sidoarjo, Jawa Timur, Indonesia 61256
PT. Bimasakti Multi Sinergi