Use Page Peel Effect Using JQuery
Page Peel is a popular page flip effect that when your cursor is passing over it will show "what's behind" as if it would be a book.
There are many ways to do this, many of them use flash files which makes it less customizable, however, the one that we will see in this post is made with jQuery.
Regularly the content that is "behind" it is an image for subscribing to feed but you can put any image and link to any page.
page peel, blogger gadgets
How to add this page curl effect on your blog , blogger, please follow this steps.
Click on Template > Edit HTML and before </head> paste the script:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/><script>
//<![CDATA[
$(document).ready(function(){
$("#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>
2. Then before ]]></b:skin> paste these styles:
/* Page Flip
----------------------------------------------- */
#pageflip {
position: relative;
right: 0;
top: 0px; /* Change to 30px if you have the navbar (navigation bar) */
float: right;
z-index:9;
}
#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://oi44.tinypic.com/2hheno6.jpg) no-repeat right top;
}
#pageflipMirror {
position: static;
right: 0;
top: 0;
float: right;
}
3. Finally, paste after <body> or:
<body expr:class='"loading" + data:blog.mobileClass'>
The following code:
<div id='pageflip'>
<a href='http://name-of_your_blog.blogspot.com/atom.xml'>
<img src='http://oi40.tinypic.com/10fqnav.jpg' style='width: 50px; height: 52px; overflow-x: hidden; overflow-y: hidden;'/></a>
<div class='msg_block' style='width: 50px; height: 50px; overflow-x: hidden; overflow-y: hidden; '/>
</div>
In blue you will see a URL - this is the URL of the image that, in this case, is an invitation to subscribe to the feed. You can change it later to another (should be of the same size) if you want.
In red you can see where the name of your blog should be added, that will be the link to the feed of your blog when the user is giving a click on the image behind, but you can put any URL in case you want to link to another page.
Must Read:
CREATE NAVIGATION BAR USING LABELS ON BLOGGER BLOGSPOTclick on Save the template.
Remember that uses jQuery, so you should only have one version of it, and if you use Scriptaculous or Mootools,ok. you should apply some changes.
học kế toán tại thanh xuân
ReplyDeletehọc kế toán tại bắc ninh
chung cư eco green city
dịch vụ báo cáo tài chính
giúp bộ lạc Cuồng Chiến Sĩ!" Đoạn Vân quay về
Khắc Lí ra lệnh .
Khắc Lí suy nghĩ rồi đáp: " Thiếu gia! Ngài muốn trợ giúp Cuồng Chiến Sĩ
thì nhất định Ngài có lý của mình, nhưng đây không phải là một số lượng
lương thực nhỏ đâu! Hơn nữa A Nhĩ Ti Tư cách nơi này xa như vậy, muốn
vận chuyển đến phải mất thời gian hơn một tháng mới tới. Hơn nữa ......"
Đoạn Vân xua tay, nói: " Đừng lo lắng, ta quyết định dùng Tiểu Phi Hiệp
đưa ta tự mình đến đó. Về phương diện vận chuyển cũng không cần lo lắng,
Lai Bố Ni Tư có một Không Gian Giới Tử dung tích tới mấy ngàn lập phương
! Lai Bố Ni Tư, lấy Không Gian Giới Tử ra cho ta mượn dùng một chút, khi
ta về sẽ trả lại cho ngươi!"
Lai Bố Ni Tư đem Ách Bỉ Đa giới tử đưa cho Đoạn Vân, cười nói: " Thiếu
gia, ta đã đã là thủ hạ của Ngài rồi, của ta cũng là của ngươi thôi! Còn
nói cái gì mượn với lại trả nữa! Ta còn chỉ vọng ngươi sớm ngày khôi
phục ma lực cho ta nữa!"
Đoạn Vân nghe vậy rất lấ
kế toán cho giám đốc
học kế toán tại quảng ninh
học kế toán tại bắc ninh
học kế toán tại hà đông
trung tâm dạy kế toán tại tphcm
trung tâm đào tạo kế toán tại quảng ninh
học kế toán tại thanh xuân
khoá học kế toán thuế
học kế toán tại long biên