Membuat Elemen Footer untuk Tambah Gadget

Beberapa template memang tidak menyertakan Elemen Footer yang bisa dimanfaatkan untuk menyimpan widget melalui Add Gadget/tambah gadget. Kadang kala bagian footer hanya menggunakan sebuah DIV dengan nama id='footer' atau dengan nama lain. Pada template yang tidak menggunakan elemen footer, penulisan teks dan link (xHTML) langsung di tulis dan disimpan melalui "Edit HTML", pada bagian terbawah template di atas </body>. Penyimpanan secara langsung di Edit HTML seperti ini membuat blogger kurang leluasa untuk berimprovisasi. Membuat sebuah elemen baru menjadi jalan tengah untuk lebih mempermudah dan lebih memperluas kegunaan footer. Untuk membuat sebuah elemen tersendiri yang membuat kita bisa menyimpan teks, link dan beberapa yang lain seperti image dengan memanfaatkan "Add Gadget" di "Page Elements/Elemen Laman", maka kita harus membuat sebuah kode HTML baru yang berupa kode CSS dan xHTML. Untuk kode CSS sampeyan bisa memanfaatkan kode CSS yang telah ada atau bisa juga menggunakan kode CSS yang baru.

Buat Elemen Footer dg Memanfaatkan Kode CSS bawaan template

Apabila kita menggunakan kode CSS yang sebelumnya telah ada di template, maka kita hanya perlu sedikit menambahkan kode CSS baru. Bagaimana mengetahui kode CSS yang dipergunakan sebagai kode CSS untuk footer?

Untuk memastikan dengan cepat dan tepat, kita harus membuka template dan langsung menuju bagian terbawah template. Di atas tag penutup body (</body>) akan terlihat kode HTML yang berisi link dan si pembuat template. Kode akan berbentuk seperti ini (meskipun tidak selalu sama persis).

<div id='footer-wrapper'>
<a href='http://gubhugreyot.blogspot.com'>GR</a> | Edited by <a href='http://gubhugreyot.blogspot.com' title='gubhug reyot'> | gubhug reyot</a>

</div>

Biasanya yang dipergunakan tidak hanya berupa id='footer-wrapper' saja, tetapi bisa juga menggunakan nama yang lain seperti :id='footer', id='credit', id='bawah-wrap', id='footer-wrap' atau nama-nama yang lain.
Kode dalam bentuk lain bisa saja melibatkan satu atau beberapa buah tag di bagian dalamnya seperti contoh berikut:

<div id='footer-wrap'>
<div class='footer'>
<p><a href='http:// ...... dst'>gubhug reyot</a> | by | <a href='http//...'>Gombal Template</a></p>
</div>
</div>

Diatas kode ini terdapat beberapa kode yang biasanya seperti berikut:

<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'>&#160;</div>
</div> <!-- end content-wrapper --> 
</div></div> </div><!-- end outer-wrapper -->

Setelah kode seperti di atas diketemukan (misalnya div id='footer-wrap'), maka kita akan tambahkan kode CSS baru yang berbentuk seperti ini (letakkan kode di atas kode ]]></b:skin>).

#footerdalam {
      padding: 15px 10px;
      min-height:20px;
}
#footerdalam .widget {
      font-size: 12px;
      line-height: 18px;     
}

Gunakan kode berikut untuk menggantikan kode yang di atas tadi (ingat dari atas tai kita sudah umpamakan pakai id="footer-wrap!).

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

Posisi kode kira kira akan seperti ini :

</div> <!-- end content-wrapper --> 
</div></div> </div><!-- end outer-wrapper -->

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

</div></div> <!-- end outer-wrapper -->
</body>

Simpan kode dengan KLIK "SAVE Templates/Simpan Template"!

Buat Elemen Footer dg Kode CSS Baru

#palingbawahwrap {
      padding: 0;
      margin: 0;
      border-top:4px solid #222;
      border-bottom: 1px solid #222;
}
#palingbawah {
      background: #fff url(http://i964.photobucket.com/albums/ae124/gubhugreyot/gantiny/bluegradV358H3.png) left bottom repeat-x;
      min-height: 35px;
      padding: 15px 10px;
      margin: 0;
}
#palingbawah .widget {
      margin: 0; 
      padding:0;
      color: #eee;
}

Simpan kode CSS di atas ]]></b:skin>.
Simpan xHTML berikut untuk menggantikan xHTML yang seperti pada cara pertama (seluruh kode HTML dimulai dari <div id='footer-wrap'> hingga tag penutupnya (</div>).

<div id='palingbawahwrap'>
      <b:section class='palingbawah' id='palingbawah'/>
</div>

Catatan:

• Bila ingin menambahkan width pada CSS Baru, tambahkan pada syntax:
  #palingbawahwrap { width: ....px; }. Gunakan width dengan nilai sama seperti yang terdapat kode CSS template di syntax header-wrapper, outer-wrapper atau footer-wap.
• Rubah background untuk disesuaikan dengan blog yang digunakan.
• rubah warna font jika diperlukan (#eee).
• Lakukan back-up template terlebih dahulu sebelum melakukan segala bentuk perubahan di template. Lebih detail tentang back-up template dan cara cepat cari kode HTML di template bisa di buka di Special Tutorials (menu sebelah kiri).

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

• 
• 

» Happy Blogging - gubhugreyot «