Ngeposting tutor ini aku belum ijin ke
Jereyz ataupun
Dickeymaru 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 2 widget di dalam header Saya.
Code Widget "1" :
#ZACKwidgetc{
float: left;
margin-top: 30px;
margin-bottom: 20px;
margin-left: 20px;
width: 110px;
height: 264px;
display: inline;
background: rgba(255, 255, 255, 0.7);
border: 3px solid #F60;
border-radius: 20px;
}
#ZACKwidgetc h2 {
text-align:center;font-family:Russo One;color:#ff9400;text-shadow: 0 1px 0 #000, 0 2px 0 #000, 0 3px 0 #000, 0 4px 0 #000, 0 5px 0 #000, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25);
Code Widget "2(Kolom Lebar)" :
#ZACKwidgetr{
float: left;
margin-bottom: 20px;
margin-left: 10px;
margin-top: 30px;
margin-right: 30px;
width: 450px;
height: 264px;
display: inline;
background: rgba(255, 255, 255, 0.7);
border: 3px solid #F60;
border-radius: 20px;
}
#ZACKwidgetr h2 {
text-align:center;font-family:Russo One;color:#ff9400;text-shadow: 0 1px 0 #000, 0 2px 0 #000, 0 3px 0 #000, 0 4px 0 #000, 0 5px 0 #000, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25);}
Simpan Kedua Kode Tersebut Di Atas
]]></b:skin>,,,Kemudian Save,,Terus Cari Kode "
<div id='header-wrapper'>"Dan Copy Code Dibawah Ini,,Dan Akan Menjadi Kayak Kode Di Bawah ^_^
<div id='header-wrapper'>
<b:section id='ZACKwidgetl' maxwidgets='5' showaddelement='yes'>
</b:section>
<b:section id='ZACKwidgetc' maxwidgets='5' showaddelement='yes'>
</b:section>
<b:section id='ZACKwidgetr' 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).
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:
ZACKwidget1
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='ZACKwidget1' maxwidgets='1' showaddelement='yes'>
</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!
Sumber :
Zackmaru™-Just For Share
Belum ada tanggapan untuk "Trick Menambahkan Widget Dalam Header"
Posting Komentar