Pinterest Pin It Button Counter (updated)

sajib shahik | 8:16 AM | 0 Comments

This is the latest version of our popular original Pin It button tutorial.
The Pin It button allows readers to share your posts without leave
blog. It pulls all the images available by mail, and give them to choose an image to pin.
It also comes with an optional counter that shows how many times a blog is
is trapped.

By adding the Pin It button on Blogger post 
The Pin It button goes to the beginning or the end of the post. It comes with a counter that
shows how many times the blog is attached.

Here are the steps:
1.Select Model> Edit HTML> Continue.

2.Back up your template.

3.Check the Expand Widget Templates check box on top right of the HTML window.

4.Find the following tag in HTML. This is a tag post content:

Generally, there are two cases in the presence of the tag template. Find the first (top) one.

5.Paste the following code immediately below (after) are:

<! - Pinterest button Start ->

<b:if cond='data:blog.pageType == "item"'>

<div id='pin-wrapper' style='margin:10px 10px 10px 0; text-align: left;'>

<Data-pin-config = 'next to the' data-pin-do = "buttonPin 'expr: href ='" = "+ data: post. url ">

<img src='//'/> </ a>

<span style='margin-left:-44px;'> <data-pin-config = 'next to the' data-pin-do = "bookmark button" href = "/ / / pin / create / button /" style = "outline: none; border: none;" /> </ span>

</ Style>

<script src='' type='text/javascript'/>

<style type='text/css'>
Pin # wrapper-> {background-image: none! Important;}
</ Style>

</ B: if>

<! - Pinterest button End ->

Pinterest script on line 7 may appear only once on your blog. Leave this line, if you are already a script on your blog.

6.Button assembly
You can customize the layout of the Pin It button and the counter by changing the value of information-pin-config attribute, as well as the line 4 and 5 See the table below for available types and their settings.

7.Button type
In the Value data pin-config


next to


Button placement
The above steps to position the button on the left at the bottom of each post. You can change the button

drive, do the following:

Place it on top of the post
Place the button code <data:post.body/> before, and not after.

Button alignment

Change the value of the text-align property on line 3:

Align Right: set it to the right;

Centering: insert it into the center;

8.Click Save.

9.View the blog. Button appears in the post pages.

By adding the Pin It button widget 

You can put a Pin It button to post outside the region such as in the sidebar or footer, paste the following code

into HTML / Javascript gadget. The button appears on every page (not just post pages), but it does not count.

1.Go to Layout, and then click Add a Gadget.

2.Select the HTML / Javascript gadget.

3.Copy the following code and paste it in the content pane.

<a data-pin-config="none" data-pin-do="buttonBookmark" href="//"> <img src = "/ / / images / PinExt.png "/> </ a>

<script src="//"> </ script>


By sajib shahik
I am a professional Graphic designer and web site designer.I always try to make my byers Happy with my work and my activities. See My portfolio.....

Stay Connected With Us
Feed Icon Twitter Icon Facebook Icon Google+ Icon Youtube Icon

Share and Spread Share On Facebook +1 This Post Digg This Post Stumble This Post Tweet This Post Tweet This Post Tweet This Post Save Tis Post To Delicious Share On Reddit Bookmark On Technorati

Related Articles


Any feedback, questions or ideas are always welcome. In case you are posting Code ,then first escape it using Postify and then paste it in the comments