Cara Membuat Warna Background Transparan di Blog

Cara Membuat Warna Background / konten Transparan di Blog - Pagi sob! sebelum kita mulai masuk ke tutornya, ada baiknya ane kasih kilas balik tentang postingan ane yang lalu. Sebelumnya saya telah memposting tentang cara membuat banner untuk link exchange dan kumpulan efek - efek blog ( lengkap ).

Kali ini, kita akan membahas tentang penggunaan opacity ( keburaman ) pada template blog yang mungkin lebih tepatnya penggunaan background transparan ( tembus pandang ) pada template blog.
Tutor kali ini saya khususkan untuk blog dengan background image atau gambar, tidak terlalu bagus untuk backround warna karna hanya akan menghasilkan perpaduan ke 2 warnanya saja. Misalnya sobat menggunakan background berwarna hitam dengan warna outer-wrapper berwarna putih, maka hasil perpaduannya akan memunculkan warna abu-abu.. jadi nggak berguna dong efek tranparantnya...

berikut kode yang di gunakan untuk membuat background transparan

filter: alpha(opacity=100);

-moz-opacity: 1.0;

opacity: 0.6;

-khtml-opacity: 0.0;

Untuk penerapannya sobat tinggal menyisipkan kode tadi sesudah kode warna. seperti berikut.

#outer-wrapper{
width:980px;
margin:0 auto;
padding:5px;
background:#f2f2f2;

filter: alpha(opacity=100);

-moz-opacity: 1.0;

opacity: 0.6;

-khtml-opacity: 0.0;

border:1px solid $bordercolor;
text-align:$startSide;
font:$bodyfont
}

Tambahan :

Berlaku juga untuk wrapper lainnya seperti header, main, sidebar dan footer, namun saran saya untuk tidak menerapkannya di wrapper lain jika sudah di pasang di outer-wrapper, karena outer-wrapper sudah mencakup semua bagian wrappernya.
Edit angka yang berwarna merah hingga sesuai dengan keinginan.
Contoh template dengan background transparan klik di sini!

31 comments

Write comments

aji prasetyo

AUTHOR

18:23:00 delete

Kunjungan pagi sob...
kunjungi balik yaa :D

cara mengobati penyakit

08:34:00 delete

ternyata caranya sangatlah mudah ya... terimakasih atas informasinya... sangat bermanfaat

Blog Keperawatan

19:17:00 delete

Maksudnya agar lebih bagus lagi tampilan backgroundnya ya mas...?

Tian

20:01:00 delete

@Blog Keperawatankira - kira seperti itu...

obat tradisional tumor jinak

17:29:00 delete

aku ijin kopas yaa tutorialnya soalnya mau di praktekin juga nii gan

Obat Keputihan Tradisional

23:44:00 delete

makasih gan infonya ..
mungkin dengan tapilan yang transparan blog terlihat lebih sederhana !!

obat jelly gamat

08:28:00 delete

izin copy scriptnya gan

obat herbal darah tinggi

06:34:00 delete

keren juga nih....
ane coba achhh....

Bang Bro

02:16:00 delete

di blog saya kok malah postingnya yang hilang ckckckckckck maklum masih newbie

Blogger Galau

00:29:00 delete

mantap gan...

Unknown

20:48:00 delete

Maaf OM admin..
saya mau tanya nih,,
cara mengatur posting sesuai dengan laman ato kategori di blog tuh gi mna sih OM ??
udah 2 bulan nyari tapi ttep gak faham" OM...
Pusing banget nihh...

Lirik Lyrics

22:13:00 delete

@Hendra_D'Gamers Tinggal masukin ke label om !!
hhe sory nih ganggu, cuma ngebantu aja :D

rumah dijual

07:46:00 delete

Kalau yang ingin dibuat transparant widget sidebar saja nagaimana om

00:31:00 delete

Makasih gan...

Cara Menurunkan Trigliserida

17:21:00 delete

wah ,gimana ?? oke deh saya coba .
thank ya infonya

06:48:00 delete

info disini selalu cocok.. saya sering kunjungi kesini..

05:11:00 delete

gak ketemu saya kode seperti itu, tapi saya copas setelah kode ini
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
tapi gambar2 di blog saya ikut transparant, gimana ya bang solusinya?
sorry newbie

21:12:00 delete

mantap gan......tapi maaf ko saya gak menemukan outer wrpper ya di blog.......
kunjungi blog saya sob, http://ponda-samarkand.blogspot.com

Malik

01:09:00 delete

Thanks banget nih infonya

Sumber Tips

07:44:00 delete

Ini blog pe keren do ehh, orang tatelu nn..?
Ta cuma da datang ba pasiar kong dapa lia ni blog p mantap skali...beking akang for kita dang sob..hehehhehe
Sapa tau eso-eso bole mo baku dapa, io to sob...
Ta skarang tinggal di Inggris mar ada mo pulang ka mnado dalam waktu dekat ini...
Salam kenal jo for nn deng mudah2han torang mo jadi bloger handal....
nanti baku dapa jo ulang, ta mo cabut dulu.....
Salam sumbertips, Ricky

Daniel Benny Simanjuntak

14:17:00 delete

Opacity nya diubah semua ya! NICE :)

Dhani's Blog

08:24:00 delete

mantap terima kasih sob,,saangat bermanfaat nih artikel
soal nya saya lagi mau buat header di blog saya transparent ,untung ketemu blog ini..
semoga makin keren aja blog nya sob !!
kunjugan balik nya jangan lupa yah :)

@achmad poseidon

Waduh pantesan bang...

soalnya itu masuk Body, bagian utama dari template. otomatis, settingan yang disitu ikut semua..

Saran saya bagi yang newbie :

>Cari aja code Backround
>bisa menggunakan ctrl + F
>biasanya kalau nggak url gambar, ya warna(color)
>cari yang sesuai dengan gambar yang ingin ditransparankan.
>lalu copy tepat dibawahnya dengan tidak keluar dari tanda (})

Cuman ngebantu