Create Popup Image Viewer Using CSS in Blogger
[FD's BlOg] - Với vài đọan code CSS nhỏ ta có thể tạo một cửa sổ popup để hiển thị ảnh rất chuyên nghiệp mà không cần tới javascript. Thủ thuật cho phép hiện thị của sổ popup của ảnh gốc khi ta rê chuột vào.Xem demo trực tiếp ở đây : http://fandung.110mb.com/test/popup-images-view.html
Hình ảnh minh họa:
Để thực hiển, trước tiên bạn chèn đọan code CSS này vào trước thẻ đóng </head> trong code template:
- Đăng nhập blog
- Vào bố cục
- Vào chỉnh sửa code HMTL
- Chèn đọan code CSS bên dưới vào trước dòng code </head>
<style type='text/css'>
.img-thumbnail{
position: relative;
z-index: 0;
}
.img-thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.img-thumbnail span{
position: absolute;
background-color: #ffffff;
padding: 5px;
left: -1000px;
border: 1px solid #000;
visibility: hidden;
color: black;
text-decoration: none;
}
.img-thumbnail span img{
border-width: 0;
padding: 2px;
}
.img-thumbnail:hover span{
visibility: visible;
top: -100px;
left:100px;
}
</style>
- Dòng code màu đỏ chính là vị trí popup sẽ hiển thị ở trong blog của bạn. Hãy điều chỉnh 2 giá trị này để có được vị trí thích hợp nhất trên blog của bạn.
- Save template.
Và sau cùng là code HTML:
<a class="img-thumbnail" href="#">
<img src="link ảnh1" border="0" height="98" width="130"/>
<span>
<img src="link ảnh1"/>
</span>
</a>
Chúc các bạn thành công.