19 May 2014

CSS Popup Image Viewer

CSS Popup Image Viewer adalah kode CSS yang berfungsi untuk menampilkan gambar pada jendela baru (popup)dengan ukuran yang berbeda apabila gambar disorot dengan mouse.

Sebagai contoh coba sampeyan sorot gambar dan link dibawah ini;

Dalam bentuk gambar





dalam bentuk link

Contoh Link



Kode dan cara mengaplikasikan di blogger sebagai berikut;

Login dengan akun sampeyan di Blooger
Pasang kode ini pada template blog sampeyan tepatnya diatas kode ]]></b:skin>

.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{
position: absolute;
background-color: #fff;
padding: 10px;
left: -1000px;
border: 5px solid #ccc;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{
border-width: 0;
padding: 5px;
}
.thumbnail:hover span{
visibility: visible;
top: -200px;
left: 20px;
}

Kemudian Pasang kode HTML berikut ini untuk membuat CSS Popup Image Viewer, letakan dimanapun kita ingin menampilkannya,Misalnya saja pada halaman Posting;
Dalam bentuk gambar
<a class="thumbnail" href="#thumb"><img src="http://4.bp.blogspot.com/-ZEXsaV1kKJs/U3oFyMY3udI/AAAAAAAAOgU/FVFqaF729Gs/s1600/vector.jpg" height="298" width="320" border="0" /><span><img src="http://4.bp.blogspot.com/-ZEXsaV1kKJs/U3oFyMY3udI/AAAAAAAAOgU/FVFqaF729Gs/s1600/vector.jpg" />
</span></a>

dalam bentuk link

<a class="thumbnail" href="http://belajar-coreldraw.blogspot.com/2014/05/perbedaan-vector-art-dan-vexel-art.html">Contoh Link<span><img src="http://4.bp.blogspot.com/-ZEXsaV1kKJs/U3oFyMY3udI/AAAAAAAAOgU/FVFqaF729Gs/s1600/vector.jpg"/></span></a>

kalau berkenan dan mau pake, ganti URL link dan URL gambar dengan punya sampeyan

Author : Zainoel Arifin Isa'i

Ketika aku tidak nongkrong di warung kopi atau menyusuri hutan atau juga mendaki gunung, aku sibuk menjadi tukang desain lepas/ freelance yang bermarkas di sudut ruang kamar belakang rumah di daerah pelosok desa terpencil lereng gunung Arjuno.... Facebook : -Mbah Djojo-

2 comments:

  1. wah itu tracing gambar orangnya berapa lama om?

    ReplyDelete
  2. kan di post saya banyak postingan gambar nih trus bagaimana caranya agar otomatis gambarnya semua kayak gitu mbah

    ReplyDelete

Berkomentarlah yang bijak, iklan/spam langsung dihapus