In this tutorial I will be walking you through creating you own grab code that can be put onto your sidebar. It is common to have a grab code near your button graphic so that visitors can place that same graphic onto their site. This code will link the button back to your site.
Depending on your blogging platform, the grab code will need to be put into a text widget. This will prevent stripping of code.
Getting the URL to your Image
In order to link to a graphic the image needs to be available somewhere on the internet. You would need to either use a photo hosting service to place this graphic on-line or know the url of the image from your blog software before using the code.
Anatomy of the Grab Code
A basic grab code looks like this:
<textarea><a href=”some link”><img src=”some link to a graphic” ></a></textarea>
The <textarea> tags make a box that will have text in it. All the code between these tags will be displayed as text. This is what you want in order for someone else to grab the code for your button and place it on their site.
The <a> tags make anything in between them a link. It could be a graphic or text. In this case we want a graphic to be used in the link.
To do this, you will be changing the code :
<a href=”some link”>
The words “some link” needs to be change to a url that will link to your site.
For instance if I wanted to link back to Sunflower Schoolhouse I would change this code to :
The <img> tag is used to show a graphic.
Make sure the spacing in the code remains intact as it can cause trouble. (Read this post: Widgets Can Kill Your Blog) The add a image to this code we change:
<img src=”some link to a graphic” >
The link to the graphic needs to replace the words “some link to a graphic”.
In the case of Sunflower Schoolhouse this code would be:
<img src=”http://sunflowerschoolhouse.com/wp-content/uploads/2011/03/ssbutton1.png” >
The Finished Code
After all the editing the code would look like this:
<textarea><a href="http://sunflowerschoolhouse.com"><img src="http://sunflowerschoolhouse.com/wp-content/uploads/2011/03/ssbutton1.png" width="125px" /></a></textarea>
Sometimes the text area might not be wide enough in which case you can add rows and cols to the code. Rows determines how many visible rows can be seen. Cols defines the visible width. For example:
<textarea rows="10" cols="30"><a href="http://sunflowerschoolhouse.com"><img src="http://sunflowerschoolhouse.com/wp-content/uploads/2011/03/ssbutton1.png" width="125px" /></a></textarea>
You can change these numbers to fit your preference. Be aware this only effects how the code looks.