How to Create a Blog Button and Code ~ Share Your Blog!

I feel soooo accomplished today.

Finally, I've figured out how to create a blog button for Like a Bubbling Brook.  Do you see it in my sidebar?  Lovely, eh?

I'm certainly not an expert, but this seems like something worth sharing.  Maybe you've been wanting to do this, too?

Here's how to do it (in Blogger):

First, you must design your button.  To do this, you'll need a photo program like Adobe or Corel.

A standard square button size is 125 x 125, and some larger ones are 250 x 250, so when you open a new document, set the canvas size to 125 x 125 or 250 x 250 pixels.

Place your images and text on the button in an appealing format.

Save as a gif or jpeg to your hard drive.

Upload your image on a website like Photobucket, Flickr, or even a remote place on your blog.

Then, to put your "grab my button" and it's code on your blog:

Copy the following html code:

<div align="center">
<a href="http://likeabubblingbrook.blogspot.com/" target="_blank"><img alt="Like a Bubbling Brook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNx8y30hboE_NyZ9n9dawVbR_kDZ_5D03kCARakN1vaWAb4ow76zG-s53tPVRWiuC-VIJO0gmkE8Qd9QrRAPYfFNKtTcfdJ8Ayf0DUNZgegWZutPbLOfkoeTHLgboDwuiRaf-rXcYSNII/s660/labb+ad.jpg" /></a> </div>
<div align="center">
<form>
<textarea rows="6">&lt;a href="http://likeabubblingbrook.blogspot.com" target="_blank"&gt;&lt;img alt="Like a Bubbling Brook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNx8y30hboE_NyZ9n9dawVbR_kDZ_5D03kCARakN1vaWAb4ow76zG-s53tPVRWiuC-VIJO0gmkE8Qd9QrRAPYfFNKtTcfdJ8Ayf0DUNZgegWZutPbLOfkoeTHLgboDwuiRaf-rXcYSNII/s660/labb+ad.jpg" /&gt;&lt;/a&gt;</textarea></form>
</div>

Open your blogger account.  Choose the "layout" tab and then "add a gadget."

Choose "html"; paste the code you have copied in that html box.

Change my links and info to your info, i.e. the url of your blog, the name of your blog, and the link to your image. You'll need to go back to wherever you saved your image and get the direct link code.  You can usually find the link code by right-clicking the image and choosing "properties."

Click the save button and arrange your layout as desired.

Hopefully this makes it easier for you.  Don't forget to grab my button for your site while you're here!

-----
New here? Don't miss a post. Subscribe to get new posts via email or RSS... it's free!

For more tips and tricks, check out WFMW and Frugal Friday.