Tech-y Tuesday | Blog Buttons

First and foremost, I cannot even begin this post with out pointing out something I noticed yesterday — If you blog via Blogger, tell me this is new!! Tell me I’m not just noticing this long and over-due easy-peasy option for our links!!

I used to have to swap to “Edit HTML” mode and manually type out a long and tedious code to have this option, and now all I have to do is check a box — to tell you I’m stoked is such an understatement! 

Okay, moving on to the topic at hand: Blog Buttons! As I’ve mentioned before, if you have a blog and invest your time into it (ie: care enough to pimp it out and publish blog posts on a consistant basis) then you should not only have your own custom domain, but you should also have a Button/Badge!

I do — check it out!

Creating Blog Buttons/Badges is beyond easy, and I believe anyone can do it. All you need are three things: A photo, access to picmonkey, and a photobucket account — all of which should be FREE, and we all know by not that I like free!

I honestly think the hardest part is determining a photo. Once you decide on a photo, edit it the way you want your button to look and save the image at 200 — only because you want your button to fit in the average bloggers sidebar. Some might advise 125, but seriously, that is flippin’ small, and resizing is an easy fix down the road if you ever need to accomodate such a change.

Let’s do it together; I’ll make another button with you.

So let’s pick our photo:

I pick this one because…

..I think everyone knows I’m Starbucks biggest fan, so I find this photo to be pretty fitting for a button, don’t you?

Now let’s upload our image to picmonkey and edit accordingly…

This is what I came up with:

When you save the image, remember to change the SIZE of the image to 200. Save it to your desktop, “Blog Folder,” or wherever, and then upload your newly edited photo to your photobucket account.

Now comes the fun part… Adding your button to your blog.

If you use Blogger for example, click on your “Design” tab. Add the HTML/Java widget and copy/paste the following code:

<a border=”0″ href=”YourWebsiteURL” target=”_blank”><img src=”YourButtonImageURL” />

border=”0″ href=”YourWebsiteURL” target=”_blank”img src=”YourButtonImageURL“/

Get the “Direct Link” for your image from photobucket, and fill in the above highlighted areas accordingly (including your blog’s URL–which should be a short, and easy to remember customized domain; tsk, tsk).

In the title area of your widget, put something like, “Grab My Button!” if you want, and click save. When the box closes, make sure you drag and drop the widget where you want it on your blog if it isn’t there already, and click save again in the design area.

Preview your blog, make sure it’s perfect-o, and BOOM, new blog button!

Jenn's Adventures
<div align="center"><a href="" title="Jenn's Adventures"><img src="" alt="Jenn's Adventures" style="border:none;" /></a></div>

Easy, right?!

I told you!

Now let me see yours–I showed you mine!! 😉

Do you have a blog button?
Want to Swap Blog Buttons?
Why don’t you have a blog button?
Do you plan on creating a blog button now?
Were these instructions even helpful?

18 thoughts on “Tech-y Tuesday | Blog Buttons

  1. I didn't notice that link option either!!!! that's great. I edited the html once but then it would open EVERYTHING in a new window and leave people with like 20 of my pages all over their screen = not good. So I deleted it. This is GREAT news 😀 ALSO I don't have a button and have asked for my own domain for xmas 🙂 lol as I will leave blogger when I do that

  2. SWEET!!!! thanks for sharing. i pretty much do not know how to do anything tech-y so this post was perfect for me to learn something new. i will have to get on this maybe this weekend at some point!?! yay! fun!

  3. Do you have a blog button?

    No, I do not.

    Want to Swap Blog Buttons?

    Sure… is this like yearbook thing??

    Why don't you have a blog button?

    Because I didn't see the purpose of it. But now I kinda get it. Kinda (fuzzy preggo brain here!)

    Do you plan on creating a blog button now?

    Yeah… just need a photo op.

    Were these instructions even helpful?

    Is there sugar in syrup?

  4. I have always thought about a button but (a) I never knew how to make one and (b) I didn't think anyone would want it. I thought it would just be a useless photo on my sidebar! I might think about doing it for fun now that you broke it down!

  5. I LOVE YOU!!! I know it sounds ridiculous, but I have been wanting to create a banner/header with pictures ever since I started and I couldn't figure out how to do it so that I actually liked it enough to post…and I just did it!!! It might need a little more tweaking, but it's good enough for now – thank you a million girl, you're the best!!! Now to work on the button…that will be a project for another night 🙂

  6. YAYYY! I did not even notice that little option to open the link in a new window. Thanks for the heads up!
    And thanks so so much for the blog button tutorial! So helpful!
    I gotta get on that!

  7. OK, sounds like something I can do. But WHY do I want one? When i'm on other people's blogs I see “Grab my button” but I don't know why I'd want theirs either. I'm a rookie blogger, so pardon my ignorance! Can you help a sister out?

Let's chat! Comment here..

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s