Background memiliki fungsi penting bagi sebuah blog atau website. Selain kenyamanan pembaca, keindahan dan eye catching blog juga tergantung dari background. Untuk kostumisasinya sendiri sebenarnya sangat fleksibel, sobat bisa memberinya warna, menaruh gambar, hingga dengan efek gradient.
Berikut cara cara mengganti background blog..
Untuk langkah paling awal, langsung ke dashboard blog yang akan di edit => rancangan => edit html. Pada edit html, sobat harus menemukan dulu, selector body di htmlnya. Caranya tekan CTRL + F, kemudian cari body, biasanya terletak di awal. Strukturnya seperti ini..
body {propertycss}atau bisa juga seperti ini..
body {ditulisan berwarna merah itulah terdapat property css, misalnya background, width, dan property lainnya. Karena yang ingin diedit adalah background, maka yang diedit adalah value dari property background. Kalau selector body belum ada, cukup ditambahkan saja.Hasilnya akan seperti ini..
propertycss
}
body {background:ini value yang akan di rubah;property lain:value lain;}atau bisa seperti ini ..
body {Kedua contoh di atas berbeda karena penempatan dan optimasi saja, hasilnya tetap sama.
background:ini value yang akan di rubah;
property lain:value lain;
}
Sobat tidak perlu mengindahkan property dan value yang berwarna hijau , karena saya anggap dalam selector body terdapat banyak property. Fokus hanya pada property dan value background.
1. Warna.
Untuk merubah background menjadi warna tertentu, sobat hanya perlu memasukkan kode warna sebagai valuenya. Bisa berupa kode hex, rgb maupun color name yang bisa dibaca browser,misalnya:whitesmoke,grey atau silver. Hasilnya seperti ini..
body {Pada contoh di atas, saya menggunakan whitesmoke. Untuk warna lain bisa dilihat di color generator.
background:whitesmoke;
property lain:value lain;
}
2. Gambar.
Jika ingin menggunakan gambar tertentu sebagai background, sobat harus menghostingnya terlebih dahulu. Setelah itu copy dan pastekan direct link gambar ke property background. Sobat harus menambah url sebelum link gambar. Link harus dibuka dan ditutup dengan tanda kurung "(....)".Hasilnya seperti ini.
body {Silahkan ganti link gambar yang berwarna merah dengan link gambar yang sudah di hosting tadi.
background:url (link gambar);
property lain:value lain;}
3. Warna + Gambar.
Mungkin sobat bingung kenapa harus kedua duanya. Bukankah itu menghabiskan bandwidth?? Penggunaan warna dan gambar sekaligus dimaksudkan untuk mengantisipasi jika suatu saat gambar gagal loading ataupun link salah. Hal ini sangat berpeluang jika gambar yang sobat gunakan bukan dihosting sendiri atau tempat hosting gambar background sedang down. Jadi, saat gambar tidak muncul, maka warna akan menggantikan. Contohnya seperti ini..
body {Warna yang digunakan sebaiknya mengikuti warna dominan dari gambar background agar tidak menghilangkan identitas blog. Silahkan ganti warna merah dengan warna dan link gambar anda sendiri.
background: #f5f5f5 url (link gambar);
property lain:value lain;}
4. Gradient.
Saat ini gradient banyak digunakan karena bisa menampilkan banyak warna, secara visual mirip dengan gambar. Padahal itu adalah perpaduan warna yang memerlukan css khusus yaitu gradient. Selain itu, memasang efek gradient sebagai background cenderung lebih cepat ketimbang gambar. Untuk penggunaanya, agak sedikit rumit.
background-image: -webkit-linear-gradient([kode warna] [ukuran pixel], [kode warna] [ukuran pixel]);Contohnya seperti ini..
body {Warna merah bisa diganti dengan selera masing masing..Untuk konfigurasi lebih mudah silahkan ke Gradient Generator.
background-image: -webkit-linear-gradient(#cccccc 80px, #f5f5f5 20px)
property lain:value lain;}
Semoga cara cara di atas dapat membantu sobat dalam mengedit blog agar tampil lebih baik di mata pengunjung. Penggunaan dan pengkostumisasian gradien maupun css hanyalah sebagai layout.
.gif)
