As a fairly new blogger only starting out with basic coding knowledge, most of my coding that you'll see around my blog has been through extreme trial and error. To help out some other bloggers, I figured I'd post a few features to help out on some simple coding that can seem a little messy at first! Once you get the hang of it, coding is a lot easier than it seems! Today's guide is all about creating and coding a personalized hover image for Pinterest! My tips are all applicable for anyone working on the Blogger platform!
Pinterest is a great tool for bloggers. It serves as a way to broadcast your blog posts more publicly and build more followers as well as to meet other bloggers! By adding Pinterest links to all your post images, you make it quick and easy for readers to share the post! With this simple how-to, you'll get a Pinterest link up and running in no time!
There are two options when creating a link, 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!
One // Pinterest Pre-made Options
This option is a little easier because it involves only entering code into a widget so you won't have to worry about botching your overall blog template code. Here all it takes is an HTML widget in your sidebar and some simple copy and paste!
First you're going to 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. After this, simply choose the size, shape and color of your button and we'll move on to the coding!
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, just 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!
Two // Create 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!
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 is another good option. 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!
This is what my button looked like before resizing. Note the transparent background!
After you have created your button upload it to a photo sharing software, I personally use photo bucket but any will do!
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 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCp1UX0TCZWOKVoQ2tANU8CU9Kn-16yFwyS35RndMFQHJmZDtGLT8q7WVlH9B2RQyPac57ociWVdcXc4pul_VpRcWOPA7MYi_Fna2_usTt0WbaCkfHWNJKMfnWQpbhyphenhyphenBanmADcKXIPt8u1/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>
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!
Now when you go back to your blog you should now see your custom image appear over your images in your body posts! Go ahead and try out my Pinterest button and pin this article to help out other fellow bloggers!
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
