Membuat Background Pada Widget

Background adalah salah satu hal yang bisa memperindah template anda, namun apabila terlalu banyak background akan membuat template sobat menjadi lambat untuk di akses. Mungkin pilihan itu berat anda mau indah atau mau cepat? Template keren, percuma templatenya keren tapi lambat saat di akses. Loading cepat, mungkin pengunjung akan sedikit betah dengan cepatnya template atau blog anda cepat untuk di akses tapi akan membosankan atau monoton apabila template sobat kurang variasi.

Mungkin di atas hanya sedikit saja tips dari Cepat VS Keren, sebenarnya tips di atas ada hubungannya dengan trik yang saya akan jelaskan yaitu Membuat Background Pada Widget. Apa hubungannya dengan trik ini? nanti saya akan jawab setelah menjelaskan langkah-langkahnya. Pada postingan sebelumnya saya pernah membahas tentang membuat background dan membuat background gambar blog. Di masing-masing trik membuat background di blog saya mempunyai cara yang berbeda-beda dan menempati background yang berbeda-beda juga. Nah kalau yang ini memberi background pada widget, dari pada cuap-cuap yang tidak pernah di baca mendingan saya langsung kecaranya aja y.

1. Seperti biasa login ke blogger
2. masuk ke tata letak => Edit HTML
3. lalu cari kode .sidebar .widget lalu tambahkan background: #000; ke dalamnya, contoh
   
   
   .sidebar .widget {
   border-bottom:1px dotted $bordercolor;
   margin:0 0 1.5em;
   padding:0 0 1.5em;
   }
   
   Menjadi
   
   .sidebar .widget {
   border-bottom:1px dotted $bordercolor;
   margin:0 0 1.5em;
   padding:0 0 1.5em;
   background: #000;
   }
   
   
   
   
   
4. nah pada kode property background terdapat nilai kode warna, apabila sobat ingin menggunakan image tinggal tambahkan saja url ('LOKASIGAMBAR') no-repeat ke dalam property background, contoh :
   
   
   .sidebar .widget {
   border-bottom:1px dotted $bordercolor;
   margin:0 0 1.5em;
   padding:0 0 1.5em;
   background: #000;
   }
   
   Menjadi
   
   .sidebar .widget {
   border-bottom:1px dotted $bordercolor;
   margin:0 0 1.5em;
   padding:0 0 1.5em;
   background: #000 url ('LOKASIGAMBAR') no-repeat;
   }
   
   Penjelasan :
   
   • #000 => warna dari background
   • LOKASIGAMBAR => alamat gambar yang telah di upload untuk di jadikan background, misalnya : http://oketrik.blogspot.com/image/contohbackground
     
   
   
5. setelah itu simpan deh dan sobat bisa melihat hasilnya
   
   
   

Bagaimana dengan trik "Membuat Background Pada Widget"? mudah bukan? di atas hanya contoh saja dan di atas adalah kode css pada template default dari blogger dan penempatannya pada sidebar jadi apabila ada perbedaan atau ingin di taruh di lain tempat sobat hanya memerlukan kode .widget saja. Sekian dari saya Terima kasih dan Happy Blogging .

Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg