Tuesday, July 16, 2013

How to Add Follow Button to Blogger?

The Pinterest follow button act just like Facebook's like button and Twitter's follow button. It allows your visitors to follow your pin on Pinterest without going to Pinterest.
 To add Pinterest follow button on your blog Just add the code snippet given below wherever you want to show the follow button.

<a href="http://pinterest.com/chiranjeev/"><img src="http://passets-cdn.pinterest.com/images/follow-on-pinterest-button.png" width="156" height="26" alt="Follow Me on Pinterest" /></a>
 Change my username to your Pinterest username.
Hope you like this tutorial and may work for you give a try with your blog and let me know about your experience to add Pinterest button to your blog via comment box below.
The Pinterest follow button act just like Facebook's like button and Twitter's follow button. It allows your visitors to follow your pin on Pinterest without going to Pinterest.
 To add Pinterest follow button on your blog Just add the code snippet given below wherever you want to show the follow button.

<a href="http://pinterest.com/chiranjeev/"><img src="http://passets-cdn.pinterest.com/images/follow-on-pinterest-button.png" width="156" height="26" alt="Follow Me on Pinterest" /></a>
 Change my username to your Pinterest username.
Hope you like this tutorial and may work for you give a try with your blog and let me know about your experience to add Pinterest button to your blog via comment box below.

How to Add Pin It button to Blogger?


A Pin It button is just like a Facebook’s Like button or Twitter’s  Tweet button or Plus One button of Google+ as it allows visitor to share your posts without leaving your blog.  Installing Pin It button on your blog will do the same task.
So here is how you can add Pin It button to your each and every blog post.
Step#1. Go to Design>> Edit HTML, Make a full back up of your template.

Step#2. Click on the Expand Widget Template checkbox on top right of the HTML window.

Step#3. Find this Data tag normally it will be twice in your HTML is given below. Locate the First one.
Step#4.  Paste the following code immediately below/after the code mention in Step#3.

<!-- Pinterest Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='pin-wrapper' style='margin:5px 10px 5px 0; text-align: left;'>
<a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + 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(&#39;script&#39;);
    e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
    e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
    e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
    document.body.appendChild(e);
}
</script> 
</b:if>
<!-- Pinterest button End -->

Step#5(Optional). If you want to show Pin It button on the top of each post Place the button code in Step#4, before <data:post.body/> tag.
Step#6. Hit Save and that’s it! Check your blog Button appears or not on your post page.

The above code will help you to add Pin It button to each blog post you make. Now if you want to put the Pint It button outside the post area like Sidebar, Footerbar or anywhere in your blogger template follow the easy step given below.

Step#1. Copy the following code give below.

<a href="http://pinterest.com/pin/create/button/?url=Your Homepage url&media=your Blog logo&description=your Blog description"class="pin-it-button" count-layout="horizontal">Pin It</a> <script type="text/javascript" src="http://assets.pinterest.com/js/print.js"></script>

 Step#2. Paste the above link mentioned in Step#1 any where you want to show Pin It button e.g. in a sidebar or footerbar.

Step#3. Change the url - Homepage to your blog url. Change the Blog Picture to your logo of your blog and change the Description tag with your own blog description.

That's it! You have successfully add the Pin It button to your bloggers blog.

A Pin It button is just like a Facebook’s Like button or Twitter’s  Tweet button or Plus One button of Google+ as it allows visitor to share your posts without leaving your blog.  Installing Pin It button on your blog will do the same task.
So here is how you can add Pin It button to your each and every blog post.
Step#1. Go to Design>> Edit HTML, Make a full back up of your template.

Step#2. Click on the Expand Widget Template checkbox on top right of the HTML window.

Step#3. Find this Data tag normally it will be twice in your HTML is given below. Locate the First one.
Step#4.  Paste the following code immediately below/after the code mention in Step#3.

<!-- Pinterest Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='pin-wrapper' style='margin:5px 10px 5px 0; text-align: left;'>
<a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + 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(&#39;script&#39;);
    e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
    e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
    e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
    document.body.appendChild(e);
}
</script> 
</b:if>
<!-- Pinterest button End -->

Step#5(Optional). If you want to show Pin It button on the top of each post Place the button code in Step#4, before <data:post.body/> tag.
Step#6. Hit Save and that’s it! Check your blog Button appears or not on your post page.

The above code will help you to add Pin It button to each blog post you make. Now if you want to put the Pint It button outside the post area like Sidebar, Footerbar or anywhere in your blogger template follow the easy step given below.

Step#1. Copy the following code give below.

<a href="http://pinterest.com/pin/create/button/?url=Your Homepage url&media=your Blog logo&description=your Blog description"class="pin-it-button" count-layout="horizontal">Pin It</a> <script type="text/javascript" src="http://assets.pinterest.com/js/print.js"></script>

 Step#2. Paste the above link mentioned in Step#1 any where you want to show Pin It button e.g. in a sidebar or footerbar.

Step#3. Change the url - Homepage to your blog url. Change the Blog Picture to your logo of your blog and change the Description tag with your own blog description.

That's it! You have successfully add the Pin It button to your bloggers blog.

TOP FB Covers









































 
Glamming Technology Copyright © 2012 Design by Ipietoon Blogger Template