™» CGC Blog «™ 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://traidatmui-tips.googlecode.com/files/jquery.min.v1.4.1.js" type="text/javascript"/></script>
<script src="http://traidatmui-tips.googlecode.com/files/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 các bạn thành công !
Nguồn : traidatmui.com
Khi copy, các bạn nhớ ghi rõ nguồn gốc. Xin chân thành cảm ơn!
Forum
™» CGC Blog «™ 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 
CGC BLOG 
0 Bình Luận:
Đăng nhận xét
☺ Nội quy comments của CGC Forum :
1. Comments không được sử dụng lời lẽ thiếu văn hóa, ảnh hưởng xấu đến chính trị, tổ chức, cá nhân.
2. Không được sử dụng comments với mục đích spam.
Những comments làm trái quy định sẽ bị xóa...!
Xin cảm ơn các bạn đã đóng góp comments và tuân thủ nội quy của blog !
Notice by Admin