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.
The “direct link” is the code that you’ll need.
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:
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!!
{ 42 comments… read them below or add one }
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.
Super helpful!! Thanks!
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.
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!!
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:)
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
I’ve been wanting to make a button for my site but had no clue!! Thanks for sharing this!
OMG! Thanks so much! I can’t wait to try it!
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.
I have been trying and failing to do this…hopefully this will do the trick! Thanks so much for the tutorial.
Awesome! I’ve never known how to do this!
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?
Thanks! Can’t wait to give this a try! Yours is super cute!
Love the button! That is just too adorable!
I can’t get it to work…I tried 5 times!! :(((
Adorable button! You’ve always needed one especially for WW. Yay! Thank goodness for good friends.
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 )
ooohhhh love the fancy shmancy button ya got there!!
Amazing – just amazing!
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!
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
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!
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!
Cutie cute cute cute button! Can’t wait to get it up on my site!
Kisha
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.
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?
;)
And I was just wondering, had wordpress taken you away from gmail? Does WP come with email too?
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
For someone who allegedly doesn’t know what they are doing, this was a pretty complete and helpful tutorial.
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…
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!
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 :-)
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!
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!
–>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
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
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!
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.
I did it woohoo, thanks I have been trying to figuer out how to do it, thank you thank you
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…
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
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 ;)
{ 1 trackback }