Tutorial Dasar Widget Dalam Header

DickeyPic
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:
DickeyPic
#dmhwidgetl{
float: left;
margin-top: 20px;
margin-left: 20px;
width: 100px;
height: 200px;
display: inline;
}
Untuk widget yang sebelah kanan, CSS nya seperti ini:
DickeyPic
#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.
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:
]]></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>
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:
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>
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!
Comments

21 comments:

  1. nah penasaran darii awal..
    di post juga :D

    Thankz om..

    ReplyDelete
  2. pertamaxx gue hahha peace ah om
    anyway mantaps tuh widgetnya lebih tepatnya sih css doang :D awkwkwk tapi anak blogger sekarang neybutnya widget awwwkwk

    ReplyDelete
  3. [Re:Muhammad Arrasyied]
    Iye iye...

    [Re:randy oktaran]
    Emang cuman CSS sih.. tapi diberlakukan ke Add Gadget Blogger..

    [Re:Anemon'z™]
    Iye..

    [Re:Inuzuka_Grend]
    Oh, iya. Woy.. Randy,, gak ada pertamax pertamax an disini... zzzzz

    ReplyDelete
  4. wah markotop

    ijin pakek yah


    #pakek ?

    ReplyDelete
  5. WUIH,..mantap.
    makasi om dah tulis Tutornya

    ReplyDelete
  6. Mantap Bang Dickey. Hehehe. Saya Suka Saya Suka... XD....

    ReplyDelete
  7. [Re:Caesar R.]
    Pake sabun?? Jomblo galau ya?? xD

    [Re:IlhamDcx]
    iye iye,, gak usah sujud sujud juga kali...
    #Plaaak!!!! *GR tingkat dewa

    [Re:™The Darkness Cheater™]
    Jangan suka ama saya, saya udah ada yg punya.. #Eh...

    ReplyDelete
  8. wah, knapa gk dri dulu sich di post bos, q dh terlanjur beli triknya Rama , Duch, tapi gpp lah, mkasih tutornya sob

    ReplyDelete
  9. ^atas
    aduh sayang kali kamu sob XD
    makanya sabar , hahahaha

    ReplyDelete
  10. Dari pertama tama ngeliat DickeyMaru pake tampilan itu saya dah penasaran.. ternyata begitu caranya.. makasih ya kk dickey..

    ReplyDelete
  11. [Re:Anemon'z™]
    Hahaha, gw orangnya gk sabaran sob, jdnya gw pngen tau cpet triknya t, eh rpanya gk sulit2 amad....

    ReplyDelete
  12. bahasanya ALOT (Kurang Dimengerti)

    ReplyDelete
  13. bang kok aku eror galat ya ? apakah ada yg salah taruh ?
    mohon pelurusannya....

    ReplyDelete
  14. ohohhoho mau nurutan gaya template anime ceunah -_-

    ReplyDelete
  15. Akhirnya lu kasih tau dick, wkwkwkwk.., ijin nyoba kapan-kapan :D

    ReplyDelete
  16. hmmm caranya gini yah...
    aduh saya baru tahu ada post ini.. jadi saya dah keburu pakai cara sendiri deh... QQ
    Thanks tutornya kak!
    ----------------------------------
    Visit Back :
    ™ Uchiha Community ™

    ReplyDelete
  17. Nice Post kk
    Visit Back : http://creative-mass.blogspot.com/

    ReplyDelete
  18. nah ini dia yang tak cari" dari dulu, ketemu juga awkkwkwk :v

    @4th96

    ReplyDelete
Related posts
Guestbook
Author
Other


© 2008 - 2016 DickeyMaru
Blogger Template Win 8 design by Dark Ard from DeezClan | All rights reversed.
  • Post
  • Comments
  • Related
  • Guestbook
  • Author
  • Other