How to Make a Blog Button

So you ask, what is a blog button? Blog buttons are a great way to advertise your blog. Basicly it is an image that links back to your blog with HTML under that your readers can copy to put your button on their blog.

 There are many different types of buttons like I was featured buttons, Link party Buttons, Buttons for blogs you like.

First things first.
Size: Make your image 150 pixels by 150 pixels. Most templates have the sidebar size set to 200-250 pixels and you don’t want your blog button to be one of the unsightly ones that is way too big for your reader’s side bars so 150 pixels it is. I use Photoshop to create most of my designs but you can create it on Picnic or other free programs just resize your file to be 150 x 150

After creating your button you will need to host it online so that it will have a url. I use Photobucket.  It’s free and easy to use.

So you created your Photobucket Account. Upload your image by clicking... drumroll please.... Upload. Then click this button!

 Once it is loaded on the bottom left of your screen will look like this. I was too lazy to put any info in about it so I left it blank and clicked, "save and continue to album" on the right of the screen.


Which look likes this.


Once you are to your album it will look like this.


Click on your button to be and it will take you to an individual page just for that image.


  and  keep in mind on the right of the screen is where you will click on the DIRECT LINK to copy the URL


So what do you do now? You create your HTML. (I know it sounds scary but its not!)

Simply replace "Where you want the button to link to" with where you want the button to link to. :) For example, I want mine to go to my main page so I put HouseandHone.blogspot.com between the quotations.  It is important to put it in between the " " or the HTML wont work.




 Go back to your photobucket and click on the direct link and insert it in the "Button Image Direct Link" part of the HTML. Like mine would be, "http://i1248.photobucket.com/albums/hh498/EmilyHone/IloveHouseandHone.jpg"

Now you have completed the HTML.

Next go to your blogger and add an HTML/JavaScript gadget.

And insert in your HTML



Now you have your image! Way to go!

But wait there's more! You want your guests to be able to snag your HTML so they can post your button to their blog. So lets make one of these!


On the same HTML/JavaScrip Gadget, Under your HTML for your image insert the Red Text


<textarea rows="4" cols="20">
YOUR HTML FROM ABOVE
</textarea>


Replace "YOUR HTML FROM ABOVE" with your HTML you created just a second ago. There are no " " on this part so just put in the HTML.




And now what? Hit save and Viola! You created a Blog Button!



Obviously yours will be customized to your blog! But Look at you! You just made a Blog button for your blog in no time!

Linkin Up to......
Home Stories A2Z
The Southern Institute
Skip to my Lou
mop it up mondays



Did you make a button using this tutorial? Lets add your button to this post! Leave your info and I'll head over to your blog to snag your button! Lets see how creative you get!

Labels: