Membuat Background Sidebar Dengan Warna Berbeda

gusmuluk 》

Bagikan melalui WhatsApp
semoga menjadi ilmu yang bermanfaat untuk orang banyak.

Baca Juga

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.

Bagikan : Facebook | Twitter | WhatsApp

Daftar Isi | Beranda Utama

facebook

twitter

Tweet

google+

linkedin

gusmuluk
Hanya seorang Blogger pemula, yang masih harus banyak belajar. Jangan lupa cari bekal fahala untuk akhirat, kunjungi bit.ly/maupahala - 24 jam berbagi fahala secara gratis.