Monday, February 6, 2012

Adding a Button to your Blog

My how to use the linky post was a success and I've had a couple of requests for another on how to add a button, or as I call it adding Bling To Your Blog. I'm going to use SewCalGal's Free Motion Quilt Challenge button with her permission. This is for Blogger which is what I use. 

First you need to go the page with the button, you'll see a box under the button with the code.

Place your cursor at the very top left corner and while holding down the left mouse button, drag it down to the bottom right corner. You'll see the side arrow slide down as you go. The words will all turn blue.

Now right click anywhere in the blue and when the menu opens left click on COPY.

Now go to your blog and click on DESIGN


This menu opens. Go down until you see "HTML/JAVASCRIPT and click on the + box

In the content box, right click and from the menu left click on PASTE, the code will be there. Go up to the title box and type the name for the button. Of course, this one is Free Motion Quilt Challenge.

It should look just like this. Click Save. This will take you back to your design page.

You'll see the name of your button. At the top you'll see "design element added", you can click view page or preview to make sure it's really there. Then click SAVE at the top. You're done. 

Go wild and dress your blog up. I like to keep the current activity at the top and at one time I had three things going on. You can move them around by just dragging and dropping. As you can see I didn't type the title of each in when I put them up, so I need to go back and fix that since I have no idea which is which. 

Easy Peasy, right? Let me know if you have any problems, or better yet if you have success.



  1. Thankyou for that, I couldn't get my head around it the first time I tried, added the wrong gadget.

  2. This comment has been removed by the author.

  3. Hi Dana, I've just tried this every way I could, including typing in the code for SewCalGal's FMQ Challenge since I never could find the page that had the box under the badge. Also have tried multiple times copying and pasting the badge for Amy's Creative Side. I add the title, save as you instruct, and each time what I get on my blog is just the title but no badge showing. At this point I'm frustrated to the point of giving up and when I need to just copying the image into my actual post and adding a hyperlink in the text as I did with my first blog post. Would sure like to figure out what is wrong though. Could it be a Blogger issue? More likely just my operator error, though for the life of me I can't figure out what exactly. Thanks for this tutorial though! I'll attempt it again another day.

  4. Update - tried one more time and Amy's Creative Side finally "took"!
    Woo-hoo! Thanks!!