Lately I have seen so many blogs that have hover pin it buttons over their photos. I love this feature. It makes pinning my favorite pics and ideas so simple.
I wanted to add this feature to the pictures here on my blog, so I Googled and found a really simple tutorial on BloggerSentral.
This is what I did ~
Step One
Create a "pin it" button in Photoshop. Upload the button to a photo hosting site such as Photobucket. If you wish to use the basic button that is written in the code, then skip this step.
Step Two
In blogger, go to TEMPLATE then click EDIT HTML. Scroll down to the bottom of the HTML page and find where it says </body> and place the code found on this blog post right above the </body> tag.
Step Three
After you have pasted the pin it code, remove the first URL and insert the one that is hosting your "pin it" button. If you wish to use the button that is written in the code, skip this step.
Step Four
Hit preview and test out the new feature before saving. You can change the position of the pin it button by deleting where it says center in the code and typing in bottomleft or bottomright or topleft or topright. I chose to place my pin it button in the bottom right corner.
I thought the best part of this was creating the "pin it" button. I think it will be fun to switch it up depending on the season :).
what a great tutorial, Gina! Thank you so much :) I hadn't really considered it, but now I want to spend time adding them!
ReplyDeletei have been wondering how to do this for a while thanks for sharing!
ReplyDeleteThank you for this tutorial! Does this add it to every picture or just the ones that you choose?
ReplyDeleteall of them, but you can take it off the image by typing class='no pin' in the HTML of the photo right before it says the "height" or the "border" size. good luck!
DeleteThank you thank you thank you. I was googling around for tutorials a few weeks back and did not find the one you found. Also, you have such great, simple tutorials. YAY for Gina! haha.
ReplyDeleteYay, yay and more yay. I saw this on Jenny Highsmith's blog and fell in love! I never knew it was so easy! Pinning this right now :]
ReplyDelete{Em♥teatreevintage.blogspot.com}
Thank you SO much! This is the perfect tutorial and it went off without a hitch - I'm currently in the process of updating my blog and this was a great addition!
ReplyDelete