Cara Membuat Elemen Baru di Bawah Footer & Outer-Wrapper

Mengapa sebuah elemen baru menjadi sangat penting untuk dibuat? Mengapa pula beberapa elemen ini juga harus dibuat di tempat-tempat tertentu yang sebelumnya tidak pernah tersediakan oleh pembuat desain blog? Sampai seberapa jauh fungsi dan kegunaannya?

Membuat sebuah atau beberapa buah elemen baru harus dilakukan oleh blogger di saat kebutuhan penempatan widget terus bertambah. Widget ini bisa berupa widget dalam bentuk jadi (yang disediakan beberapa situs tertentu termasuk blogger) ataupun widget baru yang kita buat sendiri menggunakan kode HTML yang di simpan melalui Add A Gadget. Mungkin ada suatu pertanyaan lagi? Mengapa tidak secara langsung saja kita masukkan atau simpan kode HTML baru tersebut di "halaman Edit HTML"?

Itulah arti pentingnya sebuah Elemen Baru!
Jika anda menyimpan kode HTML baru langsung di halaman Edit HTML, apabila Kode HTML tersebut berisi teks, maka teks akan selalu terlihat di Page Elements/Elemen Laman. Tentu saja ini akan menjadi gangguan serius bagi kindahan Page Elemen dan juga akan membuat tatanan Page Elements terlihat kacau. Dengan kondisi seperti ini, satu-satunya cara untuk membuat semua halaman dalam blog tetap terlihat rapi dan enak ketika digunakan adalah dengan membuat elemen baru tempat widget tersimpan.

Elemen di bawah footer ini lebih tepatnya berada di bawah outer wrapper (sering disebut juga outer-wrap dan banyak istilah lain) dan tepat di atas tag penutup </body>. Anda bisa melihat di blog ini, dimana beberapa widget yang tidak harus ditampilkan secara menonjol/fulgar bisa kita tempatkan di bagian tersebut (lihat di ujung bawah halaman blog!). Dengan adanya widget baru ini, maka widget footer bisa dimanfaatkan untuk beberapa hal yang "dikhususkan" seperti halnya yang terlihat di bawah. Widget footer ini kita gunakan untuk menempatkan "beberapa hal penting berkaitan dengan identitas blog".

Membuat elemen baru seperti yang telah anda lihat bisa dilakukan dengan sangat cepat dan mudah. Anda tinggal simpan kode CSS dan xHTML di bagian header (Kode CSS) dan di bagian body (xHTML). Jika anda ingin membuatnya, anda bisa mengikuti panduan berikut ini:

• Login ke Blogger
• Setelah Dasbor terbuka, klik Design (Rancangan).
• Kembali klik Edit HTML.
• Lakukan prosedur pengamanan template dengan Back-up Templates.
  • KLIK Download Full Template (Download Template Lengkap).
  • Simpan File Template (berikan nama khusus untuk memudahkan bila diperlukan).
• Edit HTML » klik Expand Widget Templates.
• Cari kode ]]></b:skin>.
• Copy-paste kode CSS dan letakkan di atas kode tersebut.
• Lanjutkan dengan mencari kode </body>.
• Copy paste kode xHTMl dan letakkan tepat di atasnya.
• Silahkan klik "SAVE Templates (Simpan Templates)".
• Buka Elemen Laman (Page Elements) dan periksa hasil pembuatan Elemen Baru!
• Jika Elemen Baru telah terlihat, cobalah untuk menggunakan elemen baru tersebut guna menempatkan widget. Anda bisa mencobanya dengan beberapa teks atau widget!

Kode CSS-1

#bawahfooter, #bawahfooter1 {
       margin:0;
       padding:0;
       text-align:center;
}
#bawahfooter1 {
       background:#111;
       border-top:4px solid #666;
       border-bottom:6px solid #666;
}
#bawahfooter1 widget{
       margin:2px 0;
       background:#333;    
       padding:5px;
}
#bawahfooter1 widget-content img {
       padding: 2px;
       background:#eee;
       border:2px solid #888;
       border-radius:4px;
      -moz-border-radius:4px;
      -webkit-border-radius:4px;   
}

]]></b:skin>

Kode CSS-2

Jika kode CSS-1 telah dilengkapi dengan beberapa kode sebagai pelengkap elemen dan widget, kode CSS-2 merupakan kode CSS untuk penambah elemen baru dalam bentuk polos. Anda bisa menambahkan beberapa kode CSS baru dan xHTML untuk memberi background, border, padding dan margin serta beberapa kode pelengkap yang lain. Silahkan anda pilih salah satu di antara ke dua macam kode CSS ini. Untuk xHTML-nya tidak ada perubahan.

#bawahfooter {
       margin:0;
       padding:0;
       text-align:center;
}
#bawahfooter1 {
       margin:10px 0 10px 0;
       padding:0;
}

]]></b:skin>

xHTML

<div id='bawahfooter'>
<b:section class='bawahfooter1' id='bawahfooter1' showaddelement='yes'/>
</div>

</body>

Tutorial Lain

Slahkan buka tutorial lain yang bisa melengkapi tutorial di blog ini!

• shannenpio cloning
• Tanty Template Modification
• bgsgr Tutorial
• Mas Gitosamin