Sabtu, 13 Februari 2010

Trik Blog membagi footer menjadi 3 kolom widget

Posted by Dennis Rvindo 11.19, under | 3 comments

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>
/* -------------- * 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'>&#160;</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.

3 komentar:

keren

Terimakasih Atas Kunjungan Sobat

Halo,,kunjungan malam2 nih mas,,
keren euy..

Terimakasih Atas Kunjungan Sobat

kq nggak kerja mas....

Terimakasih Atas Kunjungan Sobat

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..

Tags

Music on

Blog Archive

Sponsor