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 /> & 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 . . . .
Langganan:
Posting Komentar (Atom)
Tidak ada komentar:
Posting Komentar