Adding Pinterest 'Pin It' Button to Blogger Dynamic View Templates

Pinterest is a tool that lets you "organize and share all the beautiful things you find on the web" - at least that's what they said. To date, I've never really fully understood what it does. But I do realize that it is popular, and people have been looking for ways to integrate the 'Pin It' button to their blogs - to allow their their blogs to get pinned to other pinterest users' pinboards. It's kinda like inviting your readers to pin your work to Pinterest (correct me if I'm using the wrong terminologies here). It's pretty straight forward to add a 'Pin It' button to a non-dynamic view template, but that isn't the case for Dynamic View templates. Worry not, here's one way to add a 'Pin It' button to your Dynamic View blog.

Note: This tutorial teaches you how to add a 'Pin It' button for your whole blog, not individual posts.

Step 1:

First things first - backup your template by going to Dashboard - Template - Backup/Restore - Download Full Template. Next, go to Dashboard --> Template --> Customize --> Advanced --> Add CSS --> paste the following code --> Press enter after the last character of the last line } --> Apply to Blog.

.pin-it-button-ss{
position: fixed;
top: 23px !important;
right: 230px !important;
z-index: 100 !important;
}

Step 2:

In this step, please enter your blog URL and an address to an image that you'd like to use when your blog is pinned. When you've done inputting these two fields, click on the 'Generate Code' button.

Input the address of your blog here:


Input the address of the image that you'd like to use to pin your blog
(click here if you don't have one):

Step 3:

Go to Dashboard - Template - Edit HTML - Proceed - find for </body> - copy and paste the following code directly above </body> - Save Template:

<!-- ss pinterest starts -->
<script src='//assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>$(document).ready(function() {function pinitss(){ if (document.readyState !== 'complete') setTimeout(pinitss,1000); else $("<a class='pin-it-button-ss' count-layout='horizontal' href='http://pinterest.com/pin/create/button/?url=&amp;media='><img border='0' src='//assets.pinterest.com/images/PinExt.png' title='Pin It'/></a>").insertBefore('#header .header-bar .title');}pinitss();});</script>
<!-- ss pinterest ends -->

Extra: Reposition the 'Pin It' button

To adjust the position of your 'Pin It' button, change the values from Lines 3 and 4 of the code in Step 1. The 'Top' and 'Right' attributes literally means the distance from top and from the right where the button should be placed.