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

Member

By aheart4home
User-Submitted Article

Article Rating: (13 Ratings)

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.

Difficulty: Moderately Easy

Instructions

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

Step 1

Save your image to an online photo album (such as photobucket) or place it in a blog post and publish the post.
Step 2

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.
Step 3

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

Go to your Blogger blog and click on Layout.
Step 5

Choose to Add a Gadget. Click on HTML/Javascript.
Step 6

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

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]
[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 http://a-heart4home.blogspot.com/2009/04/blog-button-with-text-box-for-code.html

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

Code for Adding a Blog Button with text Box Underneath for Code

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.
Step 9

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

Save your changes and click View Blog.
Step 11

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.
Step 12

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.