Cara mentransparankan objek




Bagi sobat sekalian yang ingin mentransparan kan objek seperti gambar atau lainnya pada blogger, mari ikuti langkah-langkah berikut :
Pertama, tandai atau pilih dulu objek mana yang akan anda buat transparan,

Apakah berupa gambar, ataukah objek lain seperti Kotak, atau bahkan Font.
Untuk menggunakannya, dengan contoh anda akan mentransparankan gambar dan tulisan,

Sisipkan kode berikut :

<div style="filter:alpha(opacity=20);-moz-opacity: 0.5;opacity: 0.5;font-size:18px;font-weight:bold;color:#0066FF;width:auto;height:auto;float:left">
<img src="URL gambar" width="75" height="75">
opacity harus kecil, <br /> &amp; hanya dapat di lihat hasilnya <br />di browser saja </div>

Keterangan :
- anda dapat memasukan kode tersebut dalam sebuah widget
- biasanya kode tersebut disisipkan dalam kode <div style="">isi</div>
- kode yang di warnai merah adalah isi yang di transaparankan.
- warna biru adalah alamat url dari gambar anda “misal gambar yang diambil dari web-image-hosting seperti photobucket.com”
- untuk mengaturnya anda tinggal merubah opacity, “semakin kecil nilai opacity, maka objek akan semakin transparan, sebaliknya semakin besar nilainya maka akan semakin terlihat”

Selain dalam <div style=""> pada blogger, kode tersebut bisa juga dimasukan dalam fungsi styleSheet(CSS). caranya seperti berikut :

masuk ke blogger – Tata Letak – Edit HTML
lalu cari kode berikut menggunakan CTRL+F
#content-wrapper {

jika sudah ketemu, masukan kode dibawah ini, tepat dibawah kode tadi,

filter:alpha(opacity=20);
-moz-opacity: 0.5;
opacity: 0.5;

sehingga kurang lebih akan seperti berikut :

#content-wrapper {
filter:alpha(opacity=20);
-moz-opacity: 0.5;
opacity: 0.5;
width: 98%;
height:auto;
margin:0px auto;
padding: 1px 5px;
background-color: #F0F8FF;
}

Warna merah adalah kode yang anda masukan tadi

Supaya hasilnya lebih jelas dan afdol, disarankan blog anda menggunakan sebuah background gambar, jika ternyata belum, gunakan langkah berikut :

Masih dalam menu Edit HTML, dengan menggunakan CTRL+F
Cari kode berikut body {

Jika sudah ketemu masukan kode berikut tepat dibawahnya,

background:url(alamat URL gambar.jpg?imgmax=800) no-repeat scroll top center;

Jadinya kurang lebih seperti berikut,

body {
background:url(http://i705.photobucket.com/albums/ww58/sambis_tea/narsis/thisisbetter.jpg?imgmax=800) no-repeat scroll top center;
text-align: center;
font-size/* */:/**/small;
font-size: /**/small;
font-style:normal;
}
Okedeh.. penjelasan selesai semua,
sekarang tinggal save di lihat hasilnya..
Selamat mencoba . . . .

Tidak ada komentar:

Posting Komentar

-Music-

 

Welcome In Kode Blogger

Contoh Sliding Login Dengan JQuery

Disamping ini adalah contoh Sliding Login menggunakan JQuery. Login Form Disamping hanya Contoh dan tidak dapat digunakan layaknya Login Form FB, Karena Blog ini terbuka untuk umum tanpa perlu mendaftar menjadi Member

Tutorial Blog

Untuk membuatnya Silahkan : Klik Disini

Member Login

Lost your password?

Not a member yet? Sign Up!

http://www.blogger.com/img/blank.gif