"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;
}
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>
<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>
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
Nguồn: TRAIDATMUI.com
0 nhận xét:
Đăng nhận xét