Pinterest Pin It Button Counter (updated)

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:
<data:post.body/>

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 BloggerSentral.com 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 ='" http://pinterest.com/pin/create/button/?url = "+ data: post. url ">

<img src='//assets.pinterest.com/images/pidgets/pin_it_button.png'/> </ a>

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

</ Style>

<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>

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

</ B: if>

<! - Pinterest button End ->

Note:
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

above

next to

no

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="//pinterest.com/pin/create/button/"> <img src = "/ / assets.pinterest.com / images / PinExt.png "/> </ a>

<script src="//assets.pinterest.com/js/pinit.js"> </ script>

Enjoy!...

By Unknown