Using Dokuga Banners
Hi! This is the banner tutorial!
The first thing you need before you start is the exact image URL of the banner you want to use. If you're using a banner from Dokuga, you can get this by clicking on a banner and copying the URL down from the address bar. Your image location should be a filename with an extension, just like on your computer. It will look something like this:
http://dokuga.com/images/awards/banners/example.png
In this tutorial, we're going to use that. You can just copy our code and replace this image with the URL for your banner.
There are two sets of codes below. If you're using images on webpages and places where tags appear like this (< b>), you should use HTML. If you're on a forum or a place where the tags are square ([b]), use BBCode.
HTML Codes
Many sites restrict what kind of HTML code users are allowed to use, so some of the more advanced examples here may not work.
Basic HTML Image
This is the most basic way to get your banner up with HTML. It's easy, it's fast, and it works. There's a lot more you can do with images, but we're going to start here. You can mix and match the tags below to get your banner displayed just the way you want it.
Adding Alt and Title Text
The first part of the tag shows where it is, and the 'ALT' portion says what to show if the image can't be loaded. Even though an 'ALT' tag isn't required, it's considered good practice to include one when possible. The 'TITLE' tag shows what shows up when a person mouses over the image. Don't use anything too long, it annoys users.
Image with Max Height or Width
If you're trying to make your banner fit into a specific place, you can also use the HTML tag to resize it by specifying either a max height or a max width. The setting below is the width we use to make three columns on the banners page. If we wanted to make all our banners smaller to fit in a place that was vertically shorter, we would just change the 'width' to 'height.' Don't specify a height and width because it will conflict with properly scaling the image.
A Linked Image
So, you have a banner to show off. Your banner can link to your story too, so when people see that pretty banner and click it, they go right to your story. However, we don't want them to lose the page their on, so we tell the browser to open this link in a new window. That is what we include the 'Target' tag. This one is easy to do; you just take a regular html link tag, except instead of putting in a title for your link, you drop your image code. For the code below, let's assume your story is at http://www.dokuga.com/awards
BBCode (Forum) Codes
Not every forum is the same, but these should work in most cases if a forum allows images. You can add a banner to your forum signature here on Dokuga by adding one of the codes below. Most forums don't accept HTML code because they use BBCode, where square brackets are placed around tags like this [b][/b].
Basic Image
If your forum allows images and uses square brackets, this should work. Some forums restrict how big an large the dimensions of an images can be, so if your image is too big, try specifying a size.
Image with Max Height or Width
Most forums take height or width, depending on which is larger, and reduce the image based on the size included on the tag. So if you put 252 in, and the width of the image is greater than the height, it will be resized so it's only 252 pixels wide.
A Linked Image
Linked images can also be done in forums and signatures! Some forums don't allow this, so this may not work 100% of the time. Both open things in new window by default, so we don't have to worry about that. Assuming your link is at http://www.dokuga.com/awards.