JenLa

We tend to get a number of questions about the hows and whats of having a blog. Here we attempt to answer a few of them. The information here is not the most scholarly and may be an oversimplification to the coders out there, but the goal is to help new people who are struggling with simple and common coding questions to understand and maintain their own sites.

1. How do I put a button on my blog?
First, you need to save that button to wherever you host images. This will be accomplished in much the same manner as you put photos on your blog. [Please note that Flickr's rules prohibit the uploading of website graphics.] Let’s imagine that we are hosting the JenLa button. I have gone to JenLa’s site and right clicked on the image then selected “save image as” and named it jenla_btn.gif . From there I upload it to my server. In my case, this is knottygirls.com and I happen to have a folder in my public file called “blogimages”. A separate file is NOT necessary, by the way. I upload it to that folder. So where can my image be found? Well, it’s on my server [http://www.knottygirls.com] in a folder [blogimages] under its name [jenla_btn.gif] Meaning that the url of my image is this:

http://www.knottygirls.com/blogimages/jenla_btn.gif

The above string is called a filepath. It means “this page, this folder, this image and the gif is the format” IF I didn’t put it in a separate folder, I would remove the “blogimages” portion of that code. So the way I get my blog to display that image is by giving it instructions to find an image and display it. The code needed for this is (remove all spaces, they are only there so you can see the code):

< img src= "url of image" >

You do need the angle brackets and you do need the quote marks, discard only the spaces. So what I get for my particular image is:

< img src= "http://www.knottygirls.com/blogimages/jenla_btn.gif" >

***********************************************

2. How do I link a button to something?
Now that you have your button on your site, linking it is easy. First, you’re going to tell the browser where to go when the image is clicked. Again, remove all spaces.

< a href=" url of link" > < image information > < /a >
a href tells the browser it’s about to go somewhere, the url tells it where. Then the image information tells it what to display for the link. The angle brackets surrounding the forward slash and lower case ‘a’ contain the code that closes the linking information [image code doesn't require close tags] If we link our JenLa button in the above example, we want to send the browser to the JenLa blog when the button is clicked. So in the “url of link” portion, we simply put the blog address and the image info we already know from the previous example.

< a href=" http//www.knottygirls.com/jenla.blog ">< img src= " http://www.knottygirls.com/blogimages/jenla_btn.gif " >

So what does that do? Well, below you see our button and if you click it you should be taken to our home page.

That is a lengthy explanation, but all you really have to do is change the information between the quote marks. Change the link to where you want the button to take people and the image url to your own image url. Once you’ve done this a couple times it really will seem easy! If you have stray angle brackets showing, you probably forgot to close a tag somewhere. Every [<] must have a [>] somewhere.