Cara Menambah 3 Kolom dibawah footer blog || Dhani's Blog
Selamat siang sahabat blogger,mungkin ada yang mengatakan cara ini tidak perlu namun kadang kadang saat kita tidak tahu harus diletakkan dimana lagi widget yang pantas,kadang footer lah pilihan terkhirnya,,tetapi kadang kadang ada template yang tidak menyediakan kolom untuk footer sehingga tidak leluasa untuk meletakkan widget di footer,artikel kali ini akan membahas tentang cara menambah 3 kolom dibawah footer.
nikmati tutorialnya gan :
1. Seperti biasa Login ke blog sobat terlebih dahulu.
2. Klik Template > Edit HTML > beri centang Expand Template Widget
3. Cari code ]]></b:skin> untuk mempercepat gunakan Ctrl+f
4. Copy code di bawah ini lalu letakkan tepat di atas code ]]></b:skin>
#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}
5. Selanjutnya cari code <div id='footer'> atau id='footer'
6. Lalu copy lagi code di bawah ini letakkan tepat di bawah code <div id='footer'> atau id='footer' tadi
<div id='footer-column-container'>
<div id='footer2' style='width: 30%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 40%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 30%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col3'
preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
<p>
<hr align='center' color='#ffae00' width='90%'/></p>
<div id='footer-bottom' style='text-align: center; padding:
10px; text-transform: lowercase;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>
setelah itu save template.
untuk melihat hasilnya silahkan masuk ke tata letak,lalu lihat dibagian footer,jika ada 3 kolom kosong berarti proses nya berhasil,
oke,,selamat mencoba gan !!
semoga berhasil !!
0 comments:
Post a Comment