Trong thủ thuật trước mình đã có dịp giới thiệu đến các bạn thủ thuật lightbox cho ảnh, tức làm mờ phần phía nền của blog và hiển thị ảnh rỏ lên. Tuy nhiên thủ thuật đó chỉ có tác dụng khi bạn click vào ảnh. Hôm nay mình xin chia sẽ đến các bạn một thủ thuật cũng có cách hiển thị giống như lightbox nhưng thủ thuật sẽ xuất hiện ngay sau khi load xong trang chủ của bạn. Thủ thuật này sẽ hữu ích cho việc bạn muốn thông báo đến người dùng một thông tin mới nhất về blog của bạn. Bạn sẽ hiểu rỏ hơn về tính năng của thủ thuật này khi xem phần DEMO của thủ thuật này.1. Đăng nhập vào tài khoản blogspot
2. Vào bố cục và chọn chỉnh sửa HTML
3. Thêm code bên dưới vào trước dòng ]]></b:skin>
#mask {
position:absolute;
left:0;
top:0;
z-index:8000;
background-color:#333;
display:none;
}
#boxes .window {
position:absolute;
left:0;
top:0;
display:none;
z-index:9999;
padding:10px;
margin-top:0px;
color:#0000ff; /* màu text hiển thị*/
}
#boxes #dialog {
width:auto; /* độ rộng hiển thị*/
padding:10px 10px 5px 10px;
background-color:#fff; /* màu nền hiển thị*/
}
position:absolute;
left:0;
top:0;
z-index:8000;
background-color:#333;
display:none;
}
#boxes .window {
position:absolute;
left:0;
top:0;
display:none;
z-index:9999;
padding:10px;
margin-top:0px;
color:#0000ff; /* màu text hiển thị*/
}
#boxes #dialog {
width:auto; /* độ rộng hiển thị*/
padding:10px 10px 5px 10px;
background-color:#fff; /* màu nền hiển thị*/
}
4. Tiếp theo bạn chèn code bên dưới vào sau thẻ <head> hoặc trước thẻ </head>
<script src='http://data-traidatmui.appspot.com/scripts/jquery.min.js' type='text/javascript'/>
<script src='http://data-traidatmui.appspot.com/scripts/cookie.js' type='text/javascript'/>
<script src='http://data-traidatmui.appspot.com/scripts/maskwin.js' type='text/javascript'/>
<script src='http://data-traidatmui.appspot.com/scripts/cookie.js' type='text/javascript'/>
<script src='http://data-traidatmui.appspot.com/scripts/maskwin.js' type='text/javascript'/>
5. Đến đây bạn hãy chèn tiếp code bên dưới vào sau thẻ <body>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='boxes'><div class='window' id='dialog'>
Nội dung bạn muốn hiển thị
</div><div id='mask'/></div></b:if>
<div id='boxes'><div class='window' id='dialog'>
Nội dung bạn muốn hiển thị
</div><div id='mask'/></div></b:if>
6. Bước cuối cùng là save template lại và kiểm tra kết quả.
Chúc bạn thành công
Ý kiến bạn đọc [ 0 ]
Ý kiến của bạn