Tuesday, April 30, 2013

Tutorial: How to Add A Hovering Pinterest Button

I'm always looking for better ways to accomplish tasks, especially when they help increase my productivity. Today I'm sharing a new blogging productivity trick with you: how to add a hovering pinterest button to all of your blog images. 

For me, one of the most time consuming parts of writing a blog post has always been adding in 'pin it' buttons so that readers can easily pin images to pinterest. With just this code, a pin it button will appear in the center of each of my blog post photos from now on. Major time saver. 

My tutorial is for blogger blogs; scroll to the bottom of this post for a link to more in-depth coding tutorial

Open up your blogger dashboard and go to the "Template" tab. Click 'Edit HTML'. 

Do a ctrl+F search and locate the
tag in the html. Insert the following code directly about that tag.

I chose to keep my icon in the center of the photo; but you can change it to either of the four corners if that suits your blog design better. Just delete 'center' in line 4 and replace it with: top right; topleft; bottomleft; or bottomright. 

Save the template and you're good to go. All the images within your blog posts will now have the pinnable pinterest logo. 

Original information (and more detailed tutorial) from BloggerSentral.