NEWS
Loading...
  • Posted by : Johanes Djogan 29 Jan 2011

    Trik merubah warna background widget dengan CSS3huft..udah lama ga posting lagi,dikarenakan bentar lagi mau Ujian akhir sekolah+ tes masuk perguruan tinggi di binus.
    pada kesempatan kali ini,saya mau kasih tau cara ganti warna widget blog pada elemen hanya dengan css
    dan ditambah dengan sentuhan CSS3.trik ini juga tidak akan memberatkan blog sobat,karena penggunaan'a pun minim.trik ini bisa membedakan warna background antar widget,misal'a widget followers kamu warna biru,trus widget label/kategori,warna hijau..itu contoh sederhananya.





    langsung aja saya kasih tau cara'a,

    pertama ke rancangan=> elemen halaman pilih widget yg akan diberi background warna,lalu klik edit pada salah satu widget'a

    lalu copy nama widget'a seperti gambar dibawah ini.

    kalau sudah dicopy,langsung ke edit HTML

    kamu paste nama widget yang tadi.misal:

    Followers1

    kamu tambahkan kode #

    jadi seperti ini " #Followers1 " karena menggunakan syntax ID

    selanjutnya,masukan CSS'a

    seperti dibawah ini
    #Followers1 {background:#ffffff;}

    selesai deh,ada background pa salah satu widget..tapi design'a masih biasa aja...

    langkah selanjut'a,kita tambahkan hiasan CSS3

    Border Radius CSS3
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    untuk style lain'a,sobat bisa ambil css'a disini


    jadi'a seperti ini
    #Followers1 {
    background:#ffffff;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;}



    cara diatas,sama untuk widget lain'a,misal nama widget: HTML1,HTML2,BlogArchive1,Profile1,Label1.
    Note:besar/kecil text sangat memperngaruhi keberhasilan trik ini.


    lalu,jika sobat ingin edit judul widget/title pada widget,css'a beda lagi.css'a ditambahkan h2
    menjadi: #Followers1 h2 {isi CSS}

    mau tambahkan hover efek??silakan...

    tinggal tambahkan lagi css'a
    menjadi seperti ini
    #Followers1:hover {isi CSS}

    Selamat mencoba sob,kalau ada yang ingin ditanyakan,jangan lupa kasih komen'a ya!jangan sungkan sob ^^

    { 25 comments... read them below or Comment }

    1. pertama nih sob,,, d tunggu knjungan balik sob

      BalasHapus
    2. template saya sudah ancur dikotak-katik, jadi gak berani lagi hehe..
      kalo saya bisa photoshop, langsung dicoba deh :D hehe..
      nice info, gan !

      BalasHapus
    3. hahaha,kalau ancur,mending ganti template lagi sob ^^

      BalasHapus
    4. Hahaha,ia nih.maklum template msh 3hari,blum sempet ngerubah lg.template yg ini mau saya share lg.rasanya blum cocok dgn blog saya.thanks atas perhatianya sob n_n

      BalasHapus
    5. penasaran lagi nich,
      template barunya kaya apa laig ya??

      BalasHapus
    6. liat kode warnanya gimana ???
      n copy #Followers1 {background:#ffffff;}
      nya bebas ???
      <<<< masi amatir- ^^"

      BalasHapus
    7. hhayy...!!
      kritik Template blogku ya! pliissss
      nih blogku Rachmath.co.cc
      kritik aja dih box komen, PLIS
      ok, trimasih...

      BalasHapus
    8. Belom berhasil tuk widgetku, John...Maklum orang baru!

      BalasHapus
    9. Thanks You Sobt. Sangat menginspirasi. Saya coba dulu yaa

      BalasHapus
    10. Wah ga bisa sobb..selalu ada pesan ini "ID widget baru "#Followers1 {background:#ffffff;}" tak valid untuk tipe berikut: Followers"

      BalasHapus
    11. itu yang bermasalah htmlnya gan ada yg bentrok atau sama.
      yang ini.





      klo bikin dobel,lebih baik,Followers1 ganti jadi Followers2 biar ga bentrok

      Oia,saya ingatkan lagi,trik ini bwt semua widget,bkn cuma bwt Widget Followers

      BalasHapus
    12. yang ini.

      b:widget id='Followers1' locked='false' title='Followers' type='Followers'

      BalasHapus
    13. ahahaha manjur kka trik nya :D
      http://akebtosu.blogspot.com

      BalasHapus
    14. kalau sudah dicopy,langsung ke edit HTML

      kamu paste nama widget yang tadi.misal:

      Followers1....

      yang dimaksud "kamu paste" itu paste dimana gan, kok ga dikasih tau tempatnya?

      BalasHapus
    15. haha.. thanks sobat posting ini sangat membantusaya tunggu psoting selanjutnyamampir ke sini juga ya http://chaone-blog.blogspot.com/

      BalasHapus
    16. aduhhhhh bingung ane bang Jo masangnya gimana itu kode ditaruh dimana yah

      BalasHapus
    17. semoga diupdate lagi tutorialnya, soalnya bikin bingung :D
      pengn nyoba di http://mdr-share.blogspot.com/ tpi bingung mulainya dari mana ahahaha

      BalasHapus

    "Maaf komentar anda tidak akan dibalas, karena blog ini sudah tidak aktif. Terima kasih"

    "Sorry your comment will not be replied, because this blog has been inactive. Thank you"

  • Translate

    Thank you for choosing Blogger Template from Blog Johanes! (*≧∇≦*)

    - Copyright ©DJogzs 2009-2013 - Some Right Reserve. - DJogzs - Powered by Blogger - Designed by Johanes Djogan -