Membuat Footer Blog 3 Kolom

Melanjutkan postingan pada Edit Template skalian menambah jumlah posting. Pada bagian footer pada template klasik biasanya hanya terdapat 1 kolom saja, jika anda ingin merubahnya menjadi 3 kolom, silahkan simak cara yang saya tulis ini :

1. Login ke Blogger
2. Masuk ke TATA LETAK --> EDIT HTML
3. Backup template dulu untuk cadangan.
4. Cari kode #footer-wrapper atau yang mirip dengan kode di bawah ini, kalo sudah ketemu delete saja dan ganti dengan kode dibawah ini lagi ke template anda :


/* ----- FOOTER ----- */

#footer-wrapper {
clear: both;width: 100%;
word-wrap: break-word;
overflow: hidden;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background: #0000FF;
border: 1px solid $bordercolor;
}

#footer {
margin: 0px 0px 0px 0px;
padding: 0px 0px 10px 0px;
text-align: left;width: 960px;
color: #000000;
font: $footerTextFont;
line-height: 1.6em;
}

#footer h2 {
margin: 10px 0px 0px 0px;
padding: 3px 0px 3px 0px;
color: #cc0000;
font: $footerTextFont;
}

#footer1 {width:320px;float:left;background:#FFFFFF; padding: 0px;border: 1px solid #cccccc;}

#footer2 {width:320px;float:right;background:#FFFFFF; padding: 0px;border: 1px solid #cccccc;}

#footer3 {width:320px;float:left;background:#FFFFFF; padding: 0px;border: 1px solid #cccccc;}

#footer1 .widget-content {margin:0 .5em 0 ;}

#footer2 .widget-content {margin:0 .5em 0 ;}

#footer3 .widget-content {margin:0 .5em 0 ;}

#footer a { color: #3D81EE; text-decoration: none; }

#footer a:hover { color: #cc0000; text-decoration: none; }

#footer a:visited { color: #3D81EE; text-decoration: none;}

5. Kemudian cari kode :


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

6. setalah menemukan kode diatas, selanjutnya ganti dengan kode dibawah ini :


<div id='footer-wrapper'>
<div id='footer'>

<b:section class='footer' id='footer1' preferred='yes'>
</b:section>

<b:section class='footer' id='footer2' preferred='yes'>
</b:section>

<b:section class='footer' id='footer3' preferred='yes'>
</b:section>

</div>
<div style='clear:both;'/>
</div><!-- end footer-wrapper -->

7. Simpan template, Selesai.

NB : Kode di atas untuk membuat footer 3 kolom.

Selamat Mencobanya, kalau anda sudah ada yang bisa buat jangan protes y, nee khusus buat NewBie seperti saya ...

0komentar:

Leave a Reply

GET UPDATE VIA EMAIL
Dapatkan kiriman artikel terbaru langsung ke email anda!

Infolinks In Text Ads

Related Posts Plugin for WordPress, Blogger...
Your browser does not support frame. Inbox Your Sms

Subscribe via email

Enter your email address:

Delivered by FeedBurner

Get this widget!

Search

  • Archives

Related Posts Plugin for WordPress, Blogger...

Label Cloud


ShoutMix chat widget
ads ads ads ads
515 loyal readers
RSS feed | E-mail