Trik Blog membagi footer menjadi 3 kolom widget
Trik blog yang satu ini sangat berguna dan efisien, yaitu mencoba membagi footer menjadi 3 kolom. Sehingga, akan bisa menambahkan widget-widget baru di bagian footer blog. Dari yang semula hanya 1 menjadi 3, benar-benar akan sangat membantu.
Biasanya, ada beberapa template yang defaultnya sudah dieditkan oleh pembuat template tersebut, namun bagi yang belum, bisa mencoba trik ini . . .
Tampilan 3 kolom footer kurang lebih seperti ini
(Mungkin akan berbeda sesuai dengan template masing-masing)
Updated Code, karena yang lama gak jalan. Code yang sekarang yang fresh. Silakan dicoba
Untuk membuatnya cukup mudah kok, ikuti langkah-langkah berikut :
1.Log in ke account blog - layout/tata letak - edit html. (Untuk keamanan download full template ke folder komputer)
2.Cari kode sebagai berikut ]]></b:skin>
3.Copy kemudian paste kode di bawah ini di atas ]]></b:skin>
6.Click save
Untuk melihat hasil yang didapatkan, click pada layout - page elements. Perhatikan bagian bawah / footernya. Akan terlihat perubahannya. Selamat mencoba, trik ini digunakan pada blog saya dan berhasil. Jika ada kesulitan, tinggalkan komentar.
Trik blog yang satu ini sangat berguna dan efisien, yaitu mencoba membagi footer menjadi 3 kolom. Sehingga, akan bisa menambahkan widget-widget baru di bagian footer blog. Dari yang semula hanya 1 menjadi 3, benar-benar akan sangat membantu.
Biasanya, ada beberapa template yang defaultnya sudah dieditkan oleh pembuat template tersebut, namun bagi yang belum, bisa mencoba trik ini . . .
Tampilan 3 kolom footer kurang lebih seperti ini
(Mungkin akan berbeda sesuai dengan template masing-masing)
Updated Code, karena yang lama gak jalan. Code yang sekarang yang fresh. Silakan dicoba
Untuk membuatnya cukup mudah kok, ikuti langkah-langkah berikut :
1.Log in ke account blog - layout/tata letak - edit html. (Untuk keamanan download full template ke folder komputer)
2.Cari kode sebagai berikut ]]></b:skin>
3.Copy kemudian paste kode di bawah ini di atas ]]></b:skin>
/* -------------- * FOOTBAR * ------------------- */
#footbar { margin-top:15px; padding:7px; background:$footbarbgcolor; border:1px solid $footbarbdcolor}
#footbar-a { float:left; width:310px }
#footbar-b { float:left; margin-left:17px; width:310px }
#footbar-c { float:right; width:310px }
#footbar .widget { background:none }
#footbar .widget h2 { background-color:#56caca; }
#footbar .widget-content { background:transparent }
4. Selanjutnya, cari kode ini <b:section class='footer' id='footer' preferred='yes'/> . Bila tidak ketemu gunakan ctrl + f ketikkan footer dan cari kode yang mirip.
5. Copy kemudian paste kode di bawah ini di atas kode <b:section class='footer' id='footer' preferred='yes'/>
<div id='footbar'>
<div class='clear'> </div>
<div id='footbar-a'>
<b:section class='footbar-div' id='footbar-1' preferred='yes'>
</b:section>
</div>
<div id='footbar-b'>
<b:section class='footbar-div' id='footbar-2' preferred='yes'>
</b:section>
</div>
<div id='footbar-c'>
<b:section class='footbar-div' id='footbar-3' preferred='yes'/>
</div>
</div>
6.Click save
Untuk melihat hasil yang didapatkan, click pada layout - page elements. Perhatikan bagian bawah / footernya. Akan terlihat perubahannya. Selamat mencoba, trik ini digunakan pada blog saya dan berhasil. Jika ada kesulitan, tinggalkan komentar.
2 komentar:
Halo,,kunjungan malam2 nih mas,,
keren euy..
kq nggak kerja mas....
Posting Komentar
Setiap komentarmu akan sangat berarti sekali buat blog ini agar bisa menjadi lebih baik untuk kedepannya, trima kasih udh berkomentar di blog ini..