Translate

Pinterest Pin It Button Updated

Pinterest Pin It Button Updated


This is the latest version of our original popular Pin It button tutorial.
This Pin It button allows your readers to share your posts without having to leave your blog. It pulls all available images from a post and lets them choose which image to pin. It also comes with an optional counter that displays how many times a blog post has been pinned.


Adding Pin It button to Blogger post

This Pin It button goes to the top or bottom of a post. It comes with a counter that displays how many times a blog post has been pinned.
Here are the steps:
  1. Go to Template > Edit HTML > Proceed.
  2. Back up your template.
  3. Check the Expand Widget Templates checkbox on top right of the HTML window.
  4. Look for the following data tag in your HTML. This is the tag for the post content:
    1<data:post.body/>
    Normally there are two instances of the tag present in your template. Locate the the first (from top) one. 
  5. Paste the following code immediately below (after) it:
    01<!-- Pinterest button Start by BloggerSentral.com -->
    02<b:if cond='data:blog.pageType == &quot;item&quot;'>
    03<div id='pin-wrapper' style='margin:10px 10px 10px 0; text-align: left;'>
    04<a data-pin-config='beside' data-pin-do='buttonPin'expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'><imgsrc='//assets.pinterest.com/images/pidgets/pin_it_button.png'/></a>
    05<span style='margin-left:-44px;'><a data-pin-config='beside' data-pin-do='buttonBookmark'href='//pinterest.com/pin/create/button/'style='outline:none;border:none;'/></span>
    06</div>
    07<script src='http://assets.pinterest.com/js/pinit.js'type='text/javascript'/>
    08<style type='text/css'>
    09#pin-wrapper > a {background-image:none !important;}
    10</style>
    11</b:if>
    12<!-- Pinterest button End -->
    Note:
    • The Pinterest script in line 7 must occur only once in your blog. Omit this line if you’ve already had the script in your blog.
  6. Button configuration
    You can customize the layout of Pin It button & counter by changing the value of data-pin-config attribute in both line 4 and 5. Refer to the table below for the available types and their settings.

    Button type
    Value of data-pin-config
    pin it button counter above
    above
    pin it button counter beside
    beside
    pin it button counter not shown
    none
  7. Button placement 
    The steps above position the button on bottom left of each post. To change the button position, do the following:
    • Position it on top of post 
      Place the button code before <data:post.body/>, instead of after.
    • Button alignment 
      Change the value of text-align property in line 3: 
      Align right: set it to right; 
      Align center: set it to center;
  8. Click Save.
  9. View your blog. The button should appear on post pages.


Adding Pin It button as a widget

To put Pin It button outside post area e.g. in sidebar or footer, paste the following code into a HTML/Javascript gadget. The button will appear on all pages (not just post pages), but it doesn’t have a counter.
  1. Go to Layout and click a Add A Gadget.
  2. Select HTML/Javascript gadget.
  3. Copy the following code and paste it inside the content box.
    1<a data-pin-config="none" data-pin-do="buttonBookmark"href="//pinterest.com/pin/create/button/"><imgsrc="//assets.pinterest.com/images/PinExt.png" /></a>
    2<script src="//assets.pinterest.com/js/pinit.js"></script>
Enjoy!
Other posts on Pinterest buttons:
If you find this post useful, please pin or share.

No comments :

Post a Comment

Terimakasih telah mengunjungi blog ini jangan lupa tinggalkan komentar anda disini....!!

JADWAL BOLA