4.27.2010

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.

5 comments:

  1. How cool is that?! Thank you so much for sharing how to do this!

    Have a great Wednesday!
    Sherry

    ReplyDelete
  2. Thanks, Sherry! I was hoping it would be helpful to someone! :o)

    Jaime G

    ReplyDelete
  3. Wonderful! Just what I needed! Thank you so much.

    I'm happy to have found your blog.

    Annie Kate

    ReplyDelete
  4. I think my comment just got eaten. So here goes again.

    I was just thinking today about Googling how to make a button again. Because I made one once, and forgot how. And seeing as my button is very boring, I need a new one. Thanks for the tips!

    ReplyDelete
  5. Great idea! I may have to give that a go!

    ReplyDelete

I truly enjoy reading your comments. Thank you so much for taking the time to share your thoughts; you've all helped to create a wonderful little community here at Like a Bubbling Brook.

Please remember the old adage "if you don't have something nice to say, don't say anything at all." While I love to hear from you, comments encouraging division and condemnation will not be published - rather, they will be promptly deleted.

I'm looking forward to reading what you have to say! I wish we could chat over coffee or tea one day ~

xoxo,

Jaime

Related Posts with Thumbnails