Mengganti Background Posting dengan Warna Transparan

Salah satu variasi untuk mempercantik tampilan artikel sebuah blog adalah membuat latar posting menjadi transparan, namun untuk melakukannya dibutuhkan kemampuan untuk mengkombinasikan warna latar dan warna text, dengan latar belakang artikel tersebut untuk membuat kesan transparan tersebut tampil pas tanpa terlalu mengganggu readability dari artikel yang kita tulis.

Saya bukanlah seorang yang ahli dalam desain template blog, seperti yang telah saya tuliskan dalam posting Inilah Make Up Template Terakhir The Art of SEO, seringkali saya mengalami kesulitan dalam melakukan mix and match warna, gambar dan desain, hingga seperti posting kali inilah hasil terbaik yang bisa saya lakukan.

Membuat background posting menjadi transparan


Yang saya lakukan untuk membuat latar posting ini transparan adalah mengganti latar post dari nilai hexadesimal ke rgba. Pertama-tama saya mengganti latar .main-inner menggunakan gambar yang saya buat menggunakan aplikasi photoscape dan saya upload ke album web picassa seperti berikut :

.main-inner { background:#7b7c47 url(https://lh3.googleusercontent.com/-uliLMHIsokQ/UQ6Lw7jdBoI/AAAAAAAABks/XLCqj-FnNys/s124/pattern.jpg) repeat;}

property repeat di atas untuk mengakali ukuran gambar yang kecil ditampilkan berjajar hingga memenuhi 100% bagian main inner. Sedangkan tujuan penggunaan gambar tersebut untuk lebih menonjolkan efek transparan dari latar posting nantinya, dan penggunaan kode warna #7b7c47 untuk mengantisipasi gagalnya loading gambar atau hilangnya gambar jika terhapus dikemudian hari.

Berlanjut ke bagian posting, karena saya sebelumnya memberikan latar gambar dengan dominasi warna hijau tua, maka kali ini saya membuat latar posting berwarna putih yang memiliki nilai RGB 255,255,255 dan saya tambahkan nilai akhir 0.79 yang akan membuat warna putih tersebut menjadi transparan. Untuk anda yang ingin ikut mencoba, sedikit petunjuk bahwa semakin kecil nilai akhir yang kita tambahkan tersebut maka tampilan warna akan semakin transparent.

Kemudian untuk sedikit mempermanis, saya tambahkan juga border dengan warna biru muda, sebagai tambahan materi, silahkan baca juga jenis-jenis border pada CSS.
Lengkapnya, berikut style yang saya tambahkan :

.post { background : rgba(255,255,255,0.79);border:9px solid rgba(52,170,252,0.13)}

Sehingga jika digabung dengan kode di awal tadi menjadi :

.main-inner { background:#7b7c47 url(https://lh3.googleusercontent.com/-uliLMHIsokQ/UQ6Lw7jdBoI/AAAAAAAABks/XLCqj-FnNys/s124/pattern.jpg) repeat;}
.post { background : rgba(255,255,255,0.79);border:9px solid rgba(52,170,252,0.13)}

dan saya tambahkan tag style hingga lengkapnya :

<style type="text/css">
.main-inner { background:#7b7c47 url(https://lh3.googleusercontent.com/-uliLMHIsokQ/UQ6Lw7jdBoI/AAAAAAAABks/XLCqj-FnNys/s124/pattern.jpg) repeat;margin-left:10px;}
.post { background : rgba(255,255,255,0.79);border:9px solid rgba(52,170,252,0.13)}
</style>

lalu saya simpan di akhir postingan ini dalam mode HTML, dan selesailah usaha saya untuk mengganti background posting dengan warna transparan.
Bagaimana menurut anda? apa yang harus saya perbaiki? dan ataukah anda mempunyai cara yang lebih mudah? silahkan berbagi atau share artikel ini melalui tombol share social media di bawah posting ini.
Terima kasih.


al ghifari
Artikel Mengganti Background Posting dengan Warna Transparan ini 100% bukan hasil copy paste
Dibaca oleh12606 pembaca dari 12727 pengunjung.
Ditulis Oleh
Semua artikel terproteksi DMCA.
Hanya script dan kode tutorial yang boleh di copy paste, dengan menyertakan sumbernya.
Artikel The Art of SEO lainnya bisa anda temukan pada menu related post berikut ;

12 comments

2/05/2013 07:59:00 PM

wah bagus juga di tranparan gitu.
jadi pingin utak-atik blog deh :p

2/05/2013 09:22:00 PM

Thx bro , ini yang saya cari-cari dari kemarin .. Thx yaa

2/06/2013 12:00:00 AM

@vika etianapingin utak-atik nya, pingin banget atau pingin aja nih Vika?hehe..
Terima kasih komentarnya.

2/06/2013 12:02:00 AM

@devilz-adrian Alhamdulillah, akhirnya ketemu cara membuat background post transparannya di sini ya sahabat Adrian?
Terima kasih komentarnya.

2/06/2013 02:56:00 PM

Wah kalau begitu blog kita akan menjadi semakin menarik dan unik dong, tapi kira-kira ini akan memberatkan blog tidak ya??

2/07/2013 01:31:00 AM

@Blognya Venny Hanya css saja mbak Venny, pastinya tidak memberatkan blog, dengan catatan gambar background tersebut dalam format JPG atau PNG dengan ukuran dan resolusi yang tidak terlalu tinggi tentunya.
Terima kasih komentarnya.

4/04/2013 09:41:00 PM

kere keren...

5/02/2013 11:48:00 PM

wah boleh di coba makasih

6/06/2013 07:38:00 AM

jos gan

8/05/2013 05:11:00 PM

makasih mas infonya sangat membantu

7/02/2015 08:28:00 AM

sya msih kurang paham, kak.
mklum sya msh baru bkin blog.
ada vidio tutorial nya,kak??
klo ada tolong share y...
mksih...

3/13/2017 02:01:00 AM

blog jadi menarik dengan metode transparan gitu ya gan .. Update terus dan sukses selalu ya Gan...
AGEN POKER ONLINE
AGEN POKER INDONESIA
DOMINO ONLINE INDONESIA

Post a Comment

Copyright © The Art of SEO

Designed By: the Art of SEO