Comment boxes eh? They are really neat to have on your profile. You can find the codes everywhere on the internet but it is hard to find one that fits your needs perfectly, so why not make one? Well if you follow this tutorial you can! The only hard part of comment boxes, and the part that most confuses people, are the forms. Don't worry though, this tutorial will lead you through comment boxes and you will be a whiz in no time.

 

So, lets get to the form. It really isn't hard because all we have to do is tell the browser to create two boxes. Remember, you MUST set up the form first.

 

Step 1:

Open NotePad or your editor of choice and enter this code:

 

<form method="post" action="http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment"><input name="friendID" value="YOURIDHERE" type="hidden">

 

form method="post" lets the browser know that this form will be used for submitting content. action="http..." tells the browser what it is submitting to and how to do it.  "http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment" is simply the MySpace comment function.

 

Here is the annoying part, where it says value"YOURIDHERE" you need to put your unique MySpace ID. To do this go to your MySpace URL and then go to your pictures. In the navigation bar on your browser look at the URL, the last number is your MySpace ID, for example:

 

http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=251538862
 

type="hidden" doesn't have to be there but you should probably put it anyway.

 

Step 2:

This step creates the actual input area. Here is the code:

 

<textarea name="ANYNAME" class="ANYTHING">GRRCOMMENT</textarea><br>

 

name="ANYNAME" names the text area, you can name it anything you want. I recommend c_input or something of the sort. class="ANYTHING" can be renamed to whatever you want, but I recommend "comments" as you will use this later in the tutorial. "GRRCOMMENT" doesn't have to be there but you can put anything in your comment box such as "COMMENT ME", be creative with that one. The break "<br>" is there so that the next part of code is underneath this box and not next to it.

Step 3:

Button time! Here is the code for the button:

 

<input type="submit" value="VALUE" class="ANYTHING"></form>

 

input type="submit" tells the browser that it needs to create a button. value="VALUE" just puts words on the button, rename "VALUE" to anything, such as "Submit" or "Comment". Here is where the class we named earlier comes into play, rename "ANYTHING" to the same name you renamed it in the previous step.

 

CONGRATS!! Your form is done, now for the CSS coding.

 

Step 4:

This part of the code will tell the browser how you want the comment box to look. Just underneath all the previous code you wrote add this:

 

<style type="text/css">
textarea.ANYTHING {width:200px; height:130px;color:FFFFFF;font-size:16pt; font-family: georgia; letter-spacing:-2px;background-color: 000000;border-color: CCCCCC; border-style:solid; border-width:1px;}

 

style type="text/css" tells the browser what kind of language the code is in. textarea.ANYTHING needs to be renamed to the ANYTHING that you specified in the steps previous. Then all you have to do is specify the height and width, color:FFFFFF is the font color so choose wisely. font-size:16pt; is the font size, don't make it too large. font-family: georgia tells the browser what font to use, make sure it recognizes the font. letter-spacing: -2px is the spacing between letters, you should probably leave it at that or make it 1px. background-color: 000000 is the background color or the comment box, try to use a lighter color. border-style:solid tells what kind of border you will have, if you want no border just take that part of the code out. border-width:1px obviously tells the width of the border (if you have one).

 

Step 5:

Almost done, all you need to do now is specify what the button will look like with this code:

 

input.ANYTHING {width:200px; height:30px;color:FFFFFF;font-size:9px;font-face: small fonts; background-color:000000;border-color: CCCCCC; border-style:solid; border-width:1px;}</style>

 

Once again rename ANYNAME to the value you have specified previously. Specify the width and height of your button, you should probably set the width of the button to the same width of the input box as it makes it look cleaner. color:FFFFFF lets you choose the font color. font-size:9px lets you set the size of the text on the button, once again keep it at a reasonable size. font-face: small fonts tells the computer that the font is small caps (for more info on that visit http://www.w3.org/TR/REC-CSS2/fonts.html). background-color lets you set the background color, border-color lets you set the border, border-style lets you set the style of border, if you do not want a border then delete that part of the code. Border-width lets you set the width of the border if you have one. Remember, you MUST end it with </style>

 

Your completed code should look like this (with your modified values of course):

 

<form method="post" action="http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment"><input name="friendID" value="YOURIDHERE" type="hidden"> <textarea name="ANYNAME" class="ANYTHING">GRRCOMMENT</textarea><br><input type="submit" value="VALUE" class="ANYTHING"></form>

<style type="text/css">
textarea.ANYTHING {width:200px; height:130px;color:FFFFFF;font-size:16pt; font-family: georgia; letter-spacing:-2px;background-color: 000000;border-color: CCCCCC; border-style:solid; border-width:1px;}
input.ANYTHING {width:200px; height:30px;color:FFFFFF;font-size:9px;font-face: small fonts; background-color:000000;border-color: CCCCCC; border-style:solid; border-width:1px;}</style>

Now go out and create some wicked comment boxes.

discuss this topic to forum