> Cara membuat box transparant diatas gambar

Sabtu, 17 Desember 2011

8

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.

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.
Ping your blog, website, or RSS feed for Free



Informasi Artikel :
Judul : "Cara membuat box transparant diatas gambar"
Diulas Oleh : | Sabtu, 17 Desember 2011 | 03.35
Description : Dengan properti CSS Opacity atau efek transparant , kita bisa memanfaatkanya untuk membuat sebuah box transparant yang kita letakkan diatas ...

Rating : 6.4 Dari 10, Berdasarkan 800+ Dari 8 000+ Pengunjung.



8 komentar:

  1. Hai.. Aku mau nanya, gimana buat galeri film mirip situs www.ganool.com yang di pasang pada bagian atasnya?

    BalasHapus
  2. Dev...., Galeri seperti itu saya menyebutnya "Slider", Anda bisa baca artikelnya pd link berikut :
    http://www.carabuatwebgratis.com/2011/01/cara-membuat-slider.html

    Anda juga dapat lihat Slide-slide yg lain..., silahkan anda lihat pada multi tab di samping kanan : "CSS"

    Semoga bermanfaat

    BalasHapus
  3. Oh..Oke makasih buat infonya.. Sangat bermanfaat

    BalasHapus
  4. Ini dia yg ane cari masbroow

    ane newbie masbroow, WONG NDESO mohon bimbingannya :)

    http://dedzhambhanz.blogspot.com/

    BalasHapus
  5. makasih mas infonya..
    banyak bgt ilmu nih di blog ini :D

    BalasHapus
  6. Di sini banyak banget ilmunya...keren,jenius

    BalasHapus

BLOGGER

TUTORIAL BLOGGER

TUTORIAL BLOGGER

REKOMENDASI

REKOMENDASI

Artikel Terbaru

POST POPULER

Entri Populer



BLOGGER

Comments

HTML

Side Ads

CSS

Footer Ads

JAVASCRIPT

Random News


BACKLINK

INFO

Bagi anda yang berminat tukar link, silahkan copy linknya lalu pasang di Blog anda. Dan bila sudah terpasang, jangan lupa beritahu saya, agar link anda segera saya pasang di Blog tercinta ini.

CEO
BLOG MAS NOER

Noer cholis


Plosokuning V, Minomartani, Ngaglik, Sleman, Yogyakarta.

TUKAR LINK

TUKAR LINK






Baca artikel "Manfaat Tukar Link"













Baca artikel "Manfaat Tukar Link"

LINK SAHABAT

LINK SAHABAT


CHAT

CHAT




TESTIMONI

Follow Us

Bila anda merasa artikel ataupun tutorial yang ada di Blog ini bermanfaat, anda bisa berikan suport comment melalui form ini. Form ini sangat bagus sebagai BACKLINK buat blog anda, silahkan tinggalkan link anda....

RECENT COMMENT

Recent Comments


top down