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