How To Add A Custom “PIN IT” Button To Your Blog

Blogger has changed so much since I started to use it years ago. It has come a long way and there is so much more customization that you can do with a blogger blog without needing a lot of coding experience/skill.

Clic to download

One of the first things I learned was adding a hover Pinterest “PIN IT” button to my blog. It is not only is it EASY to add a hover “PIN IT” button to a blogger blog, but you can customize your “PIN IT” button too.



This is how:


1. Design your “Pin It” graphic & save it as a PNG file. I use photoshop CS5 for grapics, but you can easily make your own “PIN IT” button using a free application like picmonkey.com. Or feel free to use one of my buttons (above)


2. Upload your graphic to a photo saving website. I use Photobucket or ImageShack.


3. Go into your blogger account and go to Template > Edit HTML.


4. Scroll almost all the way down the template until you locate the </body> tag.

5. Copy the code below and insert it right above the tag.

<script> //
<![CDATA[
var bs_pinButtonURL = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkvZ77KvemKh_8qotyZKyJw1rTghR2FfW6HiNgWgJkdJJAzHRa-wcQaKFsEd19SPFR_3l9-SdwkeNXY-w-5hvLnDxyYlPmTl0LPZmQakifvKhvxcc6Dj-f6-jwbkGam81BNnuAsH537caO/s1600/pinterestx1_72.png";
var bs_pinButtonPos = "center"; var bs_pinPrefix = ""; var bs_pinSuffix = ""; //]]> </script> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script> <script id='bs_pinOnHover' src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' type='text/javascript'> // This Pinterest Hover Button is brought to you by Oxana's Designs. // Visit http://oxanadesign.blogspot.com.co/2015/07/how-to-add-custom-pin-it-button-to-your.html // Feel free to use and share, but please keep this notice intact. </script>

6. To use your own button, replace the URL in line 3 with the direct link URL to the image. Make sure to keep the quotes.

7. Save, view your blog, and start pinning.

* You can also change the position of your “PIN IT” button. Find the part of the code that says “center” & try changing it to topleft, topright, bottomleft, bottomright. Play around with position to see what visually suits your blog.