Note: This is currently a Blogger only tutorial, but I plan on adding a WordPress version soon!
As you probably know by now, Pinterest is one of my favorite social media platforms, especially when it comes to blogging. It’s the perfect place to get your content in front of new eyes, and test out your approach to new readers. And I mean, who doesn’t love an infinite feed of blogging tips, clothing styles, and cute puppies? Simply put, I can’t get enough of it, so when I redesigned my blog a few days ago, I made sure it was Pinterest friendly!
One of the best things you can do for your blog is make your content easily shareable. If I can’t find a way to share your post within a few seconds of glancing, I probably won’t share it. I’ve found that the easiest way to prompt my readers to pin my graphics is by making it pinnable through a hover button. That way, all they have to do is hover over their favorite image, click my custom button, and be taken to a window for pinning it! You might have seen this kind of button on other blogs and thought it was something only knowledgable coders can install, but I promise, it’s super simple.
I’m going to take you through a short tutorial for installing your own hovering Pinterest button, and a few tips for designing your custom button. If you want to make yours even more interactive, I’ll also show you how to add a hover transparency effect!
INSTALLING YOUR PINTEREST HOVER BUTTON
1. From your blog’s dashboard on Blogger, go to Template > Edit HTML.
2. Search for the </body> tag.
3. Copy the code below, and paste it above the </body> tag:
4. To use your own custom button, replace the URL in line 3 with the direct URL of your button image. You can get that URL by uploading your image to a website like Photobucket.
5. If you don’t want your button to be placed in the center of your graphic, change the center in line 4 to topleft, topright, bottomleft, or bottomright.
6. Save and view your blog!
DESIGNING YOUR CUSTOM PINTEREST BUTTON
The great thing about this tool is that you can use whatever image you want, which is great for keeping your blog’s color scheme consistent! Here are some tips for creating the best Pinterest button:
- If you don’t have professional graphic design software, I recommend using a website like Canva, Pixlr, or Picmonkey. I might have to make an entire post about these websites, because I love them so much!
- A good size to go off of is 100 x 100 pixels, which avoids covering up your graphic too much or making it too small to read.
- If you use text on your button (like “Pin It!”), use a simple font. Fancier fonts tend to take up more room, meaning the text has to be smaller to fit in your button. An exception would be using your blog header’s font, as long as it’s readable!
-
Stick to your blog’s theme. It makes your blog look more professional and clean!
ADDING A TRANSPARENCY EFFECT ON HOVER
1. From your Blogger dashboard, go to Template > Customize > Advanced > Add CSS
2. Copy the following code and paste it in the box:
3. Click “Apply to Blog” and check out your effect!
UPDATE: I will no longer be following comments on this post, so if you’re having any trouble, feel free to tweet at me!
