JEWELRY TRENDS, BLOG DESIGN & DIY // WORKSHOPS FOR BEGINNERS AT CATYLATOR MAKERSPACE

Saturday, October 15, 2016

How to Add a Hovering Pinterest Button in Blogger



For the non-computer whiz bloggers like me, figuring out how to add my pop-up Pinterest heart was no easy task. First, I have to give it up to the ladies over at Pish & Posh for offering tons of great FREE blogging add-ons. Even my site template is from P&P's amazing shop! Second, it only takes a few minutes to upload the button, so don't get discouraged. Believe me, if I can do it, you can do it too! And trust me, a friendly little icon hovering over your blog post covers adds a nice, finishing touch. Plus, it encourages visitors to click or repin your posts, which boots your visibility on Pinterest and increases traffic...something we all look forward too!

Ok, here we go:

Step #1 - Open your Blogger dashboard and go to Template >> Edit HTML. Backup your template just in case. I keep a folder on my desktop named "Blog Backup" and stash the files in there each time I make a change. A little organization goes a long way!

Step #2 - Find the </body> tag near the bottom of all that coding mess. I know it's a little hard to find, but keep scrolling, it's in there.

Step #3 - Copy & paste this paragraph of HTML code from Blogger Sentral exactly one line above the </body> tag. (It's okay to press enter to make a new line for this step.) If you need some visual hand-holding for this step, like I did, watch this video.

<script>
//<![CDATA[
var bs_pinButtonURL = "http://thisistheurlforyourimage.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>


Step #4 - See the words in red? Once you have downloaded an image for button you would like to use, you will need to create a url address. Upload your button to an online photo album service like Photobucket. In the sidebar window, select the DIRECT LINK and copy & paste that code in between the quotation marks back inside your blog template.

Step #5 - You can change the location of your button by replacing the word "center" with either "topleft", "topright", "bottomleft", or "bottomright".

Step #6 -  Save your changes. Now view your blog and watch the magic happen! Your button should appear on every picture you've posted...even old posts you've probably forgotten about. This method worked for me the very first time. How'd it work for you? Let me know in the comments!



xoxo jamillah

No comments :

Post a Comment

Theme by: Pish and Posh Designs