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:
#dmhwidgetl{
float: left;
margin-top: 20px;
margin-left: 20px;
width: 100px;
height: 200px;
display: inline;
}
float: left;
margin-top: 20px;
margin-left: 20px;
width: 100px;
height: 200px;
display: inline;
}
Untuk widget yang sebelah kanan, CSS nya seperti ini:
#dmhwidgetr{
float: right;
margin-top: 50px;
margin-right: 30px;
width: 150px;
height: 150px;
display: inline;
}
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.
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.
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;
}
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:
]]></b:skin>
Lalu untuk membuat header modifikasinya, cari kode:
<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>
<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).
Simpan 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>
</b:section>
Mau nambah lagi? ya buat lagi, tapi angka 1 diatas ubah menjadi angka 2, dan seterusnya jika mau nambah widget.
Gak ngerti? Masih gak mudeng? Gak ngerti CSS? Ya derita loe. Di google banyak tutorial CSS kenapa gak dipelajarin... Masa mau dibantu terus, kapan nih mau belajar? Aku minta jangan sms ataupun kirim pesan di Facebook lagi untuk nanya soal trik ini, nih sudah aku psting script dasarnya, selanjutnya silahkan gunakan kreatfifitas kalian sendiri bagaimana mengaturnya!
RSS Feed (xml)
