Wednesday, 10 September 2014

Blogging tips and tricks 001: Hovering pin it button



Blogging tips and tricks 001 : Create a hovering pin it button for your images in blogger

To preview a hovering pin it button in action, hover your mouse over the image above. The clickable pin it button will appear in the center of the image.

Please note, the process for installing a pin it button on Wordpress is different and can be found here.


  • Go to your blogger template > Edit HTML

  • Find the </body> tag near the bottom of your template and insert the code below above it:
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 bloggersentral.com. // Visit http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html for details. // Feel free to use and share, but please keep this notice intact.< /script>

  • To use a custom button replace the code in BLUE with the url of your different button.

  • To change the position of the button change the PINK word to topleft, topright, bottomright, bottomleft

  • Preview and save!

2 comments:

  1. That's SUPER helpful I always wondered how people did it before, coding is my downfall xxx



    Blonde of Carbs

    ReplyDelete
    Replies
    1. Glad you found this helpful :) I've recently started taking an online course as I've also found coding incredibly difficult at times- thought I might as well start this sort of 'mini series' to share what I learn as I go! xx

      Delete

Thank you for your comment.