Tạo hộp tin nhắn giống như Wordpress với nút close sử dụng jQuery cho blogger

Đăng bởi Admin | 20/10/13 | 0 nhận xét

Có thể bạn đã thấy nhiều lần một hộp massage đẹp trong nhiều Wordpress blogs. Nó xuất hiện giữa các tiêu đề và trên nội dung trang. Nó có thể dễ dàng loại bỏ bằng cách nhấp vào nút close. Để tạo đọc hộp thoại đó, bạn hãy làm theo hướng dẫn sau:

1. Tới Blogger Bảng điều khiển> Mẫu

2 Sao lưu mẫu của bạn 

3. Nhấp chuột vào Chỉnh sửa HTML 

4. Tìm  ]]> </ b: skin> và thêm mã dưới đây vào NGAY SAU nó:

<script src='http://bloggerplugnplay-files.bravehost.com/massegebox-byplug-jquery-1.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.close&quot;).click(function(){
$(&quot;#info&quot;).animate({left:&quot;+=10px&quot;}).animate({left:&quot;-5000px&quot;});
});
blink();
});
function blink(){
$(&quot;#info&quot;).fadeOut(800).fadeIn(800).fadeOut(400).fadeIn(400).fadeOut(400).fadeIn(400);
}
function nudge(){
$(&quot;#info&quot;).animate({left:&quot;+=5px&quot;},20).animate({top:&quot;+=5px&quot;},20).animate({top:&quot;-=10px&quot;},20).animate({left:&quot;-=10px&quot;},20)
.animate({top:&quot;+=5px&quot;},20).animate({left:&quot;+=5px&quot;},20)
.animate({left:&quot;+=5px&quot;},20).animate({top:&quot;+=5px&quot;},20).animate({top:&quot;-=10px&quot;},20).animate({left:&quot;-=10px&quot;},20)
.animate({top:&quot;+=5px&quot;},20).animate({left:&quot;+=5px&quot;},20);
}
</script>



<style type='text/css'>

#info{
border: 1px solid;
margin: 0px 0px;
padding:5px 5px 15px 5px;
background-repeat: no-repeat;
background-position: 10px center;
position:relative;
color: #00529B;
background-color: #BDE5F8;
background-image: url(&#39;info.png&#39;);
}

</style>

5. Tìm tiếp đoạn mã này:  <data:post.body/>

Và dán đoạn mã dưới đây vào NGAY TRƯỚC nó:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div style="" id="info"> YOUR MASSAGE HERE <a href="#" class="close"> CLOSE !</a></div>

</b:if>

6. Lưu mã và xem thành quả .

Chúc bạn thành công !...

Bạn cũng có thể tham khảo các mẫu khác dưới đây:

• Tạo hộp thoại thông báo trên blog
• Tạo hộp Thông báo dạng hoạt hình trên blog

                                                                          Theo: bdlab.blogspot.com