Membuat Transparant Full Glass Background Bloger With CSS

9 Okt 2012

Baru kemarin saya posting cara menerapkan bigraun dasar di dalam blog, sekarang saya akan posting cara memasang bigraun lagi tapi yang ini agak sedik beda dan sedikit mewah, knapa bisa dikatakan istimewah karna bigraunnya yang super transparan (Full Glass), mungkin sedikit asing tentunya di telinga trutama bagi yang ngeblog pemula, dan  Teknik transparan ini sebenarnya tidak serumit teknik-teknik sebelumnya. Teknik sebelumnya bisa saja kita membuat sebuah background warna di Photoshop kemudian kita rubah nilai transparansinya. Nah kini kita tinggal menggunakan sebuah cara di CSS yang disebut dengan RGBa.

Exsample Bigraund Transparant
 RGBa membutuhkan empat nilai, yaitu 3 kode warna RGB dari warna yang kita inginkan dan nilai terakhir merupakan nilai transparansi yang kita inginkan. Nilai transparansi ini dimulai dari 0 hingga 1, dimana pada nilai 0 maka tidak akan nampak background warna yang diinginkan, sedangkan untuk nilai 1 maka background tidak akan transparan sama sekali.

Langsung aja kita TKP, dan ikuti langkah-langkah berikut ini:

1.    Login ke blogger
2.    Dari Dasbor ->> Pilih Template.
3.  Lalu Klik "Edit HTML", lalu contrang terlebih dahulu  
4.  Untuk memudahkan pencarian kode silahkan tekn tombol Ctrl + F
5.  Silahkan cari Kode seperti dibawah ini atau kode-kode warna yang kamu akan rubah

#outer-wrapper{background:#000;
 Atau
{background:url(http//

Jadi kodenya seperti ini sob:
 background: rgba(7,111,192, .7);

6.  Setelah bertemu dengan kode seperti diatas silahkan kamm Ganti sesuai  keinginan kamu
7.  Jjika cocok dan serasa cukup dengan warna yang kamu inginkan silahkan tekan tombol pratinjau terlebih dahulu lalu Save/ Simpan Tamplate jika berhasil
8. Selesai

Ket: kode Merah adalah warna yang kita tentukan nilainya, Hijau adalah nilai transparan, smakin kecil nilai yang kita brikan smakin Jelas transparannya sob?
Ini soketnya seperti di bawah jika sobat-sobat bloger berhasil membuat transparannya seperti cara diatas, mudah kan sob?... hehehe

Exsample Bigraund Transparant
Apabila anda tidak menyediakan background alternatif ini, maka apabila browser yang digunakan oleh user tidak support rgba, maka tidak akan ada background yang ditampilkan. dan untuk mengganti warna yang sesuai kamu inginkan silahkan klik disini untuk kode-kode warna dan kode RGBnya sob…

Trimakasih atas kunjungannya, silahkan tinggalkan commennya atau like facebooknya jika kamu kurang begitu paham atau tidak bias menerapkannya.
Happy bloging Sob?....

SILAHKAN GUNAKAN FACEBOOK COMMENTARNYA JIKA TIDAK MEMILIKI URL BLOG ATAU SITUS LAINNYA SOB...?? TRIMAKASIH.

Comments
0 Comments

0 komentar:

Poskan Komentar

 
 
 

Pengikut