Pinterest is a new social photo sharing website where user can create, share and manage online photos found on web. Pinterest is an online pin board where you can pin web photos/images and the images are displayed on Pinterest with a link to the source page of the image. Your friends and followers can re-pin(share) your image to their Pin Boards making your image and the post on your blog containing the image go viral. Pinterest is the fastest growing and one of the top social networks on the Web. By adding the Pinterest Pin It button to your blog, your readers can easily Pin the article images to their Pin Boards and you will get a good amount traffic from Pinterest. Users who are your friends or followers can like or even repin your shared content to there Pinboard. Now This tutorial will show you How to add Pinterest Follow Me Button To Blogger.
Read Also: Pinterest Follow Me Button For Blogger
How to add Pinterest Pin It button to Blogger post
- Go to Blogger Dashboard
- Click on DropDown Menu and select Template
- Backup your Template before making any changes to your blog
- Now Click on Edit HTML --> Proceed --> Expand Widget Templates
- Press Ctrl + F and search the code shown below
<data:post.body/>
- Now Paste the Code Shown Below just Below/After it
<b:if cond='data:blog.pageType == "item"'>
<div id='pin-wrapper' style='margin:5px 10px 5px 0; text-align: left;'>
<a class='pin-it-button' count-layout='horizontal' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url'>Pin It</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-93px; width:43px; height:22px; display:inline-block;'/>
</div>
<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>
</b:if>
<div id='pin-wrapper' style='margin:5px 10px 5px 0; text-align: left;'>
<a class='pin-it-button' count-layout='horizontal' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url'>Pin It</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-93px; width:43px; height:22px; display:inline-block;'/>
</div>
<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>
</b:if>
Make following changes
- To customize button style change the value count-layout to vertical , horizontal or none whatever you like
- To change button alignment from left , right , center change value text-align
Button type
| count-layout value | margin-left value |
 | vertical | -46px |
 | horizontal | -93px |
 | none | -46px |
Like it? Share it.
No Comments
Click to Add a New Comment