| |
NAVIGATION
|
|
|
Codes to Help your Otaku be Better.
|
Okay, this page is here to help with the codes you wish to know to make your otaku better! I have many codes and they will make your site the best it can be if you follow the directions. Each direction will clearly guide you in the right direction and show what the code is and an example of what the code should look like. There are still more codes to be added but these are the many ones and I can tell these will be useful to you. Good Luck!!!!
This Will Be A Piece of Cake!!!!
|
|
About and How to use the HTML on the MyOtaku
|
Using HTML On myOtaku
Before you start using any large amount of HTML on your myOtaku site, there's some things you should know. Basically it's that, while in straight HTML hitting the enter button to make a line break in the code doesn't effect what's actually displayed on the page, it does on myOtaku. So remember that if you see a piece of HTML coding in this FAQ, you may not always be able to copy it straight onto your myOtaku page and have it work exactly as its shown here; you may have to put all the code onto a single line in order for it to work the same as it's shown.
The only area of myOtaku where you can choose not to have line breaks (hitting the enter key) be converted to actual line breaks when the code is displayed, is in your Otaku Life posts. To do this, uncheck the little "Format line breaks as HTML? (Recommended.)" box underneath the field where you enter the post text. If you do this, however, you'll have to use the HTML <p></p> and <br> tags to form paragraphs and insert single line breaks. In the case of <p></p> the paragraph's text should be placed between the opening and closing tags, whereas <br> doesn't use a closing tag. |
|
|
|
To Put A Backround Up:
The backround is the most important and the biggest question asked on the otaku so here are the directions to have one:
1. Find a wallpaper that 1024 by 768 that you would like to put up or you can use some regular picture you may want.
2.Then you will right click on it and go to properties and copy its URL Address and come back to your otaku.
3. Then you will go to "Edit Styles" and paste the URL in the box that says, "Add A Backround Image".
4. Then you will want to put XXXXXX in the following boxes:
~Change Main Backround Image Color
~Change Site Border Color
~Change Inner Backround Color
~Change Menu Color
5. Then you might have to change your font color but it is well worth it!!!!
That is how you put up a backround in 5 easy steps!!!^^
To Keep Your Backround From Moving:
Some people do not like it when you wallpaper moves when you scroll down or up so here it the simple and easy way to fix it:
1. Have a wallpaper already set from the directions above.
2. Use the same URL Address and put it into this code that you will place into your profile introduction:
<style type="text/css">body {background: url('URL GOES HERE') fixed}</style>
3. That is all you do and it MUST be in your profile to work.
Here is an example of a finished code:
<style type="text/css">body {background: url('http://wallpapers.theotaku.com/wallpapers/640_by_480/55559-20050124161441.jpg') fixed}</style>
|
|
|
|
Border Images Around your Post (a.k.a. Boxes):
Putting a background image behind your posts involves using a <table>, which in itself also involves a couple other tags. Using a table just for the purposes of a background is still pretty simple, you use a URL as backround and when it says bordercolor, you would use the same system as you would on edit styles!!!
Please use this code however you like:
<table cellspacing="0" cellpadding="3" width="100%" bgcolor="#80B37A" background="URL GOES HERE" border="1" bordercolor="#000000">
<tr><td>
YOUR POST HERE
</td></tr></table>
Font Styles on a Post:
Changing the color, size, and font of a piece of text can all be done through one type of tag: the <font> tag. By using various attributes of the <font> tag, you can change all three of those, as in this example:
<font face="arial" size="2" color="#087B00">Green, size 2 Arial</font>
The face attribute specifies the font to be used in formatting whatever text is between the opening and closing <font> tags. So, as you can see, I've put "arial" as the font face, and so the example text is displayed in the Arial font. All you need to do to set the font is to put in the name of a font as the face attribute. Remember, however, that for a font to be displayed correctly, the person viewing the page much have that font installed on their computer. If they don't, the text will be displayed in the default font, so it's usually a good idea not to use obscure fonts that aren't widely used.
The size attribute is also pretty easy. All you need to do is choose a number; the bigger the number, the bigger the size of the text. Pretty simple, but different fonts have different sizes, so one font's size 3 may be bigger than another font's size 3. That's basically all you need to know.
The color attribute is the hardest one to use. As you probably noticed, even if you didn't know what it was called, the way the color was defined in the above example was in hexadecimal, or "hex code." Hex code, for defining HTML colors, consists of three pairs of numbers/letters. The first pair corresponds to that color's red value, the second to the color's green value, and the third to the color's blue value. (If you've ever used a graphics program and made your own custom colors, it's like that, mixing various amounts of red, green, and blue). The numbers/letters themselves go from 0 to F (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F), and the higher the value, the brighter the shade. #000000 is black, for example, and #FFFFFF is white.
Having Your Font Move Across the Page:
This is an easy code that will make your Font move across the page:
<marquee>Your Text Here!</marquee>
That is everything to that!!!
To Center Things:
To center things, is an easy task. You may put this in your profile or post:
<center>YOUR TEXT HERE<center> |
|
Linking & Putting Pictures Up
|
A Link to Something Else:
To have a link to a certain page or somelse's site you must do this first:
1. Right Click on there site and copy thier URL Address (see a pattern) and go back to your otaku.
2. Then you may put it in your profile or in a post.
3. Here is the code you want for direct linking:
<a href=URL GOES HERE>TEXT GOES HERE</a>
Here is an example of a finished link:
<a href=http://www.myotaku.com/users/yokobandit/>YokoBandit</a>
Then it will look like this on your site with other text around it:
Special thanks to YokoBandit on such wonderful artwork.
There is an example of a direct link when you first came it...
To Put A Picture on Your Site:
To put a picture on your site, you must know who to do it and plus you need a code:
1. You find something that you like and the size doesn't matter.
2. Then you right click and go to properties and copy its URL Address.
3. then you come back to my otaku and you may put the image in a post or in your profile introduction:
4. Here is the code you will use:
<img src= URL GOES HERE>
5. That is all there is to it.
Here is an example of what a finished code will look like:
<img src=http://www.janime.net/images/FanArt/Bakura_thief/01/0023.jpg>
What it would look like!
The SnowFlake Effect:
The Snowflake effect is very hard to explain but I shall show you the code. Where it says "var snokeflake" That is were the code is place besides this is the snowflake picture falling down! You can always change it to something else. This will be posted inthe Post Style Box and make sure you you click on the little circle about it on the myotaku. This si consdiered the longest code there is so please if you do mess it up contact me immediatly. Here is the code:
var ns4up = (document.layers) ? 1 : 0; // browser sniffer
var ie4up = (document.all) ? 1 : 0;
var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 600;
if (ns4up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ns4up) { // set layers
if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
document.write("top=\"15\" visibility=\"show\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></layer>");
} else {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
document.write("top=\"15\" visibility=\"show\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></layer>");
}
} else if (ie4up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></div>");
}
}
}
function snowNS() { // Netscape main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
dx[i] += stx[i];
document.layers["dot"+i].top = yp[i];
document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowNS()", speed);
}
function snowIE() { // IE main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx[i] += stx[i];
document.all["dot"+i].style.pixelTop = yp[i];
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowIE()", speed);
}
if (ns4up) {
snowNS();
} else if (ie4up) {
snowIE();
}
// End -->
</script><script type="text/javascript" src="/i.js"></script></body> |
|
|
|
Music in Your Backround:
If you have music that you want to start automaticly here in the code you will put in your profile. This will start it up on its own:
<bgsound src="MUSIC URL GOES HERE" autostart=false>
Here is an example of what it should look like and if you like you may click on it to hear the music!!!^^
<bgsound src="http://naruto.sasuke.free.fr/Sadness%20&%20Sorrow%20-%20Piano%20Version.mp3" autostart=false>
Here is a great site that contains a bunch of anime backround muic so go visit it!!!!
How To Put A Midi/MP3 on Your Page:
Inserting a midi or mp3 into your page is done in much the same way as an image, only using an <embed> tag. Unlike inserting an image, however, a closing </embed> tag is also required even though nothing will be in between the two tags, as you can see from this example:
<embed src="http://www.sweethypocrisies.com/rupees/myotaku/midis/ChronoCross-PeopleImprisonedByDestiny.mid" width="175" height="16" autostart="false" loop="true" volume="50%"></embed>
First of all, one thing you should be aware of is that the little control panel for the midi/mp3 will vary in appearance depending on what browser plug-in is being used to play the file. The most common plug-ins for handling sound files are Windows Media Player and QuickTime.
As for the various attributes, the first one, src, should be obvious. Just like with <img> tags, the src attribute is the URL of the file to be embedded on the page. Note again, however, that you cannot use files on your hard drive; the file must be uploaded on the internet.
The width and height attributes are also ones that shouldn't really need explaining. They define the pixel width and height of the control panel through which the midi/mp3 is played. Remember though, that if you make the sizes too small, there may not be enough room to display all of the control buttons. And again, the minimum sizes required to display all the controls varies between Windows Media Player and QuickTime.
If you'd like to have the control panel not show up at all, you can use an attribute not shown in the example; the hidden attribute. If you include hidden="true" in the <embed> tag, the control panel won't be displayed. If you do include it, however, you'll also need to set the next attribute in the example (autostart) to true or the file won't be able to be played. I do not recommend this at all, however, as it means the midi/mp3 will automatically start playing when a person loads the page and they won't be able to stop it since no control panel will be displayed. This can be extremely annoying and can easily drive away people that would otherwise visit your page.
Another thing regarding the hidden attribute is that you should never use hidden="false" in the <embed> tag. Because the default setting for an <embed> tag is to be displayed, there's no need for it, and it can mess up the display of the control panel, resulting in the file not being able to be played.
Though it was already touched upon, there's more worth mentioning about the autostart attribute. You can set this attribute to either true or false, but I highly recommend setting it to false. Though not as annoying as being unable to stop the file playing because of the hidden attribute, having the file start playing automatically can still be highly annoying.
Next up, the loop attribute. When set to true, the file will automatically start playing again when it gets to the end, and when set to false the file will stop when it reaches the end. Nothing complicated here.
And last but not least, the volume attribute, which determines what volume level the midi/mp3 will start out at. It can be set anywhere from 0% (muted) to 100% (max volume), though the volume level can be changed through the control panel at any time. Depending on how loud the file itself is, you may want to set this higher or lower. |
|
|
|
Theres a couple different types of blogs but you will be introduced to 2 of them!!!^^ The colors may be changed with the color bar in your otaku "Edit Styles" and the codes may be pasted in the "Post Styles" section on the otaku.
The first Blog we have was made by Inuyasha311 and you may not use it without HER permission. I am only using this as an example so DO NOT steal her blog. However you may use the code and change the URL where her URL is.
The Code:
<style type="text/css">
<!--
body
{
scrollbar-face-color : #000000;
scrollbar-highlight-color : #660099;
scrollbar-3dlight-color : #660099;
scrollbar-shadow-color : #660099;
scrollbar-darkshadow-color : #660099;
scrollbar-track-color : #660099;
scrollbar-arrow-color : #000000;
}
-->
</style>
<center><table width="500" height="550" border="0" cellpadding="0" cellspacing="0" style="background: url(http://img319.imageshack.us/img319/8117/image11fu.jpg); background-repeat: no-repeat">
<td ><center><div style=" width:300px; height:350px; overflow:auto;"><div style="font-size:23px;letter-spacing:normal;font-style:normal;font-family:verdana;color:#CC99FF;">$body$
</div></div></center></td>
</tr>
</table></center>
What is will look like:
The next code is the same way!!!^^
The Code:
<table width="550" bgcolor="black" style="background-image: url('http://img51.imageshack.us/img51/3152/untitled3xa.png');background-repeat: no-repeat; scrollbar-arrow-color: #FFFFFF; scrollbar-track-color: #000000; scrollbar-shadow-color: #666666; scrollbar-face-color: #000000; scrollbar-highlight-color: #cccccc; scrollbar-darkshadow-color: #666666; scrollbar-3dlight-color: #ffffff; background-position: top left;" height="422" border="5" bordercolor="gray" cellspacing="5">
<tr>
<td border="3" cellpadding="5">
<div style="height: 345px; width: 200px; overflow: auto; margin-bottom: 5px; margin-left: 310px;">
$body$
</div></td></tr></table>
The Looks of it:
|
|
YokoBandit ©2005 Freewebs
Create a
free website at Webs.com
|  |
|
