Setelah kita membahas beberapa tutorial blogger yang di antaranya ada yang mengenai penambahan Gadget Blogger, maka sekarang kita membahas mengenai cara Menambah Tiga Kolom di Bagian Footer. Apa maksudnya? Maksudnya adalah ketika teman-teman login ke blogger dan langsung mengklik Tata Letak, maka teman-teman akan melihat banyak bagian atau kolom di halaman tersebut (Tata Letak), di mana setiap bagian kolom biasanya ada tulisan Tambah Gadget. Bagaimana teman-teman, sudah jelaskah?
Ya, kalau belum jelas bisa langsung melihat contoh tampilannya berikut ini:
Nah yang di atas itu adalah template yang belum di tambah tiga kolom di bagian footer-nya. Jadi tujuan postingan kali ini adalah agar template di atas menjadi seperti berikut ini:
Dengan adanya tambahan tiga kolom di bagian footer, teman-teman bisa megisinya dengan fitur pengikut, ataupun daftar blog yang dimiliki oleh teman-teman juga forum untuk berlangganan. Selain itu...dengan adanya tiga kolom tambahan di bagian footer ini akan mengurangi jumlah gadget di bagian sidebar dan header. Kenapa harus seperti itu? Seperti yang telah teman-teman ketahui bahwa apabila di bagian sidebar dan header terdapat banyak gadget, maka ini akan mempengaruhi kecepatan loading blognya teman-teman. Bagaimana teman-teman, sudah siap untuk memperaktekkannya?
OK...Seperti biasa
1. Login ke Blogger.
2. Tata Letak >> Edit HTML
3. Centang Kotak Expand Widget Template.
4. lalu cari kode]]></b:skin>, dan letakkan kode berikut ini di ataskode]]></b:skin>
#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}
5. Selanjutnya carilah kode berikut:
6. Lalu letakkan kode berikut ini di bawah kode no.5
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
6. Lalu letakkan kode berikut ini di bawah kode no.5
<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;'/>
<p> <hr align='center' color='#5d5d54' width='90%'/></p>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>
Untuk kemajuan Blog Ini Silahkan isi Kotak Komentarnya Ya.. (For blog development, please fill the following blog comment Pal
0 comment:
:14 :15 :16 :17
:18 :19 :20 :21
:22 :23 :24 :25
:26 :27 :28 :29
:30 :31 :32 :33
:34 :35 :36 :37
:38 :39 :40 :41
:42 :43 :44 :45
:46 :47 :48 :49
:50 :51 :52 :53
:54 :55 :56 :57
:58
Post a Comment