Loading post navigation ...
 
 

Pro page

8
Nhận xét

Tạo cửa sổ popup khi rê chuột vào ảnh trong blogger

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

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.



Enter your mail address:

8

Khách (ẩn danh)

vậy là mình fải có direct link với thumbnail ảnh hả bạn? có cách nào chỉ cần direct link rùi nó tự động giảm kích thước lại hông?

fandung

không cần thumbnail bạn à. Chỉ cần direct là được rồi, bạn để í đọan code height="98" width="130", đọan code này là để tạo thumbnail đó bạn à.

Thành Công

Đoạn sau cung 2 HTML thì chèn vào đâu hở bạn. Thank

fandung

bạn muốn ảnh hiển thị ở đâu thì bạn cứ chèn vào đó. Ví dụ như trong bài viết, hay ở ngòai blog (nếu ở ngòai blog thì tạo 1 widget HTML/Javascript rồi dán code vào)

Chúc bạn thành công

Thành Công

Cám ơn bạn vì đã trả lời ngay, mình làm được rồi.Thank :D

Pogi

Bài này hay lắm, phải áp dụng ngay thôi. Cảm ơn và chúc bạn thành công.

Khách (ẩn danh)

Bạn ơi sao mình chèn vào blog thì bị che bởi wigdet! bạn có thể giúp mình được không!
Thanks
http://hotgirl24h.blogspot.com/

Khách (ẩn danh)

mình muốn tạo 1 cái popup giống thế giới di động đó là rê chuột vô nó sẽ load thông tin điện thoại vô popup đó



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home