Thursday, August 12, 2010

Make Your Own Blog Button

Today I made my own blog button! Pretty exciting... check it out. It's on the side under "About Me". Feel free to grab it and post it on your blog! I've been wanting to do this for a while now but didn't really know how. I googled about how to do it and found this blog that lists step by step instructions... fabulous instructions I might add!

Find the instructions HERE!

I'm posting my summary of the tutorial as well. I was having trouble with the HTML codes trying to execute so I had to add asterisks to keep it from trying to run. Just omit them when copying the code.

Basically, I created my button using Photoshop. I made the canvas 150 by 150 pixels. The tutorial suggests this size because many sidebars aren't bigger than 200 pixels. I used several of the design tips I learned from Kevin & Amanda when I made my background and header (see that post HERE).

I then uploaded the picture to my photobucket account. I highly recommend getting one of these! It's great! Really handy for uploading my stuff!

You'll need your blog URL (mine is You'll also need the direct photo link. You can find that by right-clicking on your photo and clicking "View Image". The URL at the top is the one you want.
Then you create a new HTML/Javascript gadget on your design page. You can name the gadget anything. I used "Grab a Button". The code you post, as well as making it centered, is as follows (but remove **asterisks**):

<**center><**a border="0" href="http://linktoyourblog/" target="_blank"><**img src="http://directlinktoyourpicture/" /><**/a><**/center>

Save and drag the gadget to wherever you want it (mine is below my "About Me"). Now, view your blog to make sure everything worked right. If it did, continue :)

Create another HTML/Javascript gadget. Don't add a title if you want it to be "joined" to your button. This will create the text box for people to copy your HTML. Oh, and remember that code you just posted above? You'll need to paste it here too. Post this (but remove **asterisks**):

<**textarea rows="4" cols="20"> Entire Code From Above <**/textarea>

Save and drag it to right below the button HTML.

There you go! You have your own blog button. Now you can share your blog on other people's blogs! How great is that? Hope this helps others. Let me know if anyone designs a blog button of their own so everyone can check it out!

Have a great Thursday :)


Mass Hole Mommy said...

Hi there! I am your newest follower!

tramartin said...

Hey there. I figured out yesterday how to add the button. It took me almost 2 days LOL. After I figured out how to make the button I couldn't figure out how to link it. Then when I did I couldn't get it to work. It finally does though.

I'm going to grab your button and put it on my site. If you would like to grab mine feel free too, but don't feel like you have too :-).

Life of This SAHM

eof777 said...

Oh Thank you!!!! I have been wondering how everyone made their buttons. I have bookmarked your page to come back for the instructions.
Glad I stopped by your blog for the Quality Time Follow back Friday visit and have followed you here.
Do follow back :-)

Daniela said...

Thats awesome, I was wanting to do this the other day and came across some lame sight that was not helpful. I am definitely a new follower...hopefully with a new button of my own soon..haha

ladyguinevere28 said...

I find your blog interesting I add you in my favorites and I would like to follow your instruction. I am joining the Friday Blog Hop. I am following you now. I hope you could return the favor. Its and

Thank you


Living on Love and Cents said...

Thank you so much for the advice on my blog design! I checkout that site and it is wonderful! I really appreciate it! Have a great weekend!

Nan said...

Thank you for join Friday Follow New Friends,
Hope you get more friends here, and also hope to see you again next week.
Have a great day.

Something Wilde said...

Cool! I can't wait to try this out...maybe tomorrow during naptime!

Kimberlee said...

Your button came out very cute! I loaded a favicon (the little icon in the web address bar). I posted the links to the directions on my blog.

the cape on the corner said...

i'm gonna have to try this one out. wish me luck!

Angela Lee said...

I have been trying to do this for months now!! Thanks to your post, I have finally succeeded. I don't like my picture, but I can always change it later now that I know what I'm doing. Thank you, thank you, thank you for clear, easy to follow instructions!!

Post a Comment

Related Posts Plugin for WordPress, Blogger...