· · ·

Saturday Series: "Bling Your Blog" Lesson 1

Sharing is caring!

I normally don’t blog on Saturdays, but I wanted to find a way to put in a few of these things I’ve learned about pretty-ing up your blog.  Hence the Saturday Series:
“Bling Your Blog!” 
Lesson 1:  Create Your Own Button
I thought this would be a good place to start, since it incorporates all of the basic principles that you will be using over and over again, in a simple way.  
What is a button?  A button is this: 

Basically it’s a picture that is also a link. You can make one for your own blog, or for your business if you have one. So let’s make one!

 To start, create a small image (I usually do 125 pixels by 125 pixels, 72 resolution) on any image creating program. I love Photoshop, so that’s that I use, but you can use Elements, Corel, or even Paint! Save it as a jpeg.  Here is my image:

Upload the jpeg to an image hosting program.  I highly recommend Photobucket, mostly because I use it, but also because it makes it VERY easy to grab the html.  After you have uploaded and named it, this is what it should look like:

See how it has all the data for the picture? (Email & IM, Direct Link, HTML Code, IMG Code)  We will be using the HTML Code for our button.  Click on the HTML code, it will highlight it and you can control + C to copy it (or command + C for Mac).

These next several pictures speak for themselves, but I will give you the rundown real quick. Go into where you edit your blog, under Design. Go to “Add a Gadget” then select the HTML/Javascript.  Then Control + V to paste your html. 

1
2

3

Now you have your button, but it doesn’t link to anything.  So go to the top right where it says “Rich Text” and click on that.  You should see the button.  The click on the picture to select it.  Like this:

Now go up to the task bar where it has the picture of the link (next to the Text button.)  When you click on this, you fill in where you want it to link.  It’s easier to just control + C the link beforehand.

After you have entered the link and saved it, you should be able to go view your blog and see it.  If you click on it, it should lead you to wherever the link is.

And there you have it!  Your button!  If you want people to be able to grab it, you need to have a little box of the html code below.  This is how you do that:

This will be the code you will use:

   Save and close.  Done!  Cool, huh?

blog sig

15 Comments

  1. Hillbilly Handiworks says:

    I was just getting ready to post on my fb fanpage if anyone could help me do this!! TY, TY!! I need one for my Great Ornament Exchange!

  2. Heidi Ferguson says:

    Great! I'm glad you are already using it!

  3. posidanielle says:

    Thank you so much that is so helpful! I can't wait to make a button myself!

  4. Heidi Ferguson says:

    P.S. I'm sorry that you can't just copy the html code straight out of this post…when I posted the code it would just come out as the image, so I had to just take a screen shot.

  5. Jennwith4 says:

    Ok after all this time working with those html boxes I didn't know they had a rich text option for you to actually see your work. UGH! Thanks for sharing!! This will help alot!

  6. Thank you for that amazing tutorial! I have always wanted to know how to do that!

  7. Heidi, thank you!!! Love your tutorials, they're fabulous!

  8. This is amazing and so enjoyable! The German Shepherds thank you!

  9. Mission Valley Nana says:

    you have a great blog!
    and thanks for the "button" tutorial; I'm gonna try it.

  10. Hi Heidi I just wanted to let you know I LOVE this tutorial and have been using it for quite a while now. Thanks so much for showing how to do this!!!

  11. Omg! Thank you soooooo much for this tutorial!!! I have been struggling with this for so long and I finally got it to work thanks to your tutorial!! Just uploaded one onto my blog! check it out! http://www.aquabrocade.blogspot.com thanks so much : )
    Have a wonderful day! I know I will, now that I have a grab button on my blog>>> thanks to you!
    ~ Kim

    1. Heidi @ Honeybear Lane says:

      Great job! So glad I could help!

  12. Hi, this is a great tutorial! HTML code and design isn’t my forte but this is helpful. Quick question that you may be able to help with. When I try to hyperlink my button as you instruct I get an error message saying an error has occcured, function 100, error expected. I can do everything else but the button goes to my photobucket account instead of my blog. Do you know a way around this? Thanks so much!

Leave a Reply

Your email address will not be published. Required fields are marked *