Blog Tips: How To Make Your Own Blog Button

by Mama Kat on 01/13/2010 · 61 comments

1.) You’ll need a Photobucket account. I’m sure there are other ways to do this, but I’ve been the most successful with the codes I get from Photobucket and resizing the buttons is a breeze with that site.

2.) Upload your photo to that site and shrink it to the size you’d like it to be as a button.  Click “more options” if the size you want your button to be is not immediately listed and you’ll be able to specify a size of your choice.

Photobucket

The “direct link” is the code that you’ll need.

Photobucket

3.) Cut and paste the following code into the “html” version of your blog post. Doing this sometimes flips the quotation marks around. If I were you I would go through and re-type the quotes after you’ve pasted the code  just to be sure they’re all facing the right way.

<div align=”center”>
<img src=”http://i913.photobucket.com/albums/ac331/mamakatslosinit/poodle4.jpg” alt=”Mama’s Losin’ It” /><br/>
Copy and Paste Code<br/>
<textarea cols=”20″ rows=”6″><a href=”http://www.mamakatslosinit.com/” target=”_blank”><img src=”http://i913.photobucket.com/albums/ac331/mamakatslosinit/poodle4.jpg” alt=”Mama’s Losin’ It” /></textarea>
</div>

4.) Insert your own information.

<div align=”center”>
<img src=”This is the “direct link” option from the list of codes supplied on Photobucket” alt=”Your title” /><br/>
Copy and Paste Code<br/>
<textarea cols=”20″ rows=”6″><a href=”your destination page” target=”_blank”><img src=”The “direct link” from the list of codes supplied on Photobucket” alt=”Your title” /></textarea>
</div>

And Wa La:

Mama's Losin' It

Copy and Paste Code

Now if you just want a button without the code box beneath it…maybe for an ad you’ve created or something. The code I use looks like this:

<a href=”http://www.mamakatslosinit.com/“><img alt=”Mama’s Losin’ It” src=”http://i913.photobucket.com/albums/ac331/mamakatslosinit/poodlebutton2.jpg” title=”Mama’s Losin’ It”/></a>

Again, just insert your own information (but re-do the quotation marks!):

<a href=”the URL you want the button to take you to” then the image info: <img alt=”the words you want for search results” next is the image location: src=”ie, photobucket” and finally the title: title=”the words that pop up when you hover over the button“/></a>

And there you have it!!

Related Posts with Thumbnails

Facebook comments:

{ 42 comments… read them below or add one }

1 erica January 13, 2010 at 9:11 am

Were you reading my mind this week? Because on Monday I designed my own button… but it would have went a lot smoother if I had a Jill.

Reply

2 Valerie January 13, 2010 at 9:11 am

Super helpful!! Thanks!

Reply

3 Jaci Daugherty January 13, 2010 at 9:22 am

I so not computer savy. I still figuring out how to move my blog to my own dot com. So sad. :(

By the way…I absolutely LOVE the picture of you in your header! You look so svelte.

Reply

4 Kathy January 13, 2010 at 9:42 am

I found a site quite a while back called Oinkology or something like that and she had these steps written out too. Now I’ll just come back to you the next time I want a new button :D

ps Your new button is pinkalicious!! I love it!!

Reply

5 parenting BY dummies January 13, 2010 at 9:43 am

That is SO useful. Now, if my dumb brain can actually figure it out on my own I’ll be surprised. Let me make sure I have it right…I email Jill then I email Angie and I’ve got myself a new button?! Sounds easy enough. And, I’ll be sure to tell ‘em you said to do it:)

Reply

6 Jenn January 13, 2010 at 9:45 am

Thanks for that! I am no good with coding etc and I believe I understand this! I will try it out and see how it goes :D

Reply

7 Helene January 13, 2010 at 9:52 am

I’ve been wanting to make a button for my site but had no clue!! Thanks for sharing this!

Reply

8 Amethyst Moon January 13, 2010 at 9:59 am

OMG! Thanks so much! I can’t wait to try it!

Reply

9 Tracee January 13, 2010 at 10:33 am

Great Post!!! I’m so glad you posted this, I am such a dummy when it comes to this stuff, it’s amazing I even have a blog at all. One day I will do a button and use this info. Thanks a bunch! You have my blessing to pick your friend’s brain for more neat stuff like this.

Reply

10 Lourie January 13, 2010 at 10:50 am

I have been trying and failing to do this…hopefully this will do the trick! Thanks so much for the tutorial.

Reply

11 Michelle January 13, 2010 at 11:02 am

Awesome! I’ve never known how to do this!

Reply

12 Scary Mommy January 13, 2010 at 11:14 am

See how amazing the world would be if everyone had a Jill and an Angie?!

And, whoa, Mama- what happened to the color? Can you go into Flicker and see if you can make the pink a little less purple? For me?

Reply

13 Kim January 13, 2010 at 11:25 am

Thanks! Can’t wait to give this a try! Yours is super cute!

Reply

14 Aleta January 13, 2010 at 11:33 am

Love the button! That is just too adorable!

Reply

15 Christina January 13, 2010 at 11:43 am

I can’t get it to work…I tried 5 times!! :(((

Reply

16 Lolli January 13, 2010 at 12:01 pm

Adorable button! You’ve always needed one especially for WW. Yay! Thank goodness for good friends.

Reply

17 Justine January 13, 2010 at 12:08 pm

Ya know, there are tutorials out there that could have told you the same thing that you used 3 people to do! Heeheeheeeeeeeee

Now, I didn’t read yesterday’s post because I’ve only watched about half the show so far. But I see in your blurb you think Jake is a dork. OMG, he’s HOT.

And btw… your page is loading VERY slowly the past few days.

Justine :o )

Reply

18 Alicia January 13, 2010 at 12:09 pm

ooohhhh love the fancy shmancy button ya got there!!

Reply

19 MamaOtwins+1 January 13, 2010 at 12:13 pm

Amazing – just amazing!

Reply

20 Sunday Stilwell January 13, 2010 at 12:19 pm

Thanks! I needed to do this.
Now…could you just tell me how to get my gosh-darn header centered? UGH, its driving me batty!

Reply

21 GregoryJ January 13, 2010 at 12:40 pm

Thank you for sharing. I’m paying someone else to make my button. Now I can make others for my blog myself. For a button and signature, she’s charged $6.00. So cheap, but if I can have the fun of doing it myself…

Thanks,
GregoryJ

Reply

22 Salt January 13, 2010 at 1:06 pm

Finally some advice on this topic that I think I’ll be able to follow. :) I have a button, but never could figure out the code box. Thank you!

Reply

23 Lisa Anne January 13, 2010 at 1:26 pm

Your gonna make all the people who charge for this very mad. LOL

Who cares though, cause your making a lot more people happy!!

Thanks for posting this!

Reply

24 Kisha Floren January 13, 2010 at 1:55 pm

Cutie cute cute cute button! Can’t wait to get it up on my site!

Kisha

Reply

25 Christopher (AKA: CaJoh) January 13, 2010 at 2:16 pm

Now all you need is an icon next to the http portion of the address bar. See if you can have your friend create a favicon for you. I would suggest having the poodle’s head. I think it would be cute.

Reply

26 Jen @ buried with children January 13, 2010 at 3:34 pm

I LOVE the button! It is very cute. Jill is awesome when it comes to making buttons. A great person to have on your team.

So what services can I provide you so that I can be your bloggy friend?

;)

Reply

27 Jen @ buried with children January 13, 2010 at 3:35 pm

And I was just wondering, had wordpress taken you away from gmail? Does WP come with email too?

Reply

28 Jennifer January 13, 2010 at 4:46 pm

This is so awesome!! Thank you!! I’ve always felt a little left out since I didn’t have my own blog button. Now I know what I’m going to be doing tonight!!

Thanks!

http://thetoyboxyears.blogspot.com

Reply

29 Jenners January 13, 2010 at 4:48 pm

For someone who allegedly doesn’t know what they are doing, this was a pretty complete and helpful tutorial.

Reply

30 kisatrtle January 13, 2010 at 6:42 pm

I made one of these once. It was for the ever so popular Let’s Get Crafty Saturdays that I hosted on my blog like three times. After no one participated at all I got a little discouraged but maybe I’ll bring it back this weekend. Love the new button by the way…

Reply

31 Jen January 13, 2010 at 6:51 pm

Hehe, I had to teach myself this for my new job. I learned a bunch of HTML code from internet resources. I can pull up my fav site for you if you ever need it!

Reply

32 Kyrsten January 14, 2010 at 2:55 am

Oh I’m sooooooo thankful for this post! Really, I cannot tell you how much!
So I think I will work on a button this afternoon :-)

Reply

33 Andrea January 14, 2010 at 9:18 am

Too odd, I just created one yesterday for my business blog. I did it w. another website’s tips, but I totally didn’t realize you had just posted the same kind of info!! Thanks. I’ll use yours when I finally get around to one for myself!

Reply

34 S Club Mama January 14, 2010 at 8:01 pm

wow, I have absolutely no idea what any of that means. LOL no really that sounds pretty easy except the resizing of photos. I’d have to figure that one out (eek). But maybe I’ll figure it out and make myself a button. Thanks!

Reply

35 WebSavvyMom January 15, 2010 at 9:57 am

–>I’m glad you got it working. Sorry I was slow to respond to how to fix the code. It’s a great looking button too.
~deb

http://www.WebSavvyMom.com

Reply

36 Leslie Limon February 9, 2010 at 6:35 pm

Thank you so much! I’ve been wanting to make a button for my blog, but didn’t know how to get the lil’ code box beneath it. Thanks to this post I was finally able to do it! :D

Greetings from Mexico

Reply

37 Domesticated-Bliss April 6, 2010 at 12:13 pm

Wow! Thanks so much! It wouldn’t work for me after several tries and then I saw that the evil Blogger was trying to insert its own web address in there and it was mucking it up :) Also, it doubled the # of quotation marks too…

Weird. Anyhow, now I have a button thanks to you!

Reply

38 S Club Mama April 13, 2010 at 11:30 am

alright I tried this. I must not understand. It’s totally not working except for the actual picture itself. I can’t do the copy & paste so I guess no one will have my button.

Reply

39 Kattia Gordon April 20, 2010 at 9:53 am

I did it woohoo, thanks I have been trying to figuer out how to do it, thank you thank you

Reply

40 Karen Long June 24, 2010 at 1:40 pm

I an new to blogging, but have been fairly happy with me learning tricks of the trade.. but i probably have a simple question,,that i was hoping you could direct me on.. How do I get my comments to”Show” at the bottom of the page,, instead ,, it just says 3 comments. then i have to click on the 3 to see them.. I hope you can take a minutes to tell me how to adjust me setting so that everyone can see comment made ..like yours..
Thanks so much… God Bless…

Reply

41 Marvi Marti July 3, 2010 at 11:51 am

grrr….I have tried over and over again to make my button but something isn’t working. Anyone that can assist let me know I so want it to work!

Marti

Reply

42 Embejo July 3, 2010 at 2:34 pm

Cool. Handy info. I just need to know how to make the image/logo thingy. Or find someone to make it for me…*HINT* !!!!! Anyone??? lol ;)

Reply

Leave a Comment

{ 1 trackback }

Previous post:

Next post: