Tutorial kali ini saya akan mengejak anda untuk menambah elemen halaman diatas Header. Untuk menambahkan elemen halaman diatas header tidak ada yang susah seperti trik-trik sebelumnya yang sudah dibahas. yang saya maksut menambah elemen halaman diatas header adalah seperti ini:
Tutorial Blog, Artikel Tips, Artikel Motivasi, Widget, TV Online, Radio Online, Free Template, SEO, Free SMS, HTML, Pernak-Pernik
Ketahuilah sesungguhnya di dalam tubuh manusia ada segumpal darah, apabila dia baik maka baiklah seluruh tubuhnya.. dan apabila dia rusak, maka rusaklah seluruh tubuhnya. Ketahuilah bahwa segumpal darah itu ialah HATI.(Shahih Bukhari dan Muslim)

Selasa, 03 April 2012

Membuat Background Transparan

Share artikel ini :
Kali ini, kita akan membahas tentang penggunaan opacity pada template blog yang mungkin lebih tepatnya penggunaan background transparan ( tembus pandang ) pada template blog.
Tutorial 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!

Writen by : Masterpiece Tips Blogger ~ Tips and Tricks Blogger

Okie Masterpiece Anda sedang membaca artikel tentang Membuat Background Transparan. by Admin, Anda diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya.

:: Get this widget ! ::

Komentar :

ada 1
90animax mengatakan...
pada hari 

thanks dah jadi hih gan :)

Posting Komentar

Please, tulis komentar anda pada opsi Nama/URL, lalu tulis nama anda dan URL anda pada kotak yang tersedia.Jika anda tidak punya blog/website, kolom URL boleh dikosongkan.

 
Okie © 2010-2011 | Powered Original Minima By Blogger.com Edited By Okieweb.com

Selamat Datang

Selamat datang di Info Okie Jack - saya senang Anda berada di sini, dan berharap Anda sering datang kembali. Silakan berselancar di sini dan membaca lebih lanjut tentang artikel dunia teknik (elektronika, otomotif, komputer) yang kami susun. Ada banyak hal tentang kami, Anda mungkin akan menemukan sesuatu yang menarik. Selengkapnya tentang kami

Sepintas Tentang Okie Jack Online

Nama saya Okie Jack, Saya seorang freelance designer, blogger, teknisi. Dan masih banyak yang ingin diketahui tentang Blogger blogs, CSS, XHTML dan jQuery

Info