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!

Ditulis Oleh : christian angkouw ~ Cara Bikin Blog

Christian angkouw Sobat sedang membaca artikel tentang Cara Membuat Warna Background Transparan di Blog. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya

:: Get this widget ! ::

30 comments

Kunjungan pagi sob...
kunjungi balik yaa :D

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

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

20:01:00

@Blog Keperawatankira - kira seperti itu...

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

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

izin copy scriptnya gan

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

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

mantap gan...

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

22:13:00

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

Kalau yang ingin dibuat transparant widget sidebar saja nagaimana om

Makasih gan...

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

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

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

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

01:09:00

Thanks banget nih infonya

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

Opacity nya diubah semua ya! NICE :)

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

thanks sob tutornya
bermanfaat

Kunjungan pagi sob...
kunjungi balik yaa :D

21:32:00

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

21:36:00

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

thanks,work 100%

Kalau membuat background blog transparan gimana ya?

07:33:00

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

Poskan Komentar

Silahkan tinggalkan komentar sobat dan dapatkan backlink satu arah langsung ke blog sobat dengan widget top komentator yang saya pasang di sidebar blog ini. Caranya dengan menjadi pemberi komentar terbanyak di blog ini, tapi mohon jangan Nyepam ya..! Komentar dengan menyertakan LINK / ANCHOR TEXT atau promosi produk tertentu akan saya hapus karena blog ini bukan tempat untuk mempromosikan produk yang dijual di blog anda.