Home » Thủ thuật blog
Tạo cửa sổ popup khi rê chuột vào ảnh trong blogger
Thứ Tư, 27 tháng 5, 2009
Create Popup Image Viewer Using CSS in Blogger

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.

- Giải pháp Blogger bị chặn 02/07/2012
- Các truy vấn cơ bản với Blogspot
- Nâng cấp ANC Gdata lên phiên bản 2.
- Hướng dẫn config domain cho hầu hết các mạng.
- Khắc phục hiện tượng chặn web của VNPT.
- Giải pháp VNPT chặn blogger ngày 09/06/2012
- Tạo thumb cho bài đăng phổ biến
- Tạo lại header cho chuẩn Seo
- BlogSpot cải thiện tính năng SEO cho blog
- ANCKeywords - Tự động cập nhập keywords từ người dùng cho site.
- ANCData - Plugin load feed Blogger version 1
- Đưa Radio vào Blog của bạn (Yêu cầu)
Comments[ 0 ]
Đăng nhận xét