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 mahadewa pulsa--- */
#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 :
<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 template nya
6.selesai..
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 mahadewa pulsa--- */
#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 template nya
6.selesai..
sampai disini panduan blogger dari jasa pembuatan website tentang cara membuat 2 kolom footer , jika yang anda inginkan menambahkan 3 kolom footer bisa mengunjungi panduanya Cara Membuat 3 kolom footer
Jika ada kesulitan silahkan untuk bertanya saja , Terimakasih..
Jika ada kesulitan silahkan untuk bertanya saja , Terimakasih..