Cửa sổ xuất hiện trước blog khi click vào link

Điểm 4.6/5 dựa vào 87 đánh giá

(Traidatmui.com) - Hôm nay mình chia sẽ cùng các bạn thủ thuật tạo cửa sổ xuất hiện trước blog khi bạn click vào link. Thủ thuật này sửa dụng hiệu ứng JQuery, nó sẽ xuất hiệu một khung chứa nội dung và nó sẽ làm tối phần nền blog của bạn lại khi bạn click vào một link nhất định trên blog của bạn. Để thấy rỏ hiệu ứng của thủ thuật này, bạn có thể click "DEMO" để xem. Bây giờ mình sẽ hướng dẫn bạn làm từng bước.


1. Đăng nhập vào tài khoản Blogger
2. Vào bố cục và chọn chỉnh sửa HTML
3. Chèn code css bên dưới vào trước thẻ ]]></b:skin>
#fade {
display: none;
background: #000; /*màu nền overlay khi click vào link*/
position: fixed; left: 0; top: 0;
width: 100%; height: 100%;
opacity: .80; /*độ sáng màu nền overlay*/
z-index: 9999;}
.popup_block{
display: none;
background: #fff; /*màu nền của pupop hiện ra khi click vào link*/
padding: 10px;
border: 10px solid #ddd; /*đường viền của khung*/
float: left;
color:#000;
font-size: 1.2em;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
/*--CSS3 Box Shadows--*/
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
/*--CSS3 Rounded Corners--*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
img.btn_close {
float: right;
margin: -40px -40px 0 0;
}
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}

4. Chèn tiếp code bên dưới vào sau thẻ <head> hoặc trước thẻ đóng </head>
<script src="http://data-traidatmui.appspot.com/scripts/jquery.min.v1.4.1.js" type="text/javascript"></script>
<script src="http://data-traidatmui.appspot.com/scripts/w_pupop.js" type="text/javascript"></script>

5. Save template lại
6. Khi muốn áp dụng hiệu ứng này thì bạn cần thiết lập cho nội dung và link như sau

Phần nội dung bạn muốn xuất hiện trong cửa sổ hiện ra khi click vào link, bạn cho vào thẻ DIV như bên dưới:
<div id="popup_name" class="popup_block">
Nội dung của bạn ở đây
</div>

Phần link thì bạn thiết lập như bên dưới
<a href="#?w=400" rel="popup_name" class="poplight">Tên linktext</a>

Phần (400) chính là độ rộng của cửa sổ hiện ra, bạn có thể thiết lập bao nhiêu tùy ý. Như vậy là mọi việc đã hoàn tất.

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

Loading...

12 nhận xét

  1. Chúc anh giáng sinh an lành, hạnh phúc, ấm áp. Merry Christmas and Happy New Year 2011

    Trả lờiXóa
  2. Cảm ơn e. A cũng chúc em có mùa giáng sinh an lành, hạnh phúc. và luôn là cobe đáng yêu nhé!:-*

    Trả lờiXóa
  3. sao minh hok lam dc nhj

    Trả lờiXóa
  4. Hi,thanks ! Code rất hay ! Tiện ích bạn post chỉ xuất hiện khi click vào link định trước .Mình đang tìm code xuất hiện popup khi khách mới vào web như trang này http://doiop.com/popup-trangchu.Rất mong được bạn giúp !

    Chúc bạn nhiều sức khỏe và luôn có code hay post chia sẽ với mọi người .

    Trả lờiXóa
  5. Ngoài ra bạn cũng có thể tham khảo bài viết tại đây. Thân!

    Trả lờiXóa
  6. Thanks bạn nhiều lắm ! chúc site traidatmui.com ngày càng phát triển !

    Trả lờiXóa
  7. Bạn ơi cái này khi hiển thị thì phía trên Tên linktext bị thừa ra một khoảng trống. Làm thế nào để cho nó hiện bình thường vậy?

    Trả lờiXóa
  8. Cái khoảng trống thừa như thế nào bạn? Bạn thử xóa đi thử xem.

    Trả lờiXóa
  9. Cái này nếu làm nhiều link thì trang nó sẽ load hết tất cả nội dung 1 lượt luôn chứ ko phải click vào mới load đúng ko bạn? như thế thì có bị nặng máy, load trang lâu ko nhỉ?

    Trả lờiXóa
  10. Có cách nào khi click vào link thì nó mới load nội dung trong cái cửa sổ đấy ko bạn? chứ để load luôn khi vào trang có chứa thì lag lắm.

    Trả lờiXóa
  11. khi các textlink nằm trên cùng một trang thì khi click vào một link nó sẽ hiển thị tất cả, còn nếu các link đó nằm trên các trang khác nhau nó sẽ chỉ hiển thị khi bạn click vào textlink.

    Trả lờiXóa