How to Add a Blog Button with Text Box Underneath for Code


I'm sure you've seen lots of blogs that have a button with scrolling text boxes underneath that house the button's code. These text boxes for codes make it easy for other people to place the blog's button on their blog and link effortlessly to the original blog.

Things You'll Need

  • Button that you want to use to "advertise" your blog (150 pixels is the standard size)
  • Blog (this code is specifically for Blogger)
  • Computer with Internet
  • Save your image to an online photo album (such as photobucket) or place it in a blog post and publish the post.

  • Retrieve the direct Internet link for the image. Through photobucket simply scroll over the image to activate the Link Option's box. Then copy the entire address that is in the Direct Link box. If you publish your button in a blog post click View Blog. Then click on the image, this will take you to a new web address where you will see only your button. Copy the entire address that is in the address bar.

  • Paste the button's code onto a word document to save it until you need it.

  • Go to your Blogger blog and click on Layout.

  • Choose to Add a Gadget. Click on HTML/Javascript.

  • Type something like, "Get My Button" in the title box.

  • Copy this code and place it in the text box.

    [center][a href="http://YOUR WEB ADDRESS/" target="_blank" title="BLOG TITLE"][img alt="BLOG TITLE" src="http://IMAGE WEB ADDRESS"/][/a][center]

    [center][textarea id="code-source" rows="3" name="code-source"][center][a href="http://YOUR WEB ADDRESS/"][img border="0" src="http://IMAGE WEB ADDRESS"/][/a][/center][/textarea][/center]

    All of the front brackets [ will need to be replaced with < and all of the back brackets ] will need to be replaced with >

    Or you can simply copy the code from our blog at

    There's also a direct link to the code in the Resource Section.

  • Once the code is properly formatted (with < and >), you need to replace the generic information with your information.

    Replace the YOUR WEB ADDRESS with the address of your blog.

    Plug in your blog's title where indicated and go back and copy the image web address and paste it in the correct location.

    Make sure you delete all of the generic information. Your code should now look like the code in the photo to the left (click on the picture to enlarge). The colored information should all be replaced with your specific infromation.

  • Save this gadget and position it where you'd like it to be.

  • Save your changes and click View Blog.

  • Click on your button to make sure it takes you to the home page of your blog.

    It's also a good idea to copy the code from the box and try to add the button to your blog.

    To do this simply highlight and copy the code from the text box that is now visible on your blog. Then under Layout, add a HTML gadget and paste the code into the text box. Save changes and view your blog. This "new" button will not have the text box underneath (this is what your button will look like on other people's blogs.) Click on the button to make sure it brings up your blog's homepage.

  • Enjoy spreading the word about your blog. Let your readers know you now have a button that they can copy and place on their blogs.

Tips & Warnings

  • If the code doesn't seem to work, make sure you go back over it carefully to see if anything's been deleted or added. Use the example code in the picture as a guide.
  • Photo Credit
Promoted By Zergnet



You May Also Like

Read Article

Geek Vs Geek: Robot battles, hoverboard drag race, and more

Is DIY in your DNA? Become part of our maker community.
Submit Your Work!