11 Apr 2012

Effect " corner back page" for Blogger

Use effect: 1 . First you put a avertivare on subscription to the blog feed, as in the demo. 2. Second, you can put a link to a page from your blog that you want your visitors to access more often . 3. A third general would be putting a notice announcing the other sites that they can advertise even in that place. And if you call you can make changing certain parts of the code. You will see the end of the article how to do. If something else comes to head the better.


Actual installation - Installation difficulty: medium
1. At one point we add in the template html code, CSS and JavaScript code that generates the effect.
 Enter to Layout -> Edit HTMLand really make a copy of the template, as always when I went to his code. This can be useful if something goes wrong and we will have to return the current form template.
 With the key combination Ctrl + F search for this code:

</head>
After you have found, copy the code ahead of the next group:
<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_kRBtdHxgoxkLboZ35zaMFETuemXGE_DHEjmBShwe3iMWc9k73klJp-ZuiQKNnJLIKw6_W6JFr9AXxmnKuMViLgdP0ie7Ucrtkks7gG6ABMn7-e1V8a-XHTlGDhfyegjZM7j9TeKm7jNi/s1600/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> 
2. The second point we add html code forming effect. 
It consists of the link that will send click this widget, and photo corner back. 
All in page Edit html search following code:
</head>
After copy the following code group:
<div id='pageflip'>
<a href='http://feeds.feedburner.com/blogspot/lgpHEs'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3hakTVU0CG5NuBxyi3yep1tls_VfMvP4SwVHoML3FHssAP6YMKSfK9jtjYCtj2EBtwlQ7sZQp0R8XQgkOZ89mbiSDUKM9lcMPcP3QDPAy08oSsy0reCdQbK6XgLNAZP_gyA1bxnv-L59u/s1600/page_flip.png'/></a> 
<div class='msg_block'></div>
</div>
What can change or be changed to these codes: 1. To change the image that appears when corner sink, change the code written in blue ( http://www.wallheaven.com/subscribe.png ) the address of the image yours. 2. link in code written in red above is the link that sends the click gave this widget. Change it as desired.  


Enjoy !

No comments:

Post a Comment