Add page peel/ page flip effect to your header (Request)
1. Log in to your dashboard--> Design- -> Edit HTML
2. Click on "Expand Widget Templates"
3. Search "Ctrl+F" and find the following code: ]]></b:skin>. Before him paste the next one:
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://img88.imageshack.us/img88/9213/subscribe.png) no-repeat right top;
}
The red line is the url of the image you want to show behind the peel page. Change it with your own
4. Then find: </head> and before it paste the code:
<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>
Change the blue numbers with your own to modify the dimensions of the peel effect .
5.Now search for ( or similar code ):
<div class='art-logo'>
<h1 class='art-logo-name'>
<b:include name='title'/>
</h1>
<h2 class='art-logo-text'>
<b:include name='description'/>
</h2>
</div>
and before add the next code:
<div id='pageflip'>
<a href='http://feeds2.feedburner.com/ArtisTutorials'><img alt='' src='http://img821.imageshack.us/img821/150/pageflipq.png'/></a>
<div class='msg_block'></div>
</div>
The first red line is for the link to your advertisment, feed etc and the second one is for the peel image.
6. Save the template and check the result.
3 comments
Hi..
Why my artisteer template can't install live traffic gadget like feedjit??
have you try it?
I've tried now and it works on my templates.
can you make counter per post?like http://linuxhub.net/ for example..
so i can see how many time people read each post..
Click to Add a New Comment
Leave your comment
- If you're asking a question click the Subscribe By Email link, below the comment form, to be notified of replies.
- Do NOT add links to the body of your comment as they will not be published.
- Only the comments posted in ENGLISH will be approved.
- If you have a problem check first the comments , maybe you will find the solution there.