Blogger has changed so much since I started to use it years ago. It has come a long way and t
here is so much more customization that you can do with a blogger blog without needing a lot of coding experience/skill.
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.
