"Thủ thuật tạo maskwindow khi load trang cho blogspot"

(Traidatmui.com) – 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ị*/
}

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'/>

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>

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

Xem khác cùng chủ đề

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

11/10/2010 08:58:00 CH Trả lời

Chỗ (Nội dung bạn muốn hiển thị)nếu mình để ảnh giống DEMO ở trên thì mình phải làm thế nào?

Admin
11/10/2010 10:01:00 CH Trả lời

Bạn chỉ việc thêm thẻ ảnh như bên dưới vào vị trí (Nội dung...)

<img src='http://lh5.ggpht.com/_BTztXRwC9ik/TIoUocf14FI/AAAAAAAADb0/q7moPfxrHbM/D.png'/>

Thay dòng in đậm thành link ảnh của bạn.

Thân!

11/11/2010 06:49:00 SA Trả lời

Vẫn ko được bạn ơi.
Mình đã làm như bạn mô tả ở trên nhưng vẫn ko được
mặc dù mình Save ko báo lỗi gì...

Admin
11/11/2010 07:14:00 SA Trả lời

Nó bị lỗi thé nào bạn? Nó không hiển thị được nội dung cả text và ảnh hay chỉ đối với ảnh thôi? Có lẽ nó có xung đột code trên blog của bạn. Bạn hay lưu ý file JQUERY
jquery.min.js này. Nếu trên blog bạn đã có file này thì không cần thêm nữa.

11/12/2010 03:05:00 SA Trả lời

Nó ko hiển thị được cả ảnh và Text luôn bạn.
Cũng có trùng nhau với File ( jquery.min.js ) nhưng mà mình đã xoá nó rồi cũng ko hiện thị luôn..
Còn file (JQUERY)tìm ko thấy ở đâu cả.
Mình chẳng biết lý do gì nữa tức quá....X(

Admin
11/12/2010 06:17:00 SA Trả lời

Nếu như lời bạn nói thì nó bị xung đột file jquery rồi đó. Bạn hãy tìm trong template và cả ở các tiện ích HTML nếu có.Mình đã test trên blog mới nó hiển thị bình thường.Chúc bạn sớm thành công!

11/12/2010 10:17:00 CH Trả lời

Cám ơn bạn để mình thử lại lần nữa xem sao... :)

12/07/2010 06:47:00 CH Trả lời

Không được thì thôi, tức làm gì ^^

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