Creating a Blog Button–Why Didn’t I Think of That? Wednesday
Lifestyle

Share this with your friends! Thanks!

I don’t know about you but when I started this blog I didn’t know much about html codes and creating buttons. I knew I wanted one but had no idea where to start. One of my friends told me about her amazing sister-in-law, Janell, who is great with computers and a fantastic photographer. I contacted her and asked for help to create a button with a grab box underneath it. She was amazing at helping me create this and has continued to send me awesome websites like the two below. Thanks, Janell!

I realize I was wrong about this first site. Not only can you make buttons like the ones below but you can also make a grab button. After you type in all your information click on “Get Code” and it will give you the code for your button AND the grab box. Super easy!!

Grab My Button Code Generator

Here is the button it generated for me after you hit “Preview” be sure to hit “Get Code”. It is so stinkin’ easy!!!

Click it Up a Notch
<div align="center"><a href="http://www.clickitupanotch.com" title="Click it Up a Notch"><img src="http://www.clickitupanotch.com/wp-content/uploads/2010/11/Button-150.jpg" alt="Click it Up a Notch" style="border:none;" /></a></div>

Here are a few examples of some I have created using this website and grabbing the code after I hit “Preview” but before I hit “Get Code”. These are good if you are just looking for clickable photos/buttons like these.

Fruit and Seltzer Water

Photo Essay

Lenses

Details

Lightroom workflow

The key to this website is that you have already created the button and uploaded it to your blog (if using WordPress in your “Media”) or to Flickr, Picasa, or Photobucket. When you upload your image to any of those sources they will give you an “Image URL”.

If you are looking for some help creating your button and just want to plug in your info and not having it generated for you. Be sure to check out this post.

How to Make a Blog Button Grab Box

I used this blog post to help create this button:

Click it Up a Notch

Share this with your friends! Thanks!

12 Comments
  • April 6, 2011 at 10:57 AM

    I love your tutorials!! I just recently learned how to make a button but was struggling to link it up so people could click on it or grab the code. Sarah Halstead saved my booty!! haha. I know A LOT of people are going to enjoy making buttons thanks to your help!

  • April 6, 2011 at 10:12 PM

    an awesome and helpful post – thanks so much

  • April 6, 2011 at 11:35 PM

    That was totally me- I didn’t know the first thing about writing code- I still only know enough to do what it is that I want to do. But it’s a start. Great post!

  • April 7, 2011 at 2:54 AM

    Okay, I tried to make one but it didn’t work. Where are you pulling your photo from and is it okay if the photo is a jpeg? I noticed that his or her example of the image url contained “.gif” not “jpeg”. Help?!
    Please & thank you! :)
    ~ingrid

    • April 7, 2011 at 9:34 AM

      Where did you upload your picture to?? Yes, all my photos are in jpeg so that should be a problem. If you want to email me the info I can help walk you through it :O)

  • Thanks so much for sharing this. I’ve been paying someone (a teeny amount) to create my buttons. It’s fun to know that I can do it myself now! I plan to share this little secret with everyone I know.

    Have a fab Wednesday!!!

  • April 7, 2011 at 12:01 PM

    Thanks so much, I have no idea what I am doing. This post helped me create a button.

  • April 11, 2011 at 10:51 AM

    You’re very sweet to always give a shout out to me. :) You don’t have to though, i’m always happy to help out a fellow photog!

    • April 11, 2011 at 2:31 PM

      Got to give credit where credit is due :O)

  • April 29, 2011 at 3:20 AM

    Thanks for the links! So easy!! I thought I would need a blog designer to make me a button.. never imagined I could do it myself.. nevermind without photoshop! Thanks again!:)

    • April 29, 2011 at 8:59 AM

      No problem! Glad I could help!

  • August 19, 2011 at 4:05 AM

    I’m finally getting around to making a button which was fairly simple! I used the code generator that you mentioned, which was also easy! However, when I add the code to my widgets, it doesn’t copy in its entirety. I have my button on the blog, with a partial code. Any idea what I could do to rememdy this? Not sure if wordpress is keeping me from adding the code.

Leave a Comment

shares