Wednesday, August 19, 2015

Blogger Guide: How To Create a Custom Pinterest Hover Button!


Recently, I've seen a ton of my favorite blogs undergoing big design changes and also many new blogs hitting the web so today I thought I would revisit one of the things that was crucial in my first big customization overhaul as a blogger. And that is? How to design and embed your own hovering "pin-it" button! This little tweak is crucial for maintaining an easy flow of shared content to and from your site but also to simply aid in the cohesiveness of the overall aesthetics of your page! By adding embedded Pinterest links to all of your images, you make it quick and easy for readers to share the post and come back to it later!

I'm the first to admit that I started blogging with a less-than-basic amount of coding knowledge and even the slightest tweak seemed super difficult but I'm here to show you that coding can be a lot easier than it seems! Today's guide is going to be all about creating and coding your own hovering Pinterest button and it's applicable for anyone working on the Blogger platform! There are two options when creating a button. You can use one of the pre-made Pinterest options or you can customize your own. I'll show you how to do both of these here!


Option One // Pinterest Pre-made Options

This option is a tad bit simpler because it involves only entering code into a widget, so you won't have to worry about botching your overall blog template code. To do this, all you need is an HTML widget in your sidebar and some simple copy and paste!

1. Head on over to {this link} which will take you to Pinterest's pre-made options. You've got the choice here to pick either 'One image' to apply the button to, 'Any Image' on your blog or 'Hover'. I personally prefer the Hover option because it allows every image to be pinnable but also hides and easily appears when your reader slides their mouse over the image for undisrupted viewing. After you've decided which works best for you, simply choose the size, shape and color of your button and we'll move on to the coding!

2. Now here's the easy part! After you've chosen your button, the website will provide you with a code below the Preview. Go ahead and copy this and then head over to your blog! Once you open Blogger, head to Layout and "Add a Gadget". You're going to be adding an HTML/Javascript gadget. This will be invisible to your readers so it doesn't truly matter where you place it but my recommendation would be to place this at the bottom of your sidebar so you know where to find it if you need to make any changes! After you have this gadget open, paste the code from the Pinterest page into this blank gadget. Press Save and Voila! Seriously, it's as easy as that!


Option Two // Design Your Own Custom Pinterest Hover Button

This option requires a few more minutes and is a tad more difficult just because we're going to be editing your blogger template however its worth it if you would like to add a custom flair to your blog! This option is a little more daunting but I promise, if I could figure it out, you can too!

1. First off you're going to start by creating a custom image. I generally use {PicMonkey} to create my custom graphics. I've found that it is the easiest to use online photo editing software, however Gimp, Piktochart and PhotoShop are all other great options. Some tips to remember when you're creating your custom button - consider the size you'll want your button, colors that will easily show up on any picture, cohesiveness with your overall blog theme and remember to make the background transparent!


2. After you have created your button upload it to an online photo sharing software. I typically use photo bucket but any will do!

3. Here comes a bit of the tricky part, now we're going to do some coding. Open up Blogger, click on Template and now go to Edit HTML. Search (Ctrl F) to find </body>. You're going to be pasting this code right before that line. Remember that before editing any of your template it is always a good idea to back up a copy of your HTML in case any errors occur! Now what you're going to do is copy all of the code below from <script> to </script> and place it right before </body>. 

Here's the code: 

<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'>
 </script>

4. Now that you have pasted this code, {same code also available here} it's time to place your customizations. I've highlighted the three possible places where you'll be making changes. Starting with line three, you'll be specifying the image for your hover button. Simply take the direct link to your image, easily accessible through links on Photobucket, and place this between the "quotation marks" that is highlighted above. Make sure to keep the quotation marks! The next two highlighted sections are your personal choice whether you would like to customize them or not, I just thought I would go ahead and point them out! The first determines where your button will appear on the image, this code currently has it centered. To change this simply insert "topleft", "topright", "bottomleft", or "bottomright". The last possible customization is the text that will appear when your reader clicks on the button and the Pinterest post button appears. I changed the highlighted section by Suffix to say {from Emily and Dot}, simply so when this is pinned, the description will post my blog title! Customize these sections as you like! Leave the few last lines of text beginning with // intact and save the changes you've just made to your template!


When you go back to your blog you should now see your custom image appear over all of your images in your body posts! Go ahead and try out my Pinterest button and pin this article to help out other fellow bloggers or archive it for yourself!


Let me know if you have any questions or if you had any success with my tips! Feel free to post your blog URL in the comments and I'd love to see your customized Pinterest hover buttons!

Emily


4 comments:

  1. I SO needed this - thank you so much for putting it together!! I had always wondered how to do this and this was a nice and easy tutorial.
    xoxo, Jamie
    http://www.thefashionnewcomer.com

    ReplyDelete
    Replies
    1. Then I'm glad you found it! Hopefully these steps are super easy to understand and use! Let me know if you have any questions and I can't wait to see your button once it's up!
      Emily

      Delete
  2. SO helpful!! Thank you so much. Pinned it to my blogging board and will definitely be trying it sometime this week :) Thanks!! XO, Nicole
    empirestyles.com

    ReplyDelete
    Replies
    1. Whoo for pins! I can't wait to see your button when it's up and I'm happy to help if you come across any troubles! Good luck!
      Emily

      Delete