Cara Mudah Menambah Footer di Blogspot

Mungkin sudah banyak yang bahas artikel ini, tapi saya bisa jamin tingkat kemudahan dan keberhasilan 90%. Kenapa saya berani bilang begitu ? ya karena saya juga baru selesai menambahkan footer disalah satu blog saya. Saya akan beberkan Cara Mudah Menambah Footer di Blogspot sebanyak 2,3, atau 4. Sekarang terserah kamu mau pilih yang mana untuk dipasangkan di blog kamu. Berikut demo footer 3 kolom yang  sudah saya tambahkan :

Footer 3 Kolom Blogspot

Tutorial Cara Mudah Menambahkan Footer di Blogspot

    • Login dengan akun blogger kamu terlebih dahulu
    • Pilih Rancangan –> Edit HTML
    • Jangan Lupa Beri centang pada Expand Template Widget 
    • Cari kode  ]]></b:skin> dan letakkan kode dibawah ini tepat diatasnya

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

    • Cari kode seperti seperti berikut :

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

  • Setelah ketemu, tambahkan kode di bawah ini tepat di bawah <b:section class=’footer’ id=’footer’ showaddelement=’yes’/> atau di <div id=’footer-wrapper’> ( jika belum ketemu, mungkin kode seperti ini : <div id=’footer’> )

Jika ingin membuat footer 2 kolom. Gunakan kode ini :

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

Jika ingin footer 3 kolom. Gunakan kode ini :

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

Membuat footer menjadi 4 kolom. Gunakan kode ini :

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

Langkah terakhir adalah menyimpan hasil editan. Selamat mencoba🙂

Posted on March 28, 2013, in Blogspot. Bookmark the permalink. 2 Comments.

  1. I think one of your ads triggered my web browser to resize, you might want to put that on your blacklist.

  2. Hi, i think that i saw you visited my site so i came to “return the favor”.I am attempting to find things to improve my site!I suppose its ok to use a few of your ideas!!

Silakan tinggalkan komentar .. Kami berhak menghapus kata - kata yang berbau pelecehan, intimidasi, bertendensi suku, agama, ras, antar golongan, porno serta spammer, Terima kasih Kerabat Copaz Blog!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: