Searching...

Cara Membagi 2 - 3 - 4 Kolom FOOTER Pada BLOGGER | Tips Blogspot | Blog Multi Kolom FOOTER

5:53:00 AM

Cara Membagi 2 - 3 - 4 Kolom FOOTER Pada BLOGGER | Tips Blogspot | Blog Multi Kolom FOOTER
Bagaimana cara membagi Dua Kolom FOOTER ? Namun perlu di ketahui sebelumnya bahwa desain template itu sangat komplek dan menggunakan banyak teknik, agar sobat lebih terfokus maka saya mengambil sampel template magazine yang jika anda ingin mengetahui teknik ini, anda harus terlebih dahulu mendownload nya Disini ]>> dan KBG sarankan jangan pada blog kesayangan sobat tapi buatlah blog percobaan lalu upload template magazinenya, sayang apabila blog yang sobat sayangi jadi berantakan gara - gara jadi bahan percobaan sobat sendiri :

  1. Pertama Login ke blogger

  2. Klik Design ( rancangan )

  3. Klik Elemen Halaman

  4. Klik tab Edit HTML cari kode seperti ini ]]></b:skin> (gunakan F3)

  5. Tambahkan kode dibawah ini diatas kode ]]></b:skin> 

  6. #footer-column-divide { clear:both; } .footer-column { padding: 10px; } Jika sudah cari kode dibawah ini. 

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

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

Tambahkan kode berikut dibawah kode 
<b:section class='footer' id='footer' showaddelement='yes'/> 
---- Atau ----

<b:section class='footer' id='footer' /> 


Catatan!!! Jika sobat tidak menemukan kode <b:section class='footer' id='footer' showaddelement='yes'/> maka tambahkan saja kode berikut dibawah <div id='footer'>


Kode Membuat Footer 4 Kolom
<div id='footer-column-divide'>
<div id='footer1' style='width: 25%; 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: 25%; 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: 25%; float: right;margin:0; text-align: left;'>
<b:section class='footer-column' id='col3'preferred='yes' style='float:right;'/></div>
<div id='footer4' style='width: 25%; float: right;margin:0; text-align: left;'>
<b:section class='footer-column' id='col4'preferred='yes' style='float:right;'/></div>
<div style='clear:both;'/>

</div>


Kode Membuat Footer 3 Kolom : 
<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>


Kode Membuat Footer 2 Kolom : 
<div id='footer-column-divide'>
<div id='footer1' style='width: 50%; 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: 50%; float: left;margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'preferred='yes' style='float:left;'/></div>
<div style='clear:both;'/>

</div>


Kalau sudah klik Save Template. Lalu klik Page Element. Jika berhasil maka hasilnya akan menjadi seperti yang sobat inginkan 2, 3, 4 footer.



MUDAHKAN sobat??? Semoga Posting kali ini bisa bermanfaat kalau masih bingung bisa ditanyakan dibuku tamu, Semoga posting Membagi 2, 3, 4 Kolom Footer ini bisa bermanfaat, jangan lupa tambahkan jaringan teman dikolomblog gratis an dukung KBG dengan memberikan Donasi.

Cara Membagi 2 - 3 - 4 Kolom FOOTER Pada BLOGGER | Tips Blogspot | Blog Multi Kolom FOOTER