Archives
1st Quarter 2008
 
2nd Quarter 2008
 
3rd Quarter 2008
 
4th Quarter 2008
 
1st Quarter 2009
 
2nd Quarter 2009
 
2nd Quarter 2009 2.0
 
3rd Quarter 2009
 
4th Quarter 2009
 
1st Quarter 2010
 
2nd Quarter 2010
 
3rd Quarter 2010
 
4th Quarter 2010
 
1st Quarter 2011
 
2nd Quarter 2011
 
3rd Quarter 2011
 
4th Quarter 2011
 
1st Quarter 2012
 
2nd Quarter 2012
 
2012 Semi-Annual
 
1st SemiAnnual 2013
 
2nd SemiAnnual 2013
 

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.

<img src="http://dokuga.com/images/awards/banners/example.png">
 
 

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.

What we're adding:
alt="My Banner"
title="I won this banner at the Dokuga Awards!"
 
<img src="http://dokuga.com/images/awards/banners/example.png" alt="My Banner" title="I won this banner at the Dokuga Awards!">
 
My Banner
 

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.

What we're adding:
width="252px" (you could also use 50% to make it half as wide)
 
<img src="http://dokuga.com/images/awards/banners/example.png" alt="My Banner" title="I won this banner at the Dokuga Awards!" width="252px">
 
My Banner
 

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

<a href="http://www.dokuga.com/awards" target="_blank"> <img src="http://dokuga.com/images/awards/banners/example.png" alt="My Banner" title="I won this banner at the Dokuga Awards!" width="252px"> </a>
 
My Banner

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.

[img]http://dokuga.com/images/awards/banners/example.png[/img]
 
 

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.

[img size=252]http://dokuga.com/images/awards/banners/example.png[/img]
 
 

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.

[url=http://www.dokuga.com/awards][img size=252]http://dokuga.com/images/awards/banners/example.png[/img][/url]
 
 

INUYASHA © Rumiko Takahashi/Shogakukan • Yomiuri TV • Sunrise 2000
No money is being made from the creation or viewing of content on this site, which is strictly for personal, non-commercial use, in accordance with the copyright.