First i would like to thanx sohtanaka for making this jquery hack and then to naeemnur for making it to work in blogger.
As its the best place to advertise there is one more best place to advertise.That is stripe adds for blogger you can install it also,as it is also now available on blogger.And you should also read on for add placement rotator for blogspot blogs.
Now how to install peel add effect in blogger blog.
Just login to Blogger,
Go To Layout > Edit Html > Press Ctrl + F
Now search for </head>
And place the below codes above it.
<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
$("#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>
In codes red line is the image url you wanna show in add,so make change according to your requirements.
Now search for <body> tag and place the below code after it.
<div id='pageflip'>
<a href='http://feeds2.feedburner.com/anshuldudeja'><img alt='' src='http://www.wallheaven.com/page_flip.png'/></a>
<div class='msg_block'></div>
</div>
In above codes two lines in red are url,One to link to advertisement and one to the image which peel over the advertisement.I hope you will love this hack and will add one more place to to advertise,if you don't get any any advertiser,at least you can use your subscribe button there as i have set in codes.
35 comments:
hey u promised me to give me ur blogger template but u dont plase give me the proper template of mine please so give me ur template code
Thanks dude..nice hack
@ sambit you have to wait for some time when i will release it for free then you can use it.
Thanks for sharing very significant information. :-)
Gr8 job done. Thanx for being among us!
Thanks again ..
Hey Anshul thanks for this great hack.
I have a problem when i add this to my blogger template the peel ad is coming at last of header image. i want it at the end of the page.
I will explain u. In your template the header image contains Rss Feeds, Rss comments, when i installed the code i am getting this flip side of Rss comments. I want to get at the end of the page.Plz help
see this lines have been defined in css
position: absolute;
right: 0; top: 0;
These tell to have it at right top of page so it will show up only at corner not at header corner,
try using this line instead of above two
position:fixed;
top:0px;right:0px;
Anshul thank you very much it worked correctly. You rock man.I have not expected a jet speed reply thanks for that.
And i want some more hacks i.e read more, automatic thumbnails(In your template the pictures in ur post will automatically become thumbnails i need that) and the last one is in my template date doesn't appear at the heading, it displays time can plz help me to change the date and the time also appears at the bottom i want it at the left of the post heading.
I have tried ur automatic read more hack it did not work plz help
Thank you very much
all the hacks you are asking are posted in my bog just search my blog and read more and date hack both are working just find posts and install them.
Hi Anshul,
This hacks are really great.
Your blog is very useful for the beginners like me
I have some problems with these hacks can you plz guide me to fix them
1)I have installed peel ads script yesterday.It worked good until today but now its not working now.The changes i made is i have added a google ad script to show ad below each post. I tried by removing the newly added script but still it didn't work.
2)You have given a very good step by step instruction to place google ad script below each post,thanks for that.My problem here is its not showing at the end of the post ,its showing at the end of last line of the post.
check here i am giving you 2 links
http://neoinfojunction.blogspot.com/2008/12/free-magazines.html
http://neoinfojunction.blogspot.com/2009/02/magic-magic.html
But in some post its working fine, see here
http://neoinfojunction.blogspot.com/2009/02/smart-boy-must-read.html
3)I applied read more hack also.the problem is google adsense in my sidebar is showing correctly when opened in the main page but when we go read more and opens the post the adsense bar doesn't appear.
You can check in the above links the google ads are not appearing in the sidebar.In home page its working
http://neoinfojunction.blogspot.com
Kindly solve my problems
Thanks in advance
@ sandeep in peel ad if i was working before you might have mad some mistake check again.
In google add use </br>adsence codes or <p> adsense codes </p> to make it correct might work.
And you are using 4 slots of adsnse on post page you can use more than 3 so 4th one automatically disappears.
Anshul
Thanks 2 of my problems are solved but the peel ad is still not working.Let me make you clear the peel ad is working fine in internet explorer(only some times) and in Firefox it is not at all working.
I am unable to understand this peel ad behavior in ie. I have checked ur post and i can conform you that i have placed the script correctly. I am telling this out of confidence because this is working in internet explorer some times i.e 1 of 10 times.
So kindly solve this.
Again thanks for your friendly support
@sandeep its working fine in all browsers..
Hi Anshul
your blog is the best
I have a problem with this hack,
the peel hack appeared in my blog not in the top right but near to my blog title noting that my blog is in Arabic hence the title in the right. moreover it isn't move like yours and the image below the peel not appear (the Image of subscribe).
please anshul solve this problem for me
one more request
can you give me your template and in return I will put a link for your blog url in my blog as ads, my blog ranked well, and I have more Arabian visitors
waiting for your response
ya its all start from right the problem will come in your language,i can't solve unless i get admin to your blog,to solve myself.
Thanks for this hack, Anshul. I've been looking everywhere for this :). It it okay to just use your image and replace my RSS info in there?
hi! Anshul
I followed the instructions, the peel is coming off, but the image sticks behind the blogger wrapper, ie image is not visible.
u may have a look.
http://kabirakhadabazarmein.blogspot.com
plz help!
The hack works fine, but for one thing, the "peel" affect is not working for me. The folded back corner is there and so is the RSS graphic that's visible upon pull back... but it doesn't actually pull back. www.edgarsreview.com
Thanks!
@edgar try using my script source or any other script might be creating problem for it in your blog bcz your installation seems right.
@kanishka Please can you give me your codes i will fix it and give you within 24 hours time.
I'll try that...
I sent you my codes ... oops.. I guess I'm not kanishka :)
I added you to my feeder.
Follow up...
I get the peel effect, but in my editor only (strange).
Thanks for the code...Very helpful. I'm still have a problem with this peel effect. Please any help? Check my blog!
http://get-together-again.blogspot.com/
@allsimplefx you are using wrong image link in second codes you added. You are using subscribe image but you have to use page flip image.
Hi man check this please www.arhivaflstudio.blogspot.com
I added your codes and you will see that when is opened a little corner from adsense unit apears in the image. can you tell me why please. Thanx.
PS I am now one of your followers :)
@lucky not able to see anything.
Thanks Dude Its Really Cool
Have been trying to find a copy of this for ages. However, I think my blogger template will not allow it because I have a search box near the top right corner.
If u have an opportiunity would u have a look at my blog and let me know if this plug in cld work?
http://www.therebelsyell.com
@the rebels ya it will work...
Awesome, thanks so much,
I used for my social media channel blog
http://socialmediachannel.blogspot.com/
The page flip script was a very nice touch on my blog. However, I installed the wibiya toolbar like you have below and the page peel doesn't function anymore. It works on my blogger dashboard, but not on the blog. Please help!! Here is my blog: everydaygourmetandcakes.com
@philip ya it can happen in blogger, i.e clash of javascripts.just try changing the positions of scripts like after head tag place toolbar first then page peel script or vice versa.If you have other scripts do same for it.Try hit and trial it works if not have to remove one.
the ppel effect is different in my blog.. why help me.. http://yuvanesh.blogspot.com/
its not different its ok only your header image overlaping that add on peeling might be some problem due to added property of template css.
it worked for me thanx
http://kelmtna1.blogspot.com/
Post a Comment