Posted by : Unknown
Rabu, 06 Februari 2013
Ngeposting tutor ini aku belum ijin ke Tobi Bakero ataupun Ghee Ghorl loh! Yang sudah ngajarin untuk buat Widget Di Dalam Header
Ah sudah lupakan. Udah banyak yang pakai juga. Aku juga gak mau
dikejar-kejar anak-anak blogger terus buat nanya tutorial ini. Tutorial
membuat widget dalam header. Saya hanya memberikan konsepnya, selanjutya
silahkan di atur sendiri. Contohnya seperti ini, ada 3 widget di dalam
header.
Perhatikan yang berwarna MERAH, KUNING, dan HIJAU. Untuk widget yang sebelah kiri, CSS propertinya seperti ini:
Jika widget tersebut ada disebelah kiri, maka kita cukup mengatur batas sisi kiri dengan tepi header saja, atau margin-left. Begitu sebaliknya kalau sebelah kanan ya margin-right. Kalau widget yang tengah? Terserah aja, boleh pilih float left atau right. Yang penting sesuaikan, float dan margin harus sama. Jika float left, ya pakai margin-left. Kalau float right ya pakai margin-right.
#dmhwidgetl{
float: left;
margin-top: 20px;
margin-left: 20px;
width: 100px;
height: 200px;
display: inline;
}
Untuk widget yang sebelah kanan, CSS nya seperti ini:
float: left;
margin-top: 20px;
margin-left: 20px;
width: 100px;
height: 200px;
display: inline;
}
#dmhwidgetr{
float: right;
margin-top: 50px;
margin-right: 30px;
width: 150px;
height: 150px;
display: inline;
}
Intinya, kodenya sama, hanya saja kita ubah float saja. Jika widget itu
di sebelah kanan, maka value float nya adalah right, kalau sebelah kiri
ya isi saja left.float: right;
margin-top: 50px;
margin-right: 30px;
width: 150px;
height: 150px;
display: inline;
}
Jika widget tersebut ada disebelah kiri, maka kita cukup mengatur batas sisi kiri dengan tepi header saja, atau margin-left. Begitu sebaliknya kalau sebelah kanan ya margin-right. Kalau widget yang tengah? Terserah aja, boleh pilih float left atau right. Yang penting sesuaikan, float dan margin harus sama. Jika float left, ya pakai margin-left. Kalau float right ya pakai margin-right.
#dmhwidgetc{
float: right; /* Boleh diisi left atau right */
margin-top: 200px;
margin-right: 200px; /* sesuaikan / samakan dengan isi float diatas */
width: 448px;
height: 68px;
display: inline;
}
Lebar dan tinggi sesuaikan sendiri. Width itu lebarnya, height itu tinggi widgetnya. Bisa kalian modifikasi sesuka hati. Semua kode CSS diatas masukkan diatas kode:
float: right; /* Boleh diisi left atau right */
margin-top: 200px;
margin-right: 200px; /* sesuaikan / samakan dengan isi float diatas */
width: 448px;
height: 68px;
display: inline;
}
]]></b:skin>
Lalu untuk membuat header modifikasinya, cari kode:
Template kalian.
<div id='header-wrapper'>
Jika kode tersebut tidak ditemukan, berarti kodenya beda. Intinya cari
kode header dan hapus! (tapi CSS headernya biarin aja). Lalu hapus
elemen terebut beserta yang ada di dalamnya. jadi dari awal <div
id='header-wrapper'> sampai penutupnya </div> kalian hapus
semua. Ganti dengan kode dibawah ini:
<div id='header-wrapper'>
<b:section id='dmhwidgetl' maxwidgets='5' showaddelement='yes'>
</b:section>
<b:section id='dmhwidgetc' maxwidgets='5' showaddelement='yes'>
</b:section>
<b:section id='dmhwidgetr' maxwidgets='5' showaddelement='yes'>
</b:section>
</div>
Misalkan kode header-wrapper tidak ditemukan, cari kode header, kamu
copy isi class atau id nya, lalu ubah text header-wrapper dengan class
atau id dari header yang kamu temukan tadi. (Jika kodenya beda, kalau
header-wrapper sudah ketemu ya gak usah).<b:section id='dmhwidgetl' maxwidgets='5' showaddelement='yes'>
</b:section>
<b:section id='dmhwidgetc' maxwidgets='5' showaddelement='yes'>
</b:section>
<b:section id='dmhwidgetr' maxwidgets='5' showaddelement='yes'>
</b:section>
</div>
Template kalian.
Biasakan BackUp Template
sebelum memodifikasi template. Buat jaga-jaga nanti kalau templatenya
rusak. Untuk background, border, dan lain-lain silahkan ditambahin
sendiri.
Untuk mengatur posisinya, kan tinggal ganti margin nya saja, angkanya kalian rubah sendiri, sampai benar benar pas. Perhitungannya udah pas, tapi posisinya masih nggak tepat? Ya perkirakan ubah-ubah lagi sampai pas, punyaku juga gitu kali.
Ingin menambah widget lagi di dalam header? Copy saja kode CSS diatas, hanya yang berwarna biru kamu ganti menjadi:
dmhwidget1
Trus buat kode seperti dibawah ini di dalam kode widget widget header
tadi, silahkan dissuaikan sendiri posisinya, setelah kode yang widget
sebelah kiri atau yang mana, coba dikira-kira sendiri dan dicoba-coba
sendiri:
<b:section id='dmhwidget1' maxwidgets='1' showaddelement='yes'></b:section>