Image Map

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 = "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.



4 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
  3. Pinwords is a really basic tool, but it’s great if you want to quickly make an image from a quote and add it to your Pinterest account. Pinstamatic actually lets you

    create a whole bunch of items to add to your Pinterest boards including website snapshots, pins of Twitter profiles and Spotify tracks that you can pin.

    ReplyDelete
  4. Pinwords is a really basic tool, but it’s great if you want to quickly make an image from a quote and add it to your Pinterest account. Pinstamatic actually lets you

    create a whole bunch of items to add to your Pinterest boards including website snapshots, pins of Twitter profiles and Spotify tracks that you can pin.

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...