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

Điểm 4.6/5 dựa vào 87 đánh giá

(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

Chuyên mục:

8 nhận xét

  1. 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?

    Trả lờiXóa
  2. 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!

    Trả lờiXóa
  3. 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ì...

    Trả lờiXóa
  4. 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.

    Trả lờiXóa
  5. 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(

    Trả lờiXóa
  6. 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!

    Trả lờiXóa
  7. Cám ơn bạn để mình thử lại lần nữa xem sao... :)

    Trả lờiXóa
  8. Không được thì thôi, tức làm gì ^^

    Trả lờiXóa