Dalam kehidupan masyarakat dari
jaman dulu sampai sekarang, maksud baik saja belumlah cukup. Maksud tersebut perlu
disampaikan secara baik pula agar menciptakan kesan positif yang cukup membekas
dihati penerima. Ibarat jualan nasi pecel meskipun rasanya enak, tetapi kalau disajikan di atas piring yang
tidak bersih pastilah akan menghilangkan selera makan pelanggan. Demikian pula
halnya dengan website / blog, perlu dibuat semenarik mungkin akan memberikan
kesan pertama yang positif dan membuat para
pengunjung tertarik untuk membaca artikel yang kita sajikan.
Untuk membuat website/blog dapat
tampil menarik, selain dapat disiasati dengan pemilihan template, penyajian
gambar header, pemilihan menu dropdown dan penyajian image gallery, dapat pula
dilakukan melalui pemilihan background yang menarik, bisa berbentuk warna
ataupun gambar/image. Untuk menyajikan
website kita dengan background gambar ternyata sangatlah mudah. Ikutilah
langkah-langkah berikut, isya Allah jadi.
1.
Simpanlah gambar (jpg, png, gif) yang anda
pilih di sebuah folder. Karena saya menggunakan Joomla, gambar saya simpan di folder
C:/Xampp/htdocs/Joomla/Template/Beez-20/images.
2.
Silahkan log in ke website anda
3.
Pilih Extension -> Klik Template Manager
-> lihat di kolom template (bukan yang kolom style) -> pilih dan klik Active
Template anda.
4.
Pilih dan klik “edit css/personal.css,
sehingga akan muncul layar yang menampilkan css template anda.
5.
Dibawah note “general”, lihat kode css bagian
“body” berikut
body
{
background-color: #FFFFFF;
color: #FFFFFF;
font-family: arial, helvetica, sans-serif;
}
6.
Gantilah kode css “background-color: #FFFFFF;”
dengan kode berikut
{
background: url(../images/namafile.png);
color: #FFFFFF;
font-family: arial, helvetica, sans-serif;
}
7.
Save dan lihatlah efeknya pada tampilan
website anda
Jika gambar pilihan anda
sudah menjadi background, maka teks artikel anda yang berwarna hitam akan
menjadi kurang terang jelas terlihat jika overlap dengan bagian gambar
background yang berwarna hitam. Oleh karena itu anda masih perlu menyempurnakan
dengan mengubah beberapa kode css untuk menghasilkan kontras antara teks
artikel dengan background. Caranya,
8.
Ubah kode css warna teks (color: #444444;) dengan
kode warna lain, misalnya #FFFFFF; untuk mendapatkan teks warna putih. Kode css
tersebut adanya di bawah bagian “body”
#all
{
color: #444444;
border:solid 0px ;
padding-top:0px;
}
{
color: #444444;
border:solid 0px ;
padding-top:0px;
}
Kode
warna teks #....... atau sering disebut kode HEX selengkapnya dapat anda cari
di sini.
9.
Save dan lihatlah efeknya pada tampilan
website anda.
Kemungkinan besar hasilnya
belum memuaskan, karena sulit sekali mendapatkan kontras antara satu warna teks
dengan gambar yang warnanya beraneka macam. Untuk itu silahkan lanjutkan dengan
membuat layer background pada wilayah isi (content area) dengan warna yang anda
sukai dengan menambahkan kode css baru dibawah kode css nomor 8 di atas dengan
kode “background: #......; sehingga menjadi :
#all
{
color: #444444;
border:solid 0px ;
padding-top:0px;
background: #..............;
}
{
color: #444444;
border:solid 0px ;
padding-top:0px;
background: #..............;
}
10.
Save dan lihatlah efeknya pada tampilan
website anda.
Kemungkinan besar hasilnya juga
masih belum memuaskan, karena content area tertutup dengan warna pilihan anda.
Ini karena warna sistim HEX adalah warna solid. Demikian pula jika anda
menambahkan dengan kode/tulisan “transparent” di belakang kode warna HEX, maka
yang muncul adalah tranparan 100%. Untuk itu silahkan ubahlah kode di atas
menjadi berikut:
#all
{
color: #444444;
border:solid 0px ;
padding-top:0px;
background:rgba(0, 0, 0, 0.55);
}
{
color: #444444;
border:solid 0px ;
padding-top:0px;
background:rgba(0, 0, 0, 0.55);
}
11.
Save dan lihatlah efeknya pada tampilan
website anda.
Mudah-mudahan anda puas,
jika tidak puas silahkan mainkan 3 angka sebagai kode warna dan mainkan angka
ke empat/terakhir sebagai kode intensitas opacity/transparansi. Saya kira ini
adalah kelebihan dari kode warna sistim RGB. Untuk lebih jelasnya tentang kode
RGB silahkan lihat di sini.
12.
Silahkan coba-coba sendiri dengan warna teks
link, heading dsb. Sehingga tampilan website anda bisa cantik, minimal seperti gambar
berikut yang aku punyalah.
Gambar welcome
Selamat
mencoba...............
Salam
Wongsamin.
