Membuat 3 Kolom Footer Blogspot
Bagi anda yang bingung dengan tempat blogspot yang sudah penuh dengan gambar dan widget. Anda bisa menambahkan widget baru dengan membuat 3 kolom footer, yang berada di bawah postingan. Caranya juga simple dan mudah sekali.Sebelum melakukan perubahan, biasakanlah anda melakukan backup template. Kemudian ikuti langkah membuat 3 kolom footer berikut ini :
1. Masuk ke Edit Html blogspot anda. Cari kode
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div
<b:section class='footer' id='footer'/>
</div
Atau <div id='footer-wrapper'>
2. Ganti <b:section class='footer' id='footer'/> dengan kode berikut
<div id='footer-column-container'>
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/><!--end footer-column-container-->
<div style='clear:both;'/>
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/><!--end footer-column-container-->
<div style='clear:both;'/>
Jika kode <b:section class='footer' id='footer'/> ini tidak terdapat pada template anda. Langsung saja copy kode di nomor 2 dan paste di bawah <div id='footer-wrapper'>
3. Simpan template. Dan lihat hasilnya melalui page elemen
Semoga bermanfaat.
Berikut ini tips trick
membuat 2 kolom sidebar blogspot
1. Login di blogger
2. Masuk ke dashboard anda, lalu pilih tab layout, kemudian edit html dan centang expand template widget.
3. Cari kode berikut: <div id=’sidebar-wrapper’> . Untuk lebih mudahnya gunakan fasilitas serching pada browser anda atau tekan ctrl + F.
4. Letakkan kode berikut ini bawah kode tadi
<b:section class=’sidebar’ id=’sidebar10’ preferred=’yes’>
<b:widget id=’Followers1’ locked=’false’ title=’Followers’ type=’Followers’/>
</b:section>
<b:section class=’sidebar’ id=’sidebar11’ preferred=’yes’>
<b:widget id=’Profile1’ locked=’false’ title=’About Me’ type=’ Profile’/>
</b:section>
Save dulu hasil kerjaan anda ini
5. Letakkan kode css berikut ini sebelum ]]></b:skin>
.sidebar10 {
float:left;
width:50%;
}
.sidebar11 {
float:right;
width:50%;
}
Selesai dan simpan. Selamat mencoba, semoga bermanfaat.
2. Masuk ke dashboard anda, lalu pilih tab layout, kemudian edit html dan centang expand template widget.
3. Cari kode berikut: <div id=’sidebar-wrapper’> . Untuk lebih mudahnya gunakan fasilitas serching pada browser anda atau tekan ctrl + F.
4. Letakkan kode berikut ini bawah kode tadi
<b:section class=’sidebar’ id=’sidebar10’ preferred=’yes’>
<b:widget id=’Followers1’ locked=’false’ title=’Followers’ type=’Followers’/>
</b:section>
<b:section class=’sidebar’ id=’sidebar11’ preferred=’yes’>
<b:widget id=’Profile1’ locked=’false’ title=’About Me’ type=’ Profile’/>
</b:section>
Save dulu hasil kerjaan anda ini
5. Letakkan kode css berikut ini sebelum ]]></b:skin>
.sidebar10 {
float:left;
width:50%;
}
.sidebar11 {
float:right;
width:50%;
}
Selesai dan simpan. Selamat mencoba, semoga bermanfaat.