Typepad Master Class: Add a Pinterest hover image

March 27, 2013

Welcome to the Typepad Master Class! If you've ever wanted to delve into more advanced trickery with your blog's design, the Master Class is for you. Topics covered in this series are for the adventurous or advanced blogger, so an intermediate to advanced level of knowledge of HTML and CSS will come in handy. Additionally, these guides will often require Custom CSS or Advanced Templates, so a Pro Unlimited account is necessary to access those areas and achieve the look and effects we cover. Interested in upgrading? Just head over to the Account link in your Dashboard and click on Billing Info to get started.

Typepad's default Pin It button is a great way for you and your readers to add your images to Pinterest. But lately, lots of Typepad bloggers have asked how to get a Pinterest button to show up when hovering over images in blog posts. Today, we've got you covered.

Listen, we get it--you're seduced by neat tricks. They're fancy, they look cool, and you like to show off. We like these things too, which is why this Master Class post will tell you exactly how to setup a hovered image Pin It button. The best part? You don't have to be some Code Jedi, designing your blog from scratch in HTML and Typepad code, calling upon the power of The Schwartz when things get jammed. All Pro plans can use this tip. 

The code we're using for this Master Class post is courtesy of bloggersentral.com. Their post details how to add the Pin It button in Blogger and Wordpress blogs, but this code works out-of-the-box for Typepad blogs as well! 

Quick Setup

The first, and only, step is to add the code provided below to the correct location in your blog.

For blogs that are using a pre-designed or Theme Builder theme, you will add the code via the Advanced section of your Blog Footer module at Design > Content. 

For blogs using Advanced Templates, you would add this code before the </body> tag in your templates.

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'>
//This Pinterest Hover Button is developed by bloggersentral.com.
//Visit http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html for details.
//Please do not remove this attribution.
</script>

If your blog already has a jQuery library installed for another script/feature, then you will need to remove the following line from the above code: <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>

Once the code is added, save your changes and load your blog. Try hovering over an image.

Default-pin-hover
Quick, simple, pretty! That's it, you can call it a day.

Customizations

If you followed the earlier link to BloggerSentral, you'll see that there are customizations available. They detail how to use a custom image instead of the Pinterest icon that's loaded by default, as well as how to change where it appears. 

Wee Transparent HeartTo use a custom image, like the one to the left, you will need to update the image URL in the code above, making certain that you do not remove the quotation marks around the URL.

e.g. var bs_pinButtonURL = "http://everything.typepad.com/icons/wee_heart.png";

Pinit-heart-center
If you want to change the position as well, BloggerSentral offers additional position attributes that you can use:

  • topleft
  • topright
  • bottomleft
  • bottomright
  • center (default state)

We quite like the center position, but if you'd like your image to appear elsewhere, then choose from one of the above options and replace the "center" attribute with the one of your choice.

e.g. var bs_pinButtonPos = "bottomright";

For additional customization options, please visit the BloggerSentral link above. To show off your custom images, placement, and more, visit the community forum!

comments powered by Disqus

Welcome

Need help?

Follow us!

Typepad on FacebookTypepad on TwitterTypepad on Google+Typepad on PinterestSubscribe to Everything Typepad

Like us!

Typepad Newsletter

Still having trouble? Contact Support.