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 :
  1. 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.  
  2. Edit angka yang berwarna merah hingga sesuai dengan keinginan.
  3. Contoh template dengan background transparan klik di sini!
Previous
Next Post »

32 comments

Write comments
aji prasetyo
AUTHOR
18:23:00 delete

Kunjungan pagi sob...
kunjungi balik yaa :D

Reply
avatar
08:34:00 delete

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

Reply
avatar
19:17:00 delete

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

Reply
avatar
Christian
AUTHOR
20:01:00 delete

@Blog Keperawatankira - kira seperti itu...

Reply
avatar
17:29:00 delete

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

Reply
avatar
23:44:00 delete

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

Reply
avatar
08:28:00 delete

izin copy scriptnya gan

Reply
avatar
06:34:00 delete

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

Reply
avatar
02:16:00 delete

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

Reply
avatar
Blogger Galau
AUTHOR
00:29:00 delete

mantap gan...

Reply
avatar
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...

Reply
avatar
dde ajeng
AUTHOR
22:13:00 delete

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

Reply
avatar
rumah dijual
AUTHOR
07:46:00 delete

Kalau yang ingin dibuat transparant widget sidebar saja nagaimana om

Reply
avatar
Alaw Dakova
AUTHOR
00:31:00 delete

Makasih gan...

Reply
avatar
17:21:00 delete

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

Reply
avatar
06:48:00 delete

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

Reply
avatar
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

Reply
avatar
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

Reply
avatar
Malik
AUTHOR
01:09:00 delete

Thanks banget nih infonya

Reply
avatar
Sumber Tips
AUTHOR
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

Reply
avatar
14:17:00 delete

Opacity nya diubah semua ya! NICE :)

Reply
avatar
Dhani's Blog
AUTHOR
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 :)

Reply
avatar
20:01:00 delete

@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

Reply
avatar
Earninspire
AUTHOR
20:51:00 delete

thanks sob tutornya
bermanfaat

Reply
avatar
Anonymous
AUTHOR
17:14:00 delete

Kunjungan pagi sob...
kunjungi balik yaa :D

Reply
avatar
suka
AUTHOR
21:32:00 delete

sip tapi masih gk begitu tau kalau di rubah kode angkanya... newbie aku.

Reply
avatar
nur
AUTHOR
21:36:00 delete

posting menarik, kalau warna background di buang bisa gak ya...

Reply
avatar
Faisa Adyatma
AUTHOR
17:56:00 delete

thanks,work 100%

Reply
avatar
Andoelsean
AUTHOR
12:25:00 delete

Kalau membuat background blog transparan gimana ya?

Reply
avatar
Chika ELF
AUTHOR
07:33:00 delete

kok aku ga bisa bisa yah
Kesalahan saat mengurai XML, baris 2, kolom 1: A pseudo attribute name is expected

Reply
avatar