Cara Menambah Footer 3 Column di Template Blog

Riyan Trevor
0
DI BANYAK CARA - Memodifikasi template untuk mempercantik maupun untuk fungsi lain dengan cara menambahkan kode sudah banyak di share di internet, di artikel ini saya hanya melengkapi dari artikel sebelumnya yaitu Cara Menambah Footer 2 Column dimana sebelum saya menggunakan 2 column footer, dan kemudia saya menggunakan 3 column.


Cara Menambah Footer 3 Column di Template Blog


Cara yang digunakan juga sama dengan cara sebelumnya, berikut "Cara Menambah Footer 3 Column di Template Blog".

1.Login ke Blogger.
2.Masuk ke bagian Template.
3.Kemudian pilih "Edit HTML".
4.Cari kode ]]></b:skin> untuk memudahkan mencarinya gunakan Ctrl+F, letakan kode dibawah ini tepat di atas kode ]]></b:skin>.

#footer-column-divide {clear:both;}

 .footer-column {padding: 10px;}

5.Kemudian cari kode  <div id='footer-wrapper'> atau kode <div class='footer-outer'> gunakan Ctrl+F untuk memudahkan mencarinya, bila tidak ada salah satu kode tersebut maka tinggal tambahkan salah satu kode tersebut tepat di atas <footer class='footer'>.

6.Letakan kode di bawah ini tepat di bawah kode <div id='footer-wrapper'> atau kode <div class='footer-outer'>.

<div id='footer-column-divide'><div id='footer1' style='width: 33%; float:left; margin:0; text-align:left;'><b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/></div><div id='footer2' style='width: 33%; float: left; margin:0; text-align: left;'><b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/></div><div id='footer3' style='width: 33%; float: right; margin:0; text-align: left;'><b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/></div><div style='clear:both;'/></div></div>

Jika ingin mengubah warna background dari footer, mudahnya tambahkan kode yang di tandai dengan warna merah style="backgroud-color: black menjadi

<div id='footer-column-divide' style='background-color: black;'>

Ganti "black" dengan warna yang di inginkan.

Demikian cara menambahkan footer 2 column di blog.
Tags:

Post a Comment

0Comments

Please Select Embedded Mode To show the Comment System.*