How to Make a Blog Button

I made a new blog button the other day and thought I would share the step-by-step in case you wanted to create your own!

First things first, choose a picture

Next, you’ll need to upload it to a hosting site, I prefer Photobucket 
Once uploaded, click “Edit” underneath the photo and it will take you to the editing options
Here you can add text, edit the photo, and resize your photo to the correct button size
I added text (under the “Decorate” tab) and resized to 150×150 (under the “Basic” tab)

At the bottom, select “Save a Copy” and it will take you back to Photobucket
Take note of the link box on the right, you’ll need it later
Your button photo is complete! Now for installation …
In Blogger, go to the “Layout” tab on the left and find “Add a Gadget” (on the left or right depending on how you have columns set up for your blog)
Choose “HTML/JavaScript” and enter the following …
For the button photo:
<center><a border=”0″ href=”yourblogURL” target=”_blank”><img src=”yourimagedirectlinkURL”/></a><center>
For the copy/paste text box:
<center><textarea rows=”4″ cols=”20″>
<a border=”0″ href=”yourblogURL” target=”_blank”><img src=”yourimagedirectlinkURL”/></a>
</textarea><center>
Replace “yourblogURL” with the website you want the button to link to. In my case, http://thatmamagretchen.blogspot.com/. Replace “yourimagedirectlinkURL” with your button photo’s direct link URL – this is found in the link box I mentioned above.
My “HTML/JavaScript” looks like this in the “Add a Gadget” box …
Click “Save” and drag/drop the HTML/JavaScript gadget to where you want it to appear in your blog’s layout.

The HTML/JavaScript translates to this on my blog’s right sidebar …
Perfecto! Now it’s all ready for folks to grab and share on their blogs!
Happy button making! 
If you use this tutorial to create a button I’d be oh-so-appreciative if you linked back here. Thanks!

Photobucket
Vote For Us @ topbabyblogs.com!
(Visited 81 times, 1 visits today)

You May Also Like:

Comments

  1. says

    great tutorial. I might go ahead and make a new button.

  2. Jamie Scholberg says

    My hero! Will try soon! =D

  3. says

    Thank you, Gretchen! I FINALLY made my button! Phew. That was not as painful as I have been thinking it would be. Your tutorial was perfect. Thanks for all the screen shots!

  4. ThatMamaGretchen says

    Glad it helped! It was totally daunting the first time and then it gets easy :) ________________________________

  5. says

    When you are using Line you can take a picture from your phone and upload it on the application on your phone or a website from your computer and can name or caption the picture and can add tags too.