i used to believe in forever...: HTML help

Okay. So I have learned a hell of a lot about HTML, widgets and add-ons since I started blogging, and not all the information I found was easy to come by, so I've decided to share everything I've learned (and on occasion, taught myself) on this page, hoping that I will help some newbies along the way.

(Fine, I'll admit it it. It's also because if I suffer from brain freeze and forget how I did it, I know I'll be able to find the information on my blog.)

If I have been able to help you at all, please leave a message letting me know.

Please revisit this page regularly as I will update it whenever I learn something new or useful.

CONTENTS:

#1: How to make a badge for your blog.

#2. How to make a "Back to the top" button.

#3. How to put a basic border around your images.

#4: How to make a scrolling picture link box

#1: How to make a badge for your blog.

I wanted to create a shareable badge for my blog (you never know, someone might want it) and it was a nightmare finding the right HTML, and the "How To" guides I stumbled across were gibberish to a relative newcomer such as myself. But after a lot of perseverance and too much caffeine, I actually managed to make it work. Go me! So, being the helpful soul that I am, I thought I would wrap up all the information I found, place it all in a nice idiot proof box and put a little bow on it. I like to share.

Step 1: Create your image.

You need something simple yet eye catching, not only to attract people to your site, but also so others will be willing to post it on theirs. It also needs to be quite small so it doesn't intrude too much on someones space. (For reference, the badge on the left is 142 pixels long by 42 pixels high.) Once your happy with your image, you need to upload it somewhere.

Step 2: Join an image hosting site.

You need to upload your image on to an image hosting site that will give you a direct link location to your image. Personally, I use Photobucket, but I imagine you can use a lot of other sites (just don't ask me which ones because I don't know). If you don't already have an account with such a site, here's the link to Photobucket. It's free and you won't be inundated with spam. Go ahead. I'll wait...

Done it? Good. Now all you need to do is upload your image.

Step 3: Get the image link address.

There are two ways to get this code.

image 1

If you have a Photobucket account, hover your mouse over the image (see Image 1). When the drop down menu appears, select the Direct Link address. Copy and paste it somewhere safe.

Alternatively if your image is elsewhere online, right click the image and select Copy Image Location (see Image 2). Again, paste it somewhere safe.

Step 4: Create your button code.

Here comes the science bit. Copy the code below:

<a href="YOUR WEBSITE ADDRESS HERE"><img src="THE IMAGE LOCATION LINK HERE"/></a>

On top of YOUR WEBSITE ADDRESS HERE, paste your complete web address, including the http:// and don't remove the speech marks (the "). Then, on top of THE IMAGE LOCATION HERE, paste the image location you saved in Step 3 (again, don't remove the speech marks), and you now have the completed code for your button. Hurrah! (For a more thorough example, look at the code for my badge in the right sidebar.)

Step 5: Post your badge on to your blog.

image 3

Go to your Blogger dashboard and select Design to get to your Page Elements page. Select Add Gadget, and from the pop-up menu, select HTML/JavaScript (click Image 3 for a close up view). Add the HTML/JavaScript widget (you can have more than one of these if you want), ideally to the side or bottom of your blog, and paste the button code you created in Step 4 into it. And voila! One shiny button that will link to your site.

But wait! There's more!

Step 6: Share your button.

If you want to, you can share the code of your button with others so they can post it on their sites. And this is how to do it...

First, you need the box to display the code. Add the following code into a HTML/JavaScript widget (you can add it below the badge code if you want. That's what I did.)

<textarea name="textarea" cols="20" rows="5" wrap="VIRTUAL">YOUR BUTTON CODE HERE</textarea>

Where it says,YOUR BUTTON CODE HERE, paste the complete button code you created in Step 4.

And there you have it. Not only a button you can use to promote your site, but a shareable code so anyone can promote your site on their site too.

Troubleshooting.

If you have any problems getting it to work, I can only suggest the following;

Check you haven't altered the HTML codes in any way other than how I've shown you. Even removing a ", deleting a / or adding a space can break the whole code.

Double check the links for your image and for your site. Remember to include the whole address, from the http:// at the beginning to the / at the end.

If your image doesn't appear, it could be that it's too big for the area you're pasting it into. If you're using Photobucket, remove it, resize it, rename it, reupload it and then get the new code.

If you want the box containing your HTML code to be longer or narrower, raise or lower the number 20. If you want the box to be taller or shorter, raise or lower the number 5.

If you want to centre your badge or the text box, ad <center> at the start of the code and </center> at the end.

So, there you go. I hope you found this helpful. Feel free to share the link to this lesson with anyone who wants it.

#2. How to make a "Back to the top" button.

If you look at the bottom right hand corner of this page, you will see an arrow that when you click on it will send you back to the top of the page. This is how I made it;

1. Find your arrow.

Click for larger image.

Go into Google (or whatever search engine you use) and type in "back to the top arrow" to find the image of the arrow you want to use. Click on the arrow you want, right click on it and select "view image", then right click it again and select "copy image location". Paste this address somewhere safe.

2. Add the code.

If you don't already have a HTML/JavaScript widget, go to your Blogger dashboard and select Design to get to your Page Elements page. Select Add Gadget, and from the pop-up menu, select HTML/JavaScript. Paste this code into it:

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="ARROW IMAGE ADDRESS" /></a>

Where is says ARROW IMAGE ADDRESS, copy and paste the arrow location you saved earlier. Do not remove the speech marks. Click "save", and job done.

#3. How to put a basic border around your images.

As you can see, all my images on my blog have a pink border. This is how I achieved it.

This involves altering the HTML of your template, so before you make any alterations, please, please download your template first.

To do this, go to your Blogger Dashboard, then Design, then Edit HTML. Then select Download Full Template. You'll now have a copy of your template before you made any changes to it.


Click image for a larger view.

1. Altering the template HTML.

You need to find the following piece of text in your templates HTML.

.post img

The easiest way to find it is to press Alt + F then put .post img into the find box. You need to delete anything that is in the brackets immediately after .post img.

For example, whereas before you had something like this...

.post img {
border: 5px solid #F08C00;
padding: 10px;
}

It now needs to look like this...

.post img {

}

Now, copy and paste the following code in between the brackets.

border: 7px solid #FF3399;

Your altered line of HTML should look like this:

Click image for a larger view.

2. Customizing your border.

The code I have given you is the one I use on my blog, but not everyone will want a pretty pink border on their images

To change the colour, you need to replace the #FF3399 code with the code of the colour of your choice. Click the following image to see a list of colour codes.

To reduce or increase the width of your border, raise or lower the 7 in the code.

You can also change the style of the border by changing the word solid to either dotted (for a border made of dots), dashed (for a border made of small dashes) or double (for a border made of two thin lines).

And that's how you add a border automatically to all of your images.

#4: How to make a scrolling picture link box.

I have a box in the sidebar of my blog which shows links to the group sites I belong to. This is how I achieved it.

1. Add the code.

<div class="textwidget"><marquee direction="up" width="200" onmouseover="this.stop()" scrollamount="4" onmouseout="this.start()" height="200" align="left">

2. Add the picture link codes.

Directly after this code, add all the codes to all of the picture links you wish to appear in the scrolling box. You can add as many as you want.

3. Finish the code.

Once you have finished adding all your links, add the following HTML text at the end to finish the scrolling box code.

</marquee></div>

4. Make the adjustments (optional).

The finished code should look something like this:

If you want to change the direction the images scroll in, replace up with left, right or down.
If you want to reduce or increase the width or height of the box, raise or lower the number 200.
If you want to speed up or slow down how fast it scrolls, raise or lower the number 4.
If you want a space to appear between each link (like I have in my scroll box), you need to add <br /> twice to each link code, once directly after the code and again directly underneath it.

If you have any problems or questions, let me know and I'll try to help.

Pages

HTML help