Cara membuat 2 kolom footer untuk widget apa saja seperti kolom ruang iklan atau untuk menampilkan fitur-fitur blog website sobat blogger wonogiri.
Cara menambahkan kolom widged di footer atau cara membuat kolom untuk footer
kerangka
kolom blog atau tata letak suatu template berfariasi / berbeda-beda ,
karena suatu template di buat oleh banyak orang jadi untuk
selerapuntidak sama.
yang sering di alami bagi para sobat blogger
kadang kala sudah menyukai template nya tapi ternyata susunan
kolom-kolom nya tidak cukup untuk menampilkan aksesories yang kita punya
nah jika sudah begitu maka salah satu dari cara yang lain adalah
membuat atau menambahkan kolom secara manual / di pasang sendiri
sesuai judul posting ini Cara membuat 2 kolom footer saya akan memberikan panduanya membuat dan memasang kolom di footer,
sebagai contoh 2 kolom di footer yang akan saya berikan panduanya disini bisa di lihat contohnya pada gambar di bawah ini :
untuk
cara pembuatan kolom untuk widged di bagian footer sangat mudah hanya
perlu menambahkan 2 kode masing-masing satu (1) kode css dan satu (1)
kode Html di bagian Html Template, cara pembuatanya silahkan simak
panduanya di bawah ini
cara membuat dan memasang 2 kolom footer :
1.buka blog anda lalu login
2.dalam dashboard blog pilih template lalu klik edit HTML
3.selanjutnya cari kode ini ]]></b:skin>
4.dan kopi kode di bawah ini lalu pastekan di atas kode ]]></b:skin>
/* ---2 footer blogger wonogiri--- */
#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
background:#transparant;
}
#lower-wrapper {
margin:auto;
padding: 20px 0px 20px 0px;
width: 960px;
}
#lowerbar-wrapper {
border:0px solid #DEDEDE;
background:#fff;
float: left;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 32%;
text-align: justify;
font-size:100%;
line-height: 1.4em;
word-wrap: break-word;
overflow: hidden;
}
.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {
margin: 0px 0px 10px 0px;
padding: 2px 0px 2px 0px;
text-align: left;
color:#0000ff;
text-transform:uppercase;
font: bold 14px Arial, Tahoma, Verdana;
border-bottom:1px solid #000000;
}
.lowerbar ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style-type: none;
}
.lowerbar li {
margin: 0px 0px 2px 0px;
padding: 0px 0px 1px 0px;
border-bottom: 1px dotted #ccc;
}
Keterangan :
- kode merah ( 960 ) pada kode di atas adalah sebagai ukuran total panjang keseluruhan kolom widged nya jika tidak sesuai silahkan sesuaikan dengan ukuran panjang template anda
<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>
5.simpan html template nya
6.selesai..
No comments:
Post a Comment