Satu gambar untuk menghasilkan noise di semua element warna yang ada pada template blog

Satu gambar untuk menghasilkan noise di semua element warna yang ada pada template blog

  19 January    Andika

---

Kali ini saya akan berbagi bagaimana cara menampilkan efek noise di semua warna yang di gunakan pada tampilan blog dengan modal hanya sebuah gambar yang berukuran kecil.

Kamu tentu sudah tahu dengan efek noise yang biasa di gunakan dalam tampilan blog. Noise dapat membantu tampilan warna atau latar dari element tertentu terlihat lebih memukau. Intinya Noise Background dapat membuat sebuah tampilan lebih memiliki texture di banding penggunaan warna biasa.

Dari hasil penelusuran, tenyata banyak yang menggunakan beberapa gambar agar efek noise terlihat di semua bagian tampilan blog. Contohnya pada header blog, di sini ada satu gambar noise. body, juga ada. post-body, widget dan footer juga ada. Jadi kalau di hitung-hitung ada 5 atau lebih gambar yang di gunakan untuk membuat laman tersebut tampil lebih berkarakter. Padahal kalau di perhatikan, kadar noise yang di gunakan, sama. Yang beda hanya warnanya saja.

Maka dari itu terpikir sebuah cara, bagaimana mengatasi penggunaan gambar yang berlebihan seperti itu walau nantinya cara yang saya bagikan ini tidak ada yang menggunanya.

Langsung saja. Pertama, kamu download dulu latar noisenya DI SINI. Klik kanan pada gambar dan simpan. Sekarang upload gambar tersebut ke blog yang akan kamu gunakan.

Jika sudah, saatnya menerapkan noise ke dalam template. Tapi sebelum mengedit lebih jauh, sebaiknya template blog kamu di back-up dulu untuk menghindari hal-hal yang tidak di inginkan. Jika sudah, sekarang hapus kode latar body yang lama (Ingat, yang akan di ganti itu cuma latarnya saja. Settingan lain yang ada pada element body jangan di hapus!!) lalu tambahkan atau ganti dengan kode "background:url('/fff.png') repeat #FFF;" pada element body tersebut. Contoh:

body {
    background:url('/fff.png') repeat #FFF;
}

Keterangan, Ganti /fff.png dengan url gambar yang sudah kamu upload sebelumnya. Sementara #FFF Kode Warna utama dari body. Jika kamu menulis seperti kode yang saya tulis di atas, maka latar utama blog kamu adalah Putih + Noise. :)

Jika dirasa warna yang saya gunakan tidak sesuai keinginan, silahkan ganti #FFF dengan Kode Warna yang bisa kamu sesuaikan DI SINI atau DI SINI.

Sekarang noise telah di terapkan. Tapi mungkin kamu masih melihat latar element tertentu belum memiliki efek noise. Anggaplah itu Header. Ambil kode warna yang di gunakan untuk Header, lalu konversi kode warna tersebut ke RGB. Jika kamu bingung cara mengkonversinya. Coba tool Hex to RGB ini. Tempatkan kode Warna tersebut pada kolom HEX dan tekan Enter pada keyboard. Nanti akan ada hasil konversinya ke dalam bentuk rgb.

Namun, ini belum lah jadi. Jika hanya kode rgb saja yang di terapkan untuk menganti kode warna sebelumnya. Maka efek noise tetap tidak akan terlihat seperti saat menggunakan kode warna sebelumnya. Solusinya adalah dengan mengalihkan rgb ke rgba. Hanya dengan menambahkan transparansi warna lah noisenya akan muncul. Namun hal ini tidak akan saya bahas di sini karena kamu dapat memahami cara penulisannya pada Postingan yang telah saya tulis DI SINI.

Ini lah bukti kalau latar yang saya bagikan dapat bekerja dalam segala warna.

background:url('url gambar') repeat rgba(102,0,153,0.6)

background:url('url gambar') repeat rgba(255,153,0,0.7)

background:url('url gambar') repeat rgba(0,51,204,0.6)

background:url('url gambar') repeat rgba(0,179,102,0.6)

Ungu Orange Biru Hijau

Jadi, dengan hanya menggunakan satu gambar saja, kita dapat menampilkan efek noise di seluruh tampilan blog.