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

(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

Xem khác cùng chủ đề

12 nhận xét | Viết lời bình

12/24/2010 12:40:00 SA Trả lời

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

Admin
12/24/2010 03:30:00 SA Trả lời

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é!:-*

Nặc danh
12/26/2010 01:29:00 SA Trả lời

sao minh hok lam dc nhj

Nặc danh
1/07/2011 09:06:00 CH Trả lời

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 .

Admin
1/08/2011 03:52:00 SA Trả lời

Bạn xem bài viết tại đây nhe

Admin
1/08/2011 04:17:00 SA Trả lời

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

Nặc danh
1/08/2011 04:45:00 SA Trả lời

Thanks bạn nhiều lắm ! chúc site traidatmui.com ngày càng phát triển !

Nặc danh
2/09/2011 09:13:00 CH Trả lời

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?

Admin
2/10/2011 02:29:00 SA Trả lời

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

Nặc danh
2/18/2011 01:12:00 SA Trả lời

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ỉ?

Nặc danh
2/20/2011 12:47:00 SA Trả lời

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.

Admin
2/21/2011 11:58:00 CH Trả lời

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.

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang