Membuat gadget footer blog
Ada kalanya template yang kita pakai tidak memiliki gadget footer sehingga kita harus memodifikasinya sendiri, tidak seperti template bawaan blogger yang bisa kita tambahkan langsung melalui menu layout pada perancang template. Untuk menambah gadget footer pada template eksternal berikut langkahnya :
1. Copy kode CSS di bawah ini :
#footer-column-divide {clear:both;}
.footer-column {padding: 10px;}
2. Login ke blogger >> Template >> Edit HTML >> Backup template sebelumnya (disarankan)
3. Centang Expand Template Widget kemudian cari (ctrl+f) kode ]]></b:skin> dan tempatkan kode tadi tepat di atasnya.
4. Kemudian cari kode yang mirip ini :
<div id='footer-wrapper'> atau kode <div class='footer-outer'> atau tulisan seperti ini :
dan tempatkan 4 kode script sesuai pilihan di bawah ini tepat di bawah kode footer tersebut.
(Note: Kalau masih tidak ketemu kemungkinan template sobat memiliki struktur coding yang berbeda, tapi jangan patah semangat fokuskan saja pencarian pada kata footer. Pasti ketemu :D)
<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'>
<div class='clear'>
dan tempatkan 4 kode script sesuai pilihan di bawah ini tepat di bawah kode footer tersebut.
(Note: Kalau masih tidak ketemu kemungkinan template sobat memiliki struktur coding yang berbeda, tapi jangan patah semangat fokuskan saja pencarian pada kata footer. Pasti ketemu :D)
Selanjutnya inilah code nya, sesuai kebutuhan :
Kode untuk 1 kolom gadget :
<div id='footer-column-divide'>
<div id='footer' style='width: 100%; float:left; margin:0; text-align:left;'>
<b:section class='footer-column' id='col0' preferred='yes' style='float:left;'>
<b:widget id='Label1' locked='false' title='Kategori' type='Label'/>
</b:section>
</div></div>
Kode untuk 2 kolom 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>
Kode untuk 3 kolom 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>
Kode untuk 4 kolom 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>
Selamat mencoba dan salam blogger.
Disadur dari sumber
0 komentar :
Posting Komentar
Jika anda menyukai artikel di atas silahkan share atau tinggalkan komentar. Mohon maaf, untuk menghindari spam, komentar yang menyertakan live link akan dihapus.