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.
Post a Comment