You may have noticed that on this blog and on my personal blog
The Daphne Files you see a so called Pin-it Hover Button appear at the top left corner of my post images. With this button readers can easily pin an image from the blog to their Pinterest board, which in return, will give your blog or website more exposure. So a lot of bloggers work with a Pin-it Hover Button, especially the ones that share great photography or recipe photography.
While Pinterest itself offers some guidance on installing one of their Hover Buttons on your blog, a lot of people want to use a Hover Button that matches the layout of their blog. And if you don't know how to create a gorgeous button yourself you can find designers on
Etsy that sell them or are willing to make you a matching button. As of today I'm selling
Blog Style & Makeover Kits that include Pin-it Hover buttons, so you might want to check that out.
But making a customized button or buying one, is one part of the process. Now you have to upload it to your Blogger blog. And today's tutorial is all about that! Before we start I want to mention that the coding I will use in this tutorial was originally written by
BloggerSentral, so a big thank you to the designers over there!
STEP 1 - UPLOADING YOUR IMAGE ONLINE
Whenever you want to make an image 'clickable' so that it leads somewhere, you have to store that image (in this case the pin-it hover button) somewhere online. There are two ways to do this:
1. store the image in an online photo storage place like
Photobucket or
Flickr. Once you've stored your image there, these programs will make a link for this image, and this is the link you will need later on.
2. make a new post on your blog but don't publish it, keep it as a draft. Now upload the image in that post. Click on it with the right mouse button and choose the option to download the storage location. Now you've got your link too.
Just choose the option that works best for you, they both work.
STEP 2 - PLACING THE CODE INTO THE CODE OF YOUR TEMPLATE
To make it all work we will have to copy a piece of HTML coding into your blog's template coding.
1. Go to
Blogger Dashboard and select option '
Template'. Once in the template option screen, choose option '
edit HTML'
2. Now you are in the coding of your blog and you will have to look for the line in the coding that says:
</body>. Instead of scrolling down the coding until you're blue in the face, search for this tag by opening the search screen. You do this by typing Ctrl-F. Now you see a white search box in the upper right corner. Fill in the tag name there and give it an enter.
3. The search option has now located the </body> tag. Now we have to copy a piece of coding right above that tag. That piece of coding is:
<script>
//<![CDATA[
var bs_ButtonURL = "
http://4.bp.blogspot.com/-s_Z2W0W4nDo/VLv0zL7TorI/AAAAAAAAIwk/wS8k8sOtYaU/s1600/Pin%2BButton.png";
var bs_pinButtonPos = "
topleft";
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 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>
Paste it above the
</body> tag and it will now look like this:
4. The coding is now in, but we need to replace the orange colored text with the link to your pin-it image. Remember Step 1? That gave you the link coding, so please remove the orange piece of text and replace it with your own link.
5. The green text in the coding says 'topleft', that defines the position where your pin-it button will show up on your images. You can replace this for other locations if you wish:
topright - bottomleft - bottomright - center
6. Save your template coding and your pin-it hover button should be visible now on your images.
