24/01/13

Cara Membuat Footer kolom blog

Cara Membuat Footer kolom blog

Baiklah sekarang saya akan berbagi ilmu lagi, sekarang saya akan memberi tahu tentang
Cara Membuat Footer kolom blog di blogger dengan multi kolom yaitu 2,3, atau 4 kolom
blog ini sering kita temukan saat kita download template dari situs template
atau dari default blogger sendiri dan di sana tidak menyediakan widget pada footer
untik kita menempatkan elemen blog yang kita anggap pantas untuk di taruh di bagian tersebut
dan juga sebagai salah satu optimasi SEO pada loading blog.


baiklah singkat saja, kita langsung saja peraktekan caranya :

1. login ke blog anda.
2. klik "template" kemudian klik "Edit Html"

3. beckup template untuk jaga-jaga,
4. cari code " ]]></b:skin> " caranya Ctrl+f
5. tambahkan code dibawa ini dan letakan di atas code ]]></b:skin>


#footer-column-divide{
clear:both;
}
.footer-column{
padding: 10px;
}

6. cari lagi di find code kira-kira seperti ini

<div id='footer-wrapper'>
<b:section class='footer'id='footer' showaddelement='yes'/>
</div>

atau

<div id='footer'>
<b:section class='footer' showaddelement='yes'/>
</div>

7. setelah ketemu, tambahka code dibawah ini tepat dibawah code " <b:section
class='footer' id='footer' showaddelement='yes'/>
 " atau di " <div id='footer-wrapper'> " 
jika belum ketemu mungkin codenya seperti ini " <div id='footer'> " 

jika ingin membuat footer 2 kolom. gunakan code ini

<div id='footer-column-divede'>

<div id='footer1'style="width:50%;float:left;
margin:0;text-align:left;'>
<b:section class='footer-column'id='col1'
prererred='yes'style='float;/>
</div>


<div id='footer2'style="width:50%;float:left;
margin:0;text-align:left;'>
<b:section class='footer-column'id='col2'
prererred='yes'style='float;/>
</div>


<div style='clear:both;'/>
</div>

jika ingin footer 3 kolom gunakan code ini

<div id='footer-column-divede'>

<div id='footer1'style="width:33%;float:left;
margin:0;text-align:left;'>
<b:section class='footer-column'id='col1'
prererred='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'
prererred='yes'style='float:left;/>
</div>


<div id='footer3'style="width:33%;float:riget;
margin:0;text-align:left;'>
<b:section class='footer-column'id='col3'
prererred='yes'style='float:right;/>
</div>


<div style='clear:both;'/>
</div>

jika ingin menjadi 4 kolom gunakan code ini:


<div id='footer-column-divede'>

<div id='footer1'style="width:25%;float:left;
margin:0;text-align:left;'>
<b:section class='footer-column'id='col1'
prererred='yes'style='float:left;/>
</div>


<div id='footer2'style="width:25%;float:left;
margin:0;text-align:left;'>
<b:section class='footer-column'id='col2'
prererred='yes'style='float:left;/>
</div>


<div id='footer3'style="width:25%;float:riget;
margin:0;text-align:left;'>
<b:section class='footer-column'id='col3'
prererred='yes'style='float:right;/>
</div>



<div id='footer4'style="width:25%;float:riget;
margin:0;text-align:left;'>
<b:section class='footer-column'id='col4'
prererred='yes'style='float:right;/>
</div>



<div style='clear:both;'/>
</div>

8. jika sudah save template, lalu klik page element untuk melihat hasilnya.

sekian cara membuat footer kolom blog, mudah"an bisa menambah ilmu
bagi kalian,
terima kasih..


Tidak ada komentar:

Posting Komentar