Tạo hiệu ứng Cuộn góc Peel cho Blogspot
Friday, 4 December 2009
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
► Hướng dẫn "thiết kế" mẫu Blogger
► Để lại "Nhận xét" với định dạng Name/URL
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.
Tags:
Breakingnews,
Khoi tao Blog,
Layout
Ý kiến bạn đọc [ 1 ]
không tìm thất tag " body " không biết tại sao chỉ tìm thất tag <body..
Ý kiến của bạn