Cara membuat box transparant diatas gambar

Dengan properti CSS Opacity atau efek transparant, kita bisa memanfaatkanya untuk membuat sebuah box transparant yang kita letakkan diatas sebuah background gambar. Dalam beberapa browser seperti Firefox efek transparant menggunakan properti opacity:x, dan x memiliki nilai 0,0 hingga 1,0. Jadi semakin rendah nilainya, maka elemen akan lebih transparant. Pada browser IE, efek transparant menggunakan properti "filter:(opacity=x)" dan x memiliki nilai antara 0 hingga 100.IE sama dengan Firefox, semakin rendah nilainya, maka elemen juga akan lebih transparant.
Pada fungsinya, kita bisa menampilkan teks informasi atau cuplikan singkat sebuah artikel atau biasa disebut dengan deskripsi pada box transparant ini, sementara pada background yang ada dibelakangnya bisa menggunakan gambar yang berhubungan dengan artikek, disamping itu sebagai penguat artikel itu sendiri.

Cara kerjanya silahkan anda lihat box transparan dibawah ini, anda bisa letakkan pointer mouse diatasnya. Dan bila diklik akan mengarahkan kita menuju artikel yang dimaksud pada deskripsi yang ada pada box transparant tersebut.

Cara buat web ternyata tidaklah sesulit yang kita fikirkan. Kita hanya membutuhkan lima langkah mudah, cepat dan gratis. Tak perlu khawatir kalau anda merasa sangat pemula dan belum tahu atau mengerti tentang bahasa programer.

Bila anda berminat silahkan anda bisa ikuti langkah - langkah dibawah ini :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.

4. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

5. Copy kode di bawah ini dan taruh sebelum kode </head> :

<style type="text/css">
div.background
{
  width: 500px;
  height: 250px;
  background: url(URL GAMBAR MILIK ANDA)no-repeat;
  border: 3px solid #515AA3;
}

.transbox a:link,a:visited
{
  display:block;
  width: 400px;
  margin-left:auto;
  margin-right:auto;
  margin-top:15px;
  padding:15px;
  font-weight: bold;
  font-style: italic;
  color: #000000;
  text-decoration:none;
  border: 3px solid #515AA3;
  background-color: #ffffff;
  background-filter:alpha(opacity=80);
  opacity:0.8;
}
.transbox a:hover,a:active
{
  display:block;
  border: 3px solid #CCCCCC;
  background-color: #515AA3;
  color: #ffffff;
}
</style>

Catatan : Silahkan anda bisa ganti nilai dan kode warna yang berwarna merah dan silahkan ganti ULR GAMBAR dengan milik anda.

Langkah selanjutnya anda tinggal menampilkan Box transparant pada sidebar blog anda. Berrarti anda tinggal menambah gadget. Perhatikan langkah berikut :

1. Klik Rancangan dan pilih Elemen Laman

2. Tambah Gadget

3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript

4. Copy dan paste kode dibawah ini pada gadget tersebut :

<div class="background">
<div class="transbox">
<a href="ULR ARTIKEL ANDA"target="_blank" >Informasi atau cuplikan singkat artikel yang dituju</a>
</div>
</div>

Ok...., Selamat mencoba dan Semoga bermanfaat....
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Judul: Cara membuat box transparant diatas gambar; Ditulis oleh Unknown; Rating Blog: 5 dari 5

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Blogger Tutorial | SEO | Free Blogger Templates | OOM RIO.com di inbox anda:

Related Posts

• Cara membuat Bar mengambang atau Floating Bar on Top pada blogFloating Bar sering kali kita jumpai ketika kita membuka blog atau merefressnya kembali. Floating Bar tersebut seperti pop up, biasanya berisi iklan teks, banner, a ... readmore
• Cara membuat gambar melayangCara membuat gambar melayang menggunakan properti float, properti float sangat sering digunakan untuk gambar. Dengan Properti float, sebuah gambar bisa dibuat melay ... readmore
• CSS PaddingProperti CSS padding berfungsi untuk mengatur jarak antara  elemen dengan isi elemen, misalnya mengatur posisi teks yang ada didalam border, tabel dll. Seperti ... readmore
• Membuat Thread Comment BertingkatMembuat Thread Comment Bertingkat - kali ini saya akan membahas  tentang bagaimana cara memebuat agar Thread comment betingkat sepeti gambar diatas. kode CSS-n ... readmore
• Membuat Teks Berjalan ( Marquee )Untuk menghiasi blog atau web, banyak cara yang bisa kita lakukan, termasuk memberi effek animasi teks berjalan. Dan untuk membuat teks berjalan caranya juga sangat ... readmore