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!
<div align="center"><a href="http://jennsadventures.com" title="Jenn's Adventures"><img src="http://i112.photobucket.com/albums/n193/hinano_/BlogButton2.jpg" alt="Jenn's Adventures" style="border:none;" /></a></div>
I told you!
Now let me see yours–I showed you mine!! 😉
Want to Swap Blog Buttons?