Monday, July 13, 2015

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 = "http://3.bp.blogspot.com/-y3xzTGiGzH0/UK4XOaUpdaI/AAAAAAAADw8/Z1MH4Jr4Efo/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.



2 comments:

  1. I have to say that those pin it buttons are just so cute. Is there a way to create my own that will perfectly fit my bag?

    ReplyDelete
  2. Really impressive post. I enjoyed your article and planning to rewrite it on my own blog.
    traffic generator

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...