21 November 2011

Membuat Background Sidebar Dengan Warna Berbeda

Keuntungan cara ini adalah kita dapat membuat tampilan gadget yang unik, berbeda setiap gadget . Pada cara ini, ada 3 komponen gadget yang harus diketahui yaitu; Kotak Luar Gadget, Judul Gadget, Isi Gadget. Dari ketiga komponen tersebut, masing-masing dapat diberi background, apakah itu backround warna atau background gambar.



Langkah-langkahnya sebagai berikut;
Kenali terlebih dahulu ID gadget yang akan diubah. Caranya,
  • Login ke Blogger.
  • Pilih Rancangan.
  • Pilih Edit HTML
  • Jangan di centang Expand Template Widget biar tidak muncul kode-code yang bejibun..hehehe.
misal kita akan edit pada Gadget Follower, arahkan mouse pada kode HTML template Anda yang paling bawah, disitu akan tampak ID gadget Anda kira-kira seperti ini;

<b:widget id='HTML4' locked='false' title='Artikel Terkait Lainnya' type='HTML'/>
<b:widget id='Label1' locked='false' title='Label' type='Label'/>
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>
<b:widget id='Followers1' locked='false' title='Pengikut' type='Followers'/>
 

yang berwarna merah adalah ID gadget-nya.
Misalkan kita edit background untuk Follower, langkah selanjutnya kita buat Kode CSS untuk memasang background gadget. Buatlah kode seperti  berikut;

#Followers1 {
Background : #009933;
}

#Followers1 h2{
Background : #0000FF;
}

#Followers1 .widget-content{
Background : #FF0000;
} 

Hijau Kode untuk Kotak Luar Gadget
Biru Kode untuk Judul Gadget
Merah Kode untuk Isi Gatget

Ini juga berlaku untuk semua gadget sampeyan, tinggal mengganti ID Gadget.
Jika ingin menggunakan backgroud gambar, silahkan ganti kode warna dengan  kode URL gambar, contoh penulisannya seperti di bawah ini:

#Followers1 {
Background : url(http://URLgambar) no-repeat;
}

#Followers1 h2{
Background : url(http://URLgambar) no-repeat;
}

#Followers1 .widget-content{
Background : url(http://URLgambar) no-repeat;
} 

Jika sampeyan sudah selesai membuat kodenya, kemudian tempatkan kode tersebut  di atas kode ]]></b:skin>
Langkah Terakhir Klik Simpan Template. dan lihat hasilnya.

NB; Sampeyan bisa berkreasi sesuai dengan keinginan sendiri.



Author : Zainoel Arifin Isa'i

Ketika aku tidak nongkrong di warung kopi atau menyusuri hutan atau juga mendaki gunung, aku sibuk menjadi tukang desain lepas/ freelance yang bermarkas di sudut ruang kamar belakang rumah di daerah pelosok desa terpencil lereng gunung Arjuno.... Facebook : -Mbah Djojo-

6 comments:

  1. Thank you banyak boss, it works
    www.blogspot.com

    ReplyDelete
  2. Thank you banyak boss, it works
    www.blogspot.com

    ReplyDelete
  3. saya belum mengerti infox.
    apakah kode ini diganti dengan kode CSS yang telah dibuat gt.

    ReplyDelete
  4. @cenk sain: Lo kode HTML pada gadget tidak boleh di ganti, itu hanya sebagai patokan untuk mengetahui id gadget apa yang akan kita beri warna.. sebagai contoh disini kita membuat kode CSS pada Follower yang disitu tampak id-nya adalah Followers1, hasil contohnya sampeyan bisa lihat tampilan Followers pada blog ini !

    ReplyDelete
  5. Terima kasih atas tutorialnya, semoga ini berguna bagi yang lainnya

    tapi ini masih gagal di terapkan di blog saya, mungkin besok-besok saya coba lagi... :)

    ReplyDelete
  6. Thank's gan tutornya
    ane punya dikit masalah untuk background widget-content tidak full
    itu knp ya?

    ReplyDelete

Berkomentarlah yang bijak, iklan/spam langsung dihapus