Tạo hiệu ứng Cuộn góc Peel cho Blogspot

( 24ahz.com) - 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à đã đượcphattrien▲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

$(&quot;#pageflip&quot;).hover(function() {
$(&quot;#pageflip img , .msg_block&quot;).stop()
.animate({
width: &#39;307px&#39;,
height: &#39;319px&#39;
}, 500);
} , function() {
$(&quot;#pageflip img&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;52px&#39;
}, 220);
$(&quot;.msg_block&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;50px&#39;
}, 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. ]

Nguồn : vnblognet

Nếu bạn gặp khó khăn về ngoại ngữ hãy coppy tên try cập ( link ) của trang hoặc đoạn văn bản cần dịch dán vào trang Google dich . Xin cảm ơn các bạn đã ủng hộ chúng tôi !

Tạo hiệu ứng Cuộn góc Peel cho Blogspot

0 nhận xét:

LinkWithin