Saturday, March 17, 2012

Cara Mengatur Posisi Widget Di Header

Assalamualaikhum wr.wb
Kali ini saya menemukan sebuah masalah yg cukup serius.Salah satunya yaitu masalah ttg widget di header.
Banyak yang serba bingung dalam mengatur posisi widget diheader. #masalah serius yah ?
Terkadang posisi widget nya gak pas lah,gak rata kiri lah,gak rata kanan lah,dan masih banyak lah pokoknya.
Ok,untuk ini saya punya penangkalnya,agar widgetnya selalu bisa diatur diposisi yg rapi dan sesuai
Untuk itu langsung simak saja tutorialnya dan perhatikan baik baik..

Sebenarnya permasalahan seperti ini hanya berasal dr... ? Maaf, kalau boleh saya bicara sedikit...,sebenarnya permasalahan yg membuat widget diheader, yg membuat widgetnya tidak rata sana sini, permasalahnnya hanya pada Margin saja.Ya,hanya pada itu saja,tidak ada yg lain kok ..
Masih bingung dengan perkataan saya yg satu ini ? Ok,akan saya beri tau sedikit cara pengaturannya
Ini contoh script CSS widget header punya saya :

#caesarglow {float: left; margin:-140px 0 0 0;margin-left:501px;position:relative;color :#790808;word-wrap: break-word;overflow: hidden;display:block;z-index:+1000;}
#caesarglow ul {padding-left:5px;margin-left:0px;}
#caesarglow li {margin: 0px;list-style-type: none; font-size: 11px;font-weight:normal;padding:2px 0px 3px 0px;}
Nah,yang saya beri blok biru itu lah maksudnya, yang harus sobat atur.
  • Untuk margin:-140 : Code ini berfungsi untuk mengatur posisi widget bergeser atas dan bergeser bawah.Coba saja untuk mengurangi atau menambahkan angkanya lalu pratinjau,dan apakah bergeser ?
  • Dan untuk margin-left:501 : Code ini berfungsi untuk mengatur posisi widget bergeser ke kanan #lihat tulisan margin-left nya yang berarti kemungkinan widgetnya bergeser kekanan,semakin besar kita mengubah angkanya,maka semakin besarlah pergeserannya kenanan.
  • Margin-left:angka px; = code yang membuat widget bergeser kekanan jika semakin besar angka yang kita tambahkan
  • Margin-right:angka px; = code yang membuat widget bergeser kekiri jika semakin besar angka yang kita tambahkan

  • Dan Float:left; nya,code ini berfungsi sebagai tata letak widget.Left yang berarti tata letak widgetnya disebelah kiri,dan jika tulisan left diubah menjadi right,maka tata letak widget akan berubah posisi menjadi kanan.Tapi jika di gabungkan dengan margin,margin-left,margin-right, maka akan berbeda lah ceritanya :D
Biar lebih cocok,pasangan CSSny saya sarankan seperti ini

  • Untuk tata letak widgetnya di posisi kiri = Float:left; berpasangan dengan Margin:angka px; dan margin-left:angka px;

  • Untuk tata letak widgetnya diposisi kanan = Float:right; berpasangan dengan margin:angka px; dan margin-right:angka px;
Jadi,jika pasangannya seperti ini,sobat jadi gampang untuk mengatur posisinya.Sisanya sobat edit sendiri yah.
Semoga tutor ini dapat membantu sobat yang kesulitan dalam mengatur posisi widget diheader XD


NB: Maaf penjelasaannya jika kurang jelas untuk sobat dikarenakan saya sedang galau dalam menulis artikel ini XD
Dan tambahan lagi,jika berhasil triknya comment dibawah yah,dan jika masih belum mengerti,comment juga dibawah,wkwkwkwk.

Comments
13 Comments

Lihat,siapa siapa saja yang berkomentar dibawah ini *bukan diatas ._."

  • Wkwkwkkwkwkkwkwkwkw Lagi Galau Tuh Caesar I Like This

  • wkekeke, Padahal semalem mau bertanya, tapi ga jadi
    ## ehh tw" di share, mantap lah sob ^.

  • @Rafi : wkakakakak , yaa begitulah, XD
    @komaruddin : hehehe,semoga berhasil yah dg trik yg satu ini hehe XD

  • Anonymous

    Yah Numpang penuhin comment aja ya XD

  • loh kok galau gan? jangan sampai artikelnya berantakan ckckc :D
    visit me ya gan http://nawi-van.blogspot.com

  • Nice Share bang

    Visit back ya bang http://hereday-syndicate.blogspot.com/

  • Gan kalo menggeser widgetnya ke atas gimana...
    Comment Back... Please.....

  • Taqin Namikaze : Baca pada titik 1 gan, yang ini :

    Untuk margin:-140 : Code ini berfungsi untuk mengatur posisi widget bergeser atas dan bergeser bawah.Coba saja untuk mengurangi atau menambahkan angkanya lalu pratinjau,dan apakah bergeser ?

  • Baca Peraturan Sebelum Berkomentar :


    - Dilarangkan untuk menulis atau mengisi komentar yang berbentuk SPAM

    - Dilarangkan untuk menulis atau mengisi komentar yang berhubungan dengan SARA

    - SOPAN dalam berkomentar

    - Dilarangkan mabuk dalam agama *gak nyambung

    - Selalu waspada saat berkendara * hampir parah

    - Orang pintar, minum tolak angin *semakin parah

    Baca Yang Ini :

     
    CaeSparta ™ | Layout Dari Blogger | Didesign Oleh Caesar Rendra | Sedikit Terinspirasi Dari Lupa Siapa xD | Sebuah Inspirasi Menjadi Kreatifitas

    Warning !!

    This Is Sparta.. !!