Make a Blog Button with a Code Text Box

April 22, 2010

Lately I’ve had a couple people ask me how to make a blog button with a scrolling text box for the button’s code, like my button below:

My Backyard Eden

I’m by no means an expert, but here is how I did mine.    I have a Blogger blog so I know that this method will work on the Blogger platform. 

Before you can do this, you need to have the image you want to use for your button saved somewhere on the internet.  My image is in TinyPic, but you could Picasa or another online photo service.  You just need to be able to find and copy the button image’s URL. 

Once you have the URL of your image, there are two sections of code that you’ll need:


Replace the red code with the URL of your blog.
Replace the green code with the name of your blog.
Replace the blue code with the URL of your button image. 

In the second section, the rows=”7” code refers to the number of rows you want displayed in your box.  You can change it to whatever you think looks best on your blog. 

Once you have your code, you can add it to your Blogger layout as an HTML/JavaScript gadget.

Good luck!  Let me know how it works for you!

Linking up to some of these amazing blogs.


  1. Hi, Is there a way to copy and paste your code above so that one can replace the appropriate lines?

  2. I was having problems color coding the code in my post so I used an image instead. If you'd like the code I can email it to you.

  3. I was wondering if you could head over to my blog and check out what I possibly could have done wrong. Instead of the photo, it's the html code. But underneath it is the box with code. Please help. I can't tell you how many times I've tried this. Ughh! Thanks for your patience.

  4. I have linked this here:

  5. Rita, I just emailed you the code so you could try it again.

    Thanks for the link Tammy!


  6. HI, I used your tutorial to make a button for a blog friend. I also made one for myself. I have put both my blog and they show up fine, but they are not "clickable" and when I copy the html from the box underneath and paste it as a seperate gadget, nothing shows up...any suggestions? You can see them on my blog here:
    Thanks so much!!

  7. Sharon, I just took a look at your blog and it looks like you've got it working. Great!

    You've got to be really exact with the HTML syntax or it won't work right. Glad you figured it out!

  8. This is wonderful. Excellent tutorial!

  9. I just made my VERY FIRST BUTTON using this post! THANK YOU SO SO SO MUCH!!! I've been wondering how to do this for months!!!

    By the way... my site is wordpress. I just changed the code like you showed and then pasted it into the code for my sidebar and it worked perfect.

    Rachymommy -


Hello! Thanks for taking the time to leave me a note!

Content © 2009-2013, Carolyn Simmons, My Backyard Eden. Powered by Blogger.
Back to Top