Pinterest doesn’t want to stay behind in the future social media popularity race from Facebook and Twitter. Like Twitter widgets and Facebook social plugins, Pinterest has introduced Pinterest Pin It button, Follow button, Pin widget, Pinterest Profile widget and Board widget for websites and blogs to help drawing more and more online traffic. All of these, Images are the centre point with you and Pinterest. With the lengthy texts, images play a huge roll to keep your visitors interacts to the posts they read. Every day Pinterest images collection with various categories increasing rapidly. Every single (big or small) image you use in your post is valuable to share. With this thought in mind I am going to introduce Custom Pin It button for every image on your Blogger blog post. Here is how.
Feature of the Pinterest Image Hover Pin It Button for Blogger Blog
Auto pick up the correct post title and post URL.
Auto fill in the pin description with the title of the post.
Can opt to use your own button.
Select your preferred button position (relative to the hovered image) from five available positions.
You can now prevent the button from appearing on certain photos.
You can add your own text as prefix and/or suffix to the post title in pin description.
Cross-browser compatible with the Firefox, Chrome and Internet Explorer.
Should work on most Blogger, WordPress and Typepad templates.
Pinterest Image Hover Pin It Button for Blogger Blog!
Demo: Hover your mouse over the image in this post.
1. First go to Blogger then navigate to Template » Edit HTML.
2. Find this tag in your blog template:
3. Copy the code below and insert it right above(before) the </body> tag.
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 = "";
Image Hover Pin It Button Customization:
If you don’t like given image and want to use your own image then replace below image URL in the above code with your own image URL:
If you want to change the position then change the center code with one of the below code for image position.
- If you want to add a prefix/suffix to the pin description, simply add your text inside the quotes, like so:
var bs_pinPrefix = " Write Your Text Here To Use As Prefix If You Wish! ";
var bs_pinSuffix = " Write Your Text Here To Use As Suffix If You Wish! ";
- If you want to block or exclude any image then simply use below code
Place Your Image Tags Here.
4. That’s all. Save your template by clicking Save template button.
View your blog and hover your mouse on any image in your blog post. If you are still in the middle of any confusion, inform me about it using comments or contact form. Happy Pinning and Happy Blogging.