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”</a></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” /></a></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!!
{ 69 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.
Jill’s and Angie’s come in very handy. I pick my blog friends based on what service it is they can provide for me. Being pretty just isn’t enough. ;)
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.
Awww thanks! I originally changed to dot com through blogger…I hear a lot of people use godaddy.com though and that would be better if you think someday you might move to wordpress.
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!!
I love it too! Jill did a great job. I’ve never heard of oinkology hahaha…wish I had known about it before I made my friends do all my dirty work. :)
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:)
No…you need to find your own Jill and Angie. If everyone uses them than what will *I* do!?!
It took me some fiddling with the code before I got it just right, but you can 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.
And I will…I’m like you, slooowly learning as I make my way through all this code mumble jumble. I hope it helps!
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?
Oh you’re right…I didn’t even notice. The picture is in photobucket and I went in and messed with the hues, but I don’t know if it did the trick.
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!! :(((
Weird….I wonder what’s going wrong. What site are you uploading the picture to? I’m not familiar with all of them, but Photobucket offers me four different types of codes…one of them is called “direct link” and that’s the photo url I use. Flickr has a similar option…
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!
I think I saw you asking about that awhile ago…I have no idea! Have you tried google searching answers? I’ve found a lot of helpful tutorials when I have problems like that.
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
6 bucks is a great deal!! Especially if you don’t want to fiddle with your own design…it is kind of fun though!
Yeah, I can’t believe it is so low. I asked her and she said it’s not how she makes a living.
I am fiddling with it though. And I can’t get it right. Well, maybe I did in a way. I put a button for my second blog on my first blog and it works. I worked through photobucket, but did not do it according to your instructions. I still need to practice. Any idea of the code to make it open in a new tab?
Thanks. Your button is great. My button is nothing like it.
GregoryJ
I googled my question and I found out how to open it in a new window, and it works. horay.
I don’t think mozilla can do new tab. but new window is great. that way they have both my blogs open.
I didn’t realize mine wasn’t opening in a new tab. Are you using the target=”_blank” code? Where did you add it?
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!
Well one thing the people that charge have to offer is the original designs they come up with! I don’t know if I could pull that part off on my own. :)
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.
Yeah I want one of those! Do you know how to do it? I think I saw a tutorial somewhere in blogland….hmmmm…may be time for a google search.
Do you have access to your FTP server? If you do, you can have an favicon generated here – favicon.cc – then overwrite the favicon files already in place. I see you’re using Thesis. There should be one file under the theme’s folder, and under the main WP folder in your FTP uploader. Just upload the new .ico files and opt to overwrite the files in BOTH places (name your new icon favicon.ico so you don’t have to go back into the code of your blog and rename the links in the css). Make sense? If not, feel free to email me :-)
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 dumb myself down a bit. Poodles are actually very bright animals you know. :) I can simplify something once I learn it, but this stuff is gibberish to me.
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 ;)
i tried it and i can’t get it to work either…i get this
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The markup in the document following the root element must be well-formed.
Hi!! I love your blog!I am so happy I came across your blog tutorial. I found other tutorials & I tried them but they didn’t work after multiple tries. I tried yours once & it worked soo perfect. Thank you soo much!! I hope you have a great day!!!
It worked!!! Thank you! Thank you! I honestly thought this wouldn’t work for me as the afternoon coffee hasn’t kicked in yet, but it did! It did!
Thank you so much for this and for the entertaining reading. Headed to check out the “Writer’s Workshop” now!
I read your post above (thank you!) and wanted to contribute a tutorial on how to add your own blog button for those using Wordpress. I made a step by step tutorial here: http://multiplemamas.com/2010/10/how-to-make-your-own-blog-button-using-wordpress/
OMG! You have no idea how happy you made me!!! LOL
I tried to do this three times! Finally I just typed everything by hand!!! And I did it…doing the Happy Dance!!!
Thanks!!!!
dhGSjh I’m not easily impressed. . . but that’s impressing me! :)
Thanks so much! I used this tutorial and it really helped me get my button done!
thank you so much for this! I have tried for a very long time to make my own button and for some reason I could never get it right. So thank you, thank you, thank you :)
Thanks for this! Could you help me out? I got everything to work except that instead of the bottom icon being a text box, I just wind up with the identical button every time I try it. Any idea what I am doing wrong? Btw, I LOVE your headder pic!!
It opens in new window, not new tab. I use mozilla firefox.
the code did not paste into the comment, so I emailed it to your gmail