Advertisemen
Bangiz - Admin kali ini mau berbagi tips sesuai judul di atas yaitu cara membuat atau menambah kolom footer di blog. Setiap template tentunya beda-beda, ada yang mempunyai kolom footer 2, 3 atau 4 dan ada juga yang tidak menambahkan kolom footer tersebut. Itu tergantung dari desainer templatenya.
Jika Anda tertarik ingin menambah kolom footer tersebut dan tidak ingin mengganti dengan template yang lain maka ikuti saja caranya berikut ini:
Jika Anda tertarik ingin menambah kolom footer tersebut dan tidak ingin mengganti dengan template yang lain maka ikuti saja caranya berikut ini:
 |
| 4 kolom footer |
1. Masuk dasbor Blogger
2. Pilih menu Template > Edit HTML
3. Cari kode ]]></b:skin> (gunakan Ctrl + F untuk memudahkan)
4. Copy kode berikut dan paste di atas ]]></b:skin>
/*----- Cara Menambah Kolom di Footer Blog By bangiz.blogspot.com -----*/
#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
background:#transparant;
}
#lower-wrapper {
background:#ffffff;
margin:auto;
padding: 10px 0px 10px 0px;
width: 960px;
border:0;
}
#lowerbar-wrapper {
background:#ffffff;
float: left;
margin: 0px 5px auto;
padding-bottom: 10px;
width: 23%;
text-align: justify;
color:#000;
font: normal 12px Arial, Tahoma, Verdana;
line-height: 1.6em;
word-wrap: break-word;
overflow: hidden;
}
.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {margin: 0; padding: 10px 10px 0px 10px;}
.lowerbar h2 {
margin: 0px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: left;
border:0;
color:#000;
text-transform:uppercase;
font: bold 14px Oswald, Arial, Tahoma, Verdana;
}
.lowerbar ul {
color:#000;
margin: 0 auto;
padding: 0;
list-style-type: none;
}
.lowerbar li {
display:block;
color:#000000;
line-height: 1.6em;
margin-left: 0 !important;
padding: 6px;
border-bottom: 1px solid #025076;
border-top: 1px solid #981b1e;
list-style-type: none;
}
.lowerbar li a {
text-decoration:none; color: #3e3e3e;
}
.lowerbar li a:hover {
text-decoration:underline;
}
.lowerbar li:hover {
display:block;
background: #93c572;
}
5. Selanjutnya cari kode </body> dan copy-paste kode berikut sebelum </body>
<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 id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>
6. Simpan template dan lihat hasilnya atau lihat pada Tata Letak, jika kolom tambahkan gadget sudah bertambah di bagian footer berarti sudah berhasil menambahkan kolomnya.
Keterangan:
- Untuk mengubah lebar footer silahkan cari width: 960px; dan untuk lebar kolom ditandai dengan width: 23%;, silahkan atur sesuai lebar tampilan blog Anda.
- Jika kolomnya kurang banyak, Anda bisa menambah kolom dengan cara copy kode berikut dan paste sebelum kode <div style='clear: both;'/>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>
Silahkan ganti lowerbar4 menjadi lowerbar5 dan begitu seterusnya jika ingin menambah lagi, jangan lupa atur juga ukurannya supaya sesuai. Sekian tips blogging kali ini tentang bagaimana cara menambah jumlah kolom pada bagian footer blogger.
Advertisemen
Blogging