Embracing Adventure “Life is either a daring adventure or nothing.” ~~Hellen Keller

Overseas Adventures Has a Blog Button (& Here’s How I Made It)

The image I used with text.

The image I used with text.

For awhile I have admired people’s nifty blog buttons but never had one of my own. At one point, I poked around trying to figure it out and decided not to hassle with it. I figured I’d just make one if the occasion came up that I needed one, and for two years it didn’t. Then yesterday someone asked if I had a blog button for a guest post on their blog (hopefully coming soon), and I decided it was finally time to make one. I had to go through some trial and error finding instructions I could a) understand and b) get to work, so today I wanted to share with you the two sets of instructions that helped me so you don’t have to do as much searching if you want to make your own.

First I needed to figure out making the image, which seemed like it would be simple enough, and it was. I like the instructions provided by Taylor at Texas Women Bloggers. I took the suggestion to use Pic Monkey, which was very easy to navigate. I cropped a picture I had taken last year overlooking Heidelberg from the Philosophenweg, and then resized it. Since she had used 250X250 as an example, I started off with 250 X whatever was in proportion to that (rather than making it a perfect square which I thought might distort the picture). I later read that most buttons are 200X200 or 150X150, so you may want to keep that in mind as you’re making your image.

The original color vs the blog button using Color Cross Green

The original color vs the blog button using Color Process Green

Once you have it cropped and resized the way you want it, you can add effects, overlays, frames and more. I decided to keep it simple for my first attempt. Under effects, I used Color Process Green at 30%.  Just to give you an idea of what that does to the color, here is the original picture (cropped and resized as close as I could manage to my final button) on top of the final button, although it’s a little distorted due to the program I used to make the collage (FotoFlexor by the way, if you ever need a quick way to make one). Then I added text. I used Bradley Hand ITC for the font.

When I was finished, I uploaded the picture to Photobucket and followed the rest of the instructions to get the HTML code. Unfortunately the instructions on Texas Women Bloggers leave you with a code you can use or send that is just a picture that people can click on to go back to your blog. Although that’s useful enough for someone else’s sidebar, it doesn’t readily allow people to grab the button, which is what I wanted, so I went in search of a way to add a grab box for the HTML.

After much trial and error, I finally found instructions that worked for me by Marie at Code it Pretty. At this point, I realized the text on my original button wasn’t really centered, so I made a new one which was 237X188 and paid better attention to the centering of the text. Then I followed her step by step instructions to create the code. To do what I did where you put it on the sidebar in WordPress, you need to go to Widgets and select the “Text” option. Then just copy paste the code into there and drag the widget to the position you want it to be in on the side bar.

I started with mine at the top and it looked too big. Since I had saved it into Photobucket, which allows for resizing, all I had to do was use the resize feature there. I wanted it to keep the same scale, so I set 200 for the width which ended up giving me a 200X158 picture. (Instead of saving to the same picture, it created a new one with a file name made up of a string of letters and numbers rather than what I’d have chosen. I was too lazy to worry about that though so I went with it.) Although the picture looked fine, the grab box didn’t. It was set for 150X150 which did not look right under a 200 pixel wide picture. So I moved the width to 200 and played with the length. I ultimately decided that 200X50 worked the best for me. And this is my final product.

Grab button for Overseas Adventures

200px; margin: 0 auto;”>

<a href=”http://embracingadventure.com” rel=”nofollow”>
<img src=”http://i1248.photobucket.com/albums/hh492/phoenixxphyre/Blog%20Buttons/e8d19864-b232-4ce8-a199-9d03de6a1032_zpsfe17d113.jpg” alt=”Overseas Adventures” width=”200″ height=”158″ />
</a>
</div>

I hope you’ve enjoyed this look at my first-ever blog button and that this information is helpful for you if you’re in need of your own. If I make another one in the future I will probably get a little fancier with it now that I know what to do and what some of my options are in Pic Monkey, but I think this one will do for now.

Related Posts:

4 Thoughts on “Overseas Adventures Has a Blog Button (& Here’s How I Made It)

  1. I tried to “steal” your blog button for my friends bar but it does not show up. I don’t know what I am doing wrong. 🙁

    • Hmm. Did you grab the whole code? Since the box is small, it’s got a scroll bar, and you need the whole thing. If that’s not the issue I am not sure since the post said it should work for WordPress and Blogger. Unfortunately since this box accepts HTML it doesn’t seem to want to let me paste in what you’d need even if I try to alter it with instructions instead of the actual words. Arg. I will email you the full code and a shorter one that should work just for a picture that links back to my blog and hopefully one will work. Thank you for trying:)

  2. A blog button! I’ve heard of this before and now here you are, in the frustrating process of having created one! I never did before but your post sounds like a lot of trial and error. I am not sure I ever will but If I do, I will keep the difficulties with pictures sizes in mind. I usually use Irfanview if I quickly want to resize or create a simple collage. In case that helps for future reference. It’s also a free program.

    • It was. It took me a couple of hours of going through people’s instructions (mostly on the ‘grab box’…the image just with a direct link took me no time at all, but that doesn’t help me to get a button that other people can put on their page lol). Some were just confusing and others just didn’t work for me. The one I mentioned in the post worked the first time and the only trial and error was fiddling with the sizes to get it looking how I wanted it (which didn’t take long at all). If you do decide to make one for yourself I recommend just clicking the instructions link and following that. (If you already have the pic the size you want it just start with the ones for ‘grab box’.) Easy peasy. If you make one, let me know and I’ll add it to my ‘friends in the blogosphere’ section I just added to my sidebar 😉 Thanks for the tip on Irfanview. I will have to check it out next time I need to make a collage. Fotoflexer is pretty easy but sometimes their box options don’t really work out for the pics I have (such as in that example lol).

Post Navigation

%d bloggers like this: