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 {
propertycss
}
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..
body {background:ini value yang akan di rubah;property lain:value lain;}
atau bisa seperti ini ..
body {
background:ini value yang akan di rubah;
property lain:value lain;
}
Kedua contoh di atas berbeda karena penempatan dan optimasi saja, hasilnya tetap sama.
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 {
background:whitesmoke;
property lain:value lain;
}
Pada contoh di atas, saya menggunakan whitesmoke. Untuk warna lain bisa dilihat di
color generator.
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 {
background:url (link gambar);
property lain:value lain;}
Silahkan ganti link gambar yang berwarna
merah dengan link gambar yang sudah di hosting tadi.
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 {
background: #f5f5f5 url (link gambar);
property lain:value lain;}
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.
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 {
background-image: -webkit-linear-gradient(#cccccc 80px, #f5f5f5 20px)
property lain:value lain;}
Warna
merah bisa diganti dengan selera masing masing..Untuk konfigurasi lebih mudah silahkan ke
Gradient Generator.
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.
Dont forget the king. No shortcut way to become success.
