Membuat 2 Kolom Sidebar Blogspot
Template bawaan blogspot biasanya secara default hanya memliki sidebar
dengan 1 kolom. Untuk lebih mempercantik sidebar blogspot anda bisa
dengan cara membuat 2 kolom sidebar blogspot. Dengan sidebar yang
mempunyai 2 kolom, anda akan lebih bisa berkreasi lagi untuk
menambahkan widget-widget baru di dalamnya. Anda bisa menambahkan
sendiri denagn mengubah kode xml template blogspot. Namun jika anda
merasa kesulitan, bisa juga anda mencari template yang lain yang sudah
mempunyai 2 kolom sidebar. Contoh 2 kolom sidebar blogspot seperti ini :
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
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
0 komentar: