How to Create a Basic Blog Button and ‘Grab My Code’ Box

 

I feel accomplished.

Finally, I've figured out how to create a blog button for Like a Bubbling Brook.  (*UPDATE, April 2011: I have now paid a professional to design my blog button.  The one you see in my sidebar is not the one I created.) 

I'm certainly not an expert, but this seems like something worth sharing, especially if you are a beginning blogger or on a very limited budget.  Maybe you've been wanting to do this, too?

Here's how to do it: 

  1. First, you must design your button.  To do this, you'll need a photo program like Adobe or Corel.
  2. 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.
  3. Place your images and text on the button in an appealing format.
  4. Save as a gif or jpeg to your hard drive.
  5. 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 its code on your blog:

Copy the following html code:

<div align="center">

<a href=http://YourDomainNameHere .com">

<img src="http://InsertLinkToYourImageHere"></a></div>

<div align="center"><form><textarea rows="6"><a href="http://YourDomainHere .com">

<img src="http://InsertLinkToYourImageHere"></a></textarea></form></div>

  1. Open your blogger account.  Choose the "layout" tab and then "add a gadget." If you are using WordPress, go to "widgets" in your admin sidebar.
  2. Choose "html"; paste the code you have copied in that html box.
  3. Change info to your blog 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."
  4. 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!

Warmly,

post signature

If you enjoyed this post, subscribe to Like a Bubbling Brook email updates - it's free and delivers new posts about faith, homemaking, and real foods right to your inbox.

NEW! Now you can also join us on Twitter. | NEW! Join in our community via our Facebook page.

Please Visit Our Current Sponsors & Affiliates:

Directive 21- Berkey water systems, seed banks, emergency kits, and more

Lilla Rose - Beautiful and functional hair jewelry {with a special giveaway going on right now!}

The Modest Mom - Stylish, modest skirts for everyone

Rod & Staff Books - Bible-based homeschool curriculum

Amazon Mom - Save money on diapers, wipes, and more!

Would you like to be a sponsor?

Comments

  1. Sherry says:

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

    Have a great Wednesday!
    Sherry

  2. Jaime G says:

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

    Jaime G

  3. Annie Kate says:

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

    I'm happy to have found your blog.

    Annie Kate

  4. Nikki says:

    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!

  5. Shalet says:

    Great idea! I may have to give that a go!

Trackbacks

  1. [...] Like a Bubbling Brook – How to Create a Basic Button and Code Box [...]

Speak Your Mind

*