Adding A Hovering Pinterest Button To Your Blog Images

• 3 Comments

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!

Blogging Essentials: A Series

• No Comments

Note: This post has become the base of The Collection, a page full of every blog related post I’ve made! That means this post will no longer be updated, so head over here for some blogging goodies!

After launching my new design yesterday, I’m super pumped about getting this blog going again! One of the things I realized while redesigning for the past few weeks and looking through my old blog was that I really enjoy blogging aboug blogging.  I have a passion for coding, designing, and teaching, and that all came together into one big plan: make a blogging series about blogging! So today, I’m introducing a big addition to my blog that I hope will bring in new readers eager to learn, and give my current readers something else to come back for!

While I am calling this a series, it by no means has an end. I plan on this being an ongoing thing that I constantly add to, because there seems to be an infinite amount of useful tips out there! To get things going though, here’s a list of past posts I’ve made that have gotten a great response so far:

CSS/HTML

How To Make A “Back To Top” Button

How To Make A Sticky Navigation Bar

Adding A Hovering Pinterest Button

How To Add A Hover Effect On Images

BLOG GROWTH

How To Engage Your Blog Readers
Blogging Checklist for 2015

Building A Kick Butt Sponsorship Program

YOU + BLOGGING

The Do’s And Don’ts Of Blogging

How To Take A Break From Blogging

7 Must Have Apps For Bloggers

DESIGN

Choosing A Font For Your Blog

I want this series to grow into a master list of blogging tips for any blogger to find useful. That said, I would love for y’all to let me know about anything you would like to learn about! Have you seen something on another blog that you want to try? Are you having trouble growing your blog? Let me know in the comments, or <a href=”https://twitter.com/JessSlaughter_>tweet at me with your response! My goal is to make this list as convenient for my readers as possible, so I’m putting y’all at the heart of it!

New Designs Are Fun

• No Comments

So this was kind of a spur of the moment decision, but I got kind of bored with my old design. I kept seeing all sorts of nifty gadgets and design elements on other blogs and I couldn’t help but feel inclined to redo my own! The past few weeks have been spent coding into the late hours of the night constantly doubting color schemes, and starting from scratch three times because the frustration levels were too high. This is by no means a final design, and I’ll probably change something within the next few hours, but I’m definitely happy with how it turned out!

The logo was kind of another story. After spending hours with a watercolor pen and paper trying to design my own logo, I was left with lots of crumpled up papers and nada in terms of a logo. I think I’m too much of a perfectionist when it comes to that realm, so I ended up drawing this one out last minute and I’ll just call it temporary for now. I’m hoping to get a Wacom tablet for Christmas so I can get a better graphic!

This color scheme is also the complete opposite of what I was originally going for. I went from black and white, to coffee colors, to some depressing blues, and somehow ended up with this bright and peppy mint-ish look. It took a while to settle on it, but I’m learning to love it!
Aside from the design, I have a lot of plans for this blog during the upcoming year! I have yet to settle on a specific category, but who really needs to? I do plan on making a lot more “blogging tips” posts, because coding is really one of my passions and I love seeing people get excited about designing a part of their blog! With that said, if you see anything on this blog that you want to learn how to code, or have something else in mind, please let me know or tweet at me!
So a little side note; for the next two or so weeks, I will be running a fireworks stand with a few of my friends! With that comes sleeping in a motorhome, eating lots of take-out, and dealing with limited wi-fi. I’m not sure when I’ll have a connection to get posts up, but I’ll keep the expectations low for now!

Lastly, I just want to say thank you to all of my followers, old and new! I still find it crazy that people actually read this thing, and enjoy it at that! Y’all are seriously the best, and I can’t wait to start another year in this community!

Filed Under: blogging Tagged With: new design