Iklan

Penataan ulang

Sedang dalam penataan ulang. Silahkan nikmati dan bila ada yang kurang berkenan mohon maaf!

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!

1 14 komentar:

Hengki Pramanadoni said...

wAh terimakasih mas salut buat anda !!
jangan lupa kunjungi juga blog saya..
http://hengkiyahoo.blogspot.com

Nto said...

maksih tutorialnya gan

mampi ksini gan :D

7zilla.blogspot.com

Daniel Shahab said...

kalo buat ny kesebelah kiri apa e yg harus diganti bang ?

mampir jg ke blog ane bang, dibimbing maksud e .
jgn di hina ! hhaha

Purwa Sedana Rawks said...

manapp

purwa-sedana.blogspot.com

Tehnik pemula said...

thankss tutorialnya mas...
ada tutorial artikel terkait seperti punya sampean gak? jika ada kirim linknya dunk..
sekedar info buat teman2 blogger .
silahkan berkunjung di blog dofollow auto backlink
http://www.rajcolek.co.cc
http://www.cara2.co.cc

Happy said...

OUEMJI ini yg dr kmaren aqw cari2, nice info tetangga !!!

Unknown said...

dari dulu ane emang suka tulisan dari gubug reyot niii cool abies

Unknown said...

mantap postingan nya...
makasih, sangat bermanfaat.. :)

Unknown said...

terimakasih tutorialnya sangat membantu


silahkan berkunjung pada :

Informasi Lowongan Kerja Terbaru

Film-Film Terbaru free

Raka kisdiyatma99 said...

mksh ya . kunjungi i blog q jga ya.. n bantu2 edit blog q y raka-kisdiyatma99.blogspot.com

Unknown said...

terima kasih bimbingannnya..

http://kowandy.blogspot.com

Unknown said...

sukses gan..udah ane coba

Unknown said...

gan gimana caranya kalau footer di atas menjadi 3 kolom,
mohon pencerahannya

Unknown said...

Terima kasih kak.. tutorialnya

MIFTAH 007

Post a Comment

 

ujung bawah

gubhug reyot
Add to Technorati Favorites
Search Engine Optimization SEO