Footer- Tips Blogger kali ini berkaitan dengan Footer. Seperti yang anda tahu Footer biasanya untuk memasang tempat satu lagi di bawah tepat di paling bawah halaman blog, contohnya seperti gambar di atas ini. Biasanya ada footer pada template bawaan dan ada yang tidak, perbedaan itu membuat yang tidak mempunyai footer menjadi iri, karena itu saya membuat artikel ini.
Cara ini bisa dianggap mudah bagi blogger yang berpengalaman, dan bisa sulit untuk yang belum perpengalaman, karena cara kali ini memakai kode HTML, saya akan memakai petunjuk gambar dan tulisan secara jelas.
Ikuti Langkah-langkah di bawah ini:
1. Masuk ke Dasbor
2. Pilih blog yang ingin dipasang footer
3. Pilih Template
4. Klik Edit HTML
5. Klik Expand Template Widget
6. Copy kode berikut dan letakan tepat di atas
]]></b:skin>#footer-column-divide {
clear:both;
}
.footer-column {
padding: 10px;
}
7. Selanjutnya cari kode
<div id='footer-wrapper'> atau kode
<div class='footer-outer'>
(jika tidak ketemu fokuskan pada kata footer di paling bawah kode HTML)8.Pilih salah satu kode berikut lalu Letakan kode berikut di bawah kode <div id='footer-wrapper'> atau kode
<div class='footer-outer'>Script untuk menambah 2 kolom add gadget:<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>
Script untuk menambah 3 kolom add gadget:<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>
Script untuk menambah 4 kolom Add Gadget: <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>
7. Klik Simpan Template
Hasilnya pada tata letak akan seperti ini.
Pada Blog Hasilnya akan seperti ini.
Bagus Bukan?
Bagi yang ingin bertanya silahkan tanyakan di kotak komentar di bawah artikel ini. Keyword:cara cepat bikin blog
tutorial membuat template
cara membuat template pada blog
cara membuat gadget pada blog
cara menambahkan template pada blog
menambah widget pada blog
cara membuat teks
Footer
Pada Blogger
Artikel keren lainnya:
Belum ada tanggapan untuk "Cara Membuat Widget Footer Pada Blogger"
Post a Comment