Pin it Button For Blogger : Pinterest Widget
Maybe you all are aware of 'Pinterest' it will become the next traffic source for bloggers.
Pinterest is having more than 10 million registered users so you can think if you will do right work with Pinterest then how much targeted visitors you will get.
But before going further with pinterest you will need to add ''Pinterest Pin-it Button'' in your blog posts, So users can pin your blog posts on to their Pinterest Profile.
But making Pin-it button code is the most difficult work Becouse Pinterest Goodies is Providing only simple html and javascript code which contains no dynamic variables/parameters, They don't have any Developers Page from where we can get some Information about pin-it buttons.
Here i m giving ''pin-it button with counter'' code for blogspot blogs, This code is so sensitive so if you try to make any changes in code then it will not work.
So Lets Start:
Plz dont edit and dont add this code inside div and table sections because this code is so sensetive and will not work after editing. ''Use it As Given''
Go To Blogger > Template
Backup your template (Must Do This Because You Can Get Back Your Old Blog if You Got Any Error)
Hit the Edit HTML button
Hit Proceed
Click the box "Expand Widget Templates"
Search for this line:
<data:post.body/>
If You wana display the button at bottom of post then paste the code just below that line and if you wana display the button below post titles then add the code just above that line.
For Horizontal button count:
For Horizontal button count:
<a class='pin-it-button' count-layout='horizontal' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url'>Pin It Now!</a>For Vertical button count:
<a href='javascript:void(run_pinmarklet())' style='margin-left:-93px; width:43px; height:20px; display:inline-block;'/>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
var e=document.createElement('script'); e.setAttribute('type','text/javascript');
e.setAttribute('charset','UTF-8');
e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r=' + Math.random()*99999999);
document.body.appendChild(e);
}
</script>
<a class='pin-it-button' count-layout='vertical' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url'>Pin It now!</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
var e=document.createElement('script'); e.setAttribute('type','text/javascript');
e.setAttribute('charset','UTF-8');
e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r=' + Math.random()*99999999);
document.body.appendChild(e);
}
</script>
Now save your template, and you're done.
If You Find Any Problem Then Feel Free To Comment Here.
