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;
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: 0;
left: 60px;
}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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEC6nWdlIRjDEDuxDc99LYgX3H2_jg84Zn7aMs4B2BwhbJd_NTZ5BaZKD7Zy7fjfotXBEY3fTHyfDJzYpb2m5xfaWHdVFrKEDmNF7Vz4DxnujTsJCr69UHosqRpWuc-SBEN-3ZtY-QFNU/s1600/vector.jpg" height="298" width="320" border="0" /><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEC6nWdlIRjDEDuxDc99LYgX3H2_jg84Zn7aMs4B2BwhbJd_NTZ5BaZKD7Zy7fjfotXBEY3fTHyfDJzYpb2m5xfaWHdVFrKEDmNF7Vz4DxnujTsJCr69UHosqRpWuc-SBEN-3ZtY-QFNU/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEC6nWdlIRjDEDuxDc99LYgX3H2_jg84Zn7aMs4B2BwhbJd_NTZ5BaZKD7Zy7fjfotXBEY3fTHyfDJzYpb2m5xfaWHdVFrKEDmNF7Vz4DxnujTsJCr69UHosqRpWuc-SBEN-3ZtY-QFNU/s1600/vector.jpg"/></span></a>
kalau berkenan dan mau pake, ganti URL link dan URL gambar dengan punya sampeyan
0 komentar:
Posting Komentar