Hiệu ứng cuộn góc Peel giống như các bạn thấy bằng hình ảnh minh hoạ dưới, khi bạn trỏ chuột vào góc trên bên phải, thì vùng đã ản đi sẽ hiện ra với nội dung về Feed được thiết kế bởi sohtanaka.
Tuỳ biến Layout cho Blogspot:
►Tạo 'Read More' (đọc tiếp) một cách tự động - Hỗ trợ ảnh thumbnail
Hiệu ứng này đẹp và nhìn rất pro, thời gian không làm ảnh hưởng nhiều đến tốc độ load của weblog, và đã được phattrien▲so thử nghiệm trên vnpressnet như hình minh hoạ dưới.
Để thực hiện thủ thuật này cho weblog Blogspot của mình các bạn thực hiện thưo các bước sau (Nhớ sao lưu trước khi thực hiện bất cứ công việc gì liên quan tới Edit HTML):
1. Đăng nhập vào Blogger –> Dashboard –> Layout –> Edit HTML
2.Click vào tuỳ chọn "Expand Widget Templates"
3.Tìm (Ctrl+F) thẻ tag </head> và dán đoạn mã dưới lên phía trên nó.
<style type='text/css'>
img { behavior: url(iepngfix.htc) }
#pageflip {
position: relative;
right: 0; top: 0;
float: right;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 0;
background: url(http://www.wallheaven.com/subscribe.png) no-repeat right top;
}
</style>
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
//Page Flip on hover
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({
width: '307px',
height: '319px'
}, 500);
} , function() {
$("#pageflip img").stop()
.animate({
width: '50px',
height: '52px'
}, 220);
$(".msg_block").stop()
.animate({
width: '50px',
height: '50px'
}, 200);
});
});
</script>
4. Tìm (Ctrl+F) thẻ tag <body> và dán vào dưới nó đoạn mã sau:
<div id='pageflip'>
<a href='http://feeds.feedburner.com/YOUR_FEED_ID'><img alt='' src='http://www.wallheaven.com/page_flip.png'/></a>
<div class='msg_block'/>
</div>
Thay thế dòng YOUR_FEED_ID bằng Feed id của bạn.
5. Lưu lại và xem kết quả thực hiện.
[ phattrien▲so Chúc các bạn thành công. ]
About Chinhnd
Hay và thật sự là rất pro . Thanks đại ca rất nhiều !
ReplyDeletecái thủ thuật này mình đã gặp rồi, trong 1 lần mình tìm hiểu về jquery, nhưng mình thấy nó chỉ có tác dụng trang trí, và ít blog xài nên mình ko post lên thôi.
ReplyDeleteCó thấy của bác đâu :-"
ReplyDeletecái này em cũng xem rùi ~> xấu hơn flash nhiều, chỉ đc cái nhẹ
ReplyDeletetuyet voi, http://pcnewsoft.blogspot.com/
ReplyDeletexin lỗi, pro cho hỏi làm thế nào để dưới thanh cuộn peel là ảnh mà mình muốn cho vào, mong có một đoạn mã copy luôn cho đơn giản vì mình cũng ko biết tự viết ra mã này :D
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDelete