suicidetutorials on Xanga

suicidetutorials
read my profile sign my guestbook Name: Jasmine Birthday: 1/20/1992 Gender: Female Message: message me Member Since: 3/6/2006

SubscriptionsSites I Read
Subscribe to suicidetutorials Get trial subscription

Blogrings
(¯`·._.·[LAYOUT TUTORIALS]·._.·´¯) previous - random - next

Posting Calendar

\|<< oldest \| newest >>\|
view all weblog archives

Thursday, March 09, 2006

Ah HTML, what basically everything on the internet is made of, to first understand layouts you must first be familiar with HTML wich stands for hypertext markup language.HTML codes tell a web page what to do, telling them, "make the background black" or "put this table over there!" yes, HTML is very bossy.I write my HTML in notepad, it should come with your computer. its not very fancy, but I find it the most easiest to use

use a style sheet below to get started on your layout

Now you have a page with text on it and what not, not very appealing is it? no images no color, rather blah if I say so myself.So on with the colors and backgrounds

Backgrounds

when you see background-color: #FFFFFF; you can put the hex code of a color to make the background one solid color, pretty spiffy huh? well what if you want a background image??
well first find an image hosting site like like imageshack, tinypic, or photobucket after your done uploading your image, it will give you a url for it. so when you see background-image:url(); put the url of the image between the parenthesis.
So, is your background a pattern background like this? if so, when you see background-repeat: no-repeat; change it to background-repeat:repeat;
but if you have an image like this wich is big enough to take up the whole page without repeating then leave it at no-repeat.

Colors

every color has a hex code, hex codes tells the HTML what color you want to make something, its very usefull if you want a nice layout, here is the HTML color chart

3:25 PM - 59 views - 16 eprops - 11 comments - email it

to put the layout code on your xanga, making it all pretty :D

Installing a layout

1.Copy the layout code, (higlight the code then right click then click copy/or/Ctrl and C)

2. Go to your Look and Feel

3. select the custom header, right click and click paste.

4:click preview, and if you like it then hit "yes save changes" :D

Tips for you

so you want people to come to your site? dont just sit there expecting people to find it..you have to adevertise. Join a layout blogring, or a xanga topsite, or ask to become affiliates with another layout site.eventually people will start coming in, and linking to your site and saying "hey this site is really rad". speaking of linking, you need a button so people can link to you.Plain text links are just not appealing, so make some nice pretty buttons for people to link to

No direct linking, wich is using someone elses image URLs wich is stealing there bandwith and is illegal for more info on hotlinking go here

No jocking, being original will get you way more visitors, and eventually someone will find out you've been jocking.What exactly is jocking you ask? Its stealing other peoples layout codes, and saying you made them, without even asking. most people are nice enough to let you have a stylesheet that they used to make a layout, aslong as you edit it and make it unique, but stealing it is a nasty habit.

3:25 PM - 58 views - 6 eprops - 3 comments - email it

Wednesday, March 08, 2006

Here is a style sheet for a normal layout, make sure to make it nice and pretty, and no need to credit me :D but it'd be nice if you subsrcibe¢¾
example

now for a skinny layout

wich looks like the layout I made for this site,wich is what you're looking at lol

heres another commonly used style
example

Another style (this style involves image mapping)
example

<MAP NAME='imgmap'> <AREA SHAPE='rect' COORDS='34,450,105,479' HREF='http://www.xanga.com' ALT='xanga' target="_new"> <AREA SHAPE='rect' COORDS='123,450,200,474' HREF='http://www.xanga.com/profile.aspx?user=USERNAME' ALT='profile' target="_new"> <AREA SHAPE='rect' COORDS='230,448,336,477' HREF='http://www.xanga.com/guestbook.aspx?user=USERNAME' ALT='guestbook' target="_new"> <AREA SHAPE='rect' COORDS='375,450,453,475' HREF='http://www.xanga.com/private/home.aspx ' ALT='private' target="_new"> <AREA SHAPE='rect' COORDS='39,480,95,503' HREF='http://www.xanga.com/CLAF/default.asp' ALT='customize look and feel' target="_new"> <AREA SHAPE='rect' COORDS='130,480,231,505' HREF='http://www.xanga.com/Private/SubscribeTo.aspx?user=USERNAME' ALT='subscribe' target="_new"> <AREA SHAPE='rect' COORDS='250,478,335,506' HREF='http://www.xanga.com/signin.aspx' ALT='sign in' target="_new"> <AREA SHAPE='rect' COORDS='354,479,431,507' HREF='http://www.xanga.com/logout.aspx' ALT='log out' target="_new"> <AREA SHAPE='rect' COORDS='88,509,376,535' HREF='http://www.xanga.com/sucidegraphics' ALT='USERNAME' target="_new"> </MAP> <IMG SRC='URL OF IMAGE HERE' border=0 width=800 height=585 USEMAP='#imgmap'> <div style=" overflow: auto; width: 412px; height: 316px; margin-top: -466px; margin-left: -333px;"> <style type="text/css"> .#rblEprops{display:none;} #pnlEnabled table, #htmleditor, #lblTimeZone, #pnlEprops, #rblEprops /* width of the comment page */ {width:245px;} .leftmoduletitlebar, .leftmoduleborder, .leftmoduleinterior, table.left, table.left TH, table.left TD, table.navigation, table.footer {display: none;} </style> <style type="text/css"> body { background-image:url(); background-repeat: repeat-y-x; background-color: #color; scrollbar-face-color: #color; scrollbar-shadow-color: #color; scrollbar-highlight-color: #color; scrollbar-3dlight-color: #color; scrollbar-darkshadow-color: #color; scrollbar-track-color: #color; scrollbar-arrow-color: #color; } #rblEprops, #pnlEnabled table, #pnlEprops table { width: auto !important; } hr { /* horizontal divider */ border: 1px solid color; } input, select, textarea, .textfield, .button { /* this edits the buttons, dropdowns, etc. */ font:normal 11px arial; background-color: #color; border: 1px solid color; letter-spacing:0px; color: color; } table.search TD, table.announcements TH { /* this should be left alone */ /* unless you know what to do */ border: #color; } table.search TD, table.search, table.announcements { /* border of search bar (if you have it) */ border: 1px solid color; background-color: #color; } table.blogbody { width: 375px; font-family: Arial; font-weight: none; font-size: 11px; color: #color; text-align: justify; padding: 0px; margin-top: 2px; } div.smalltext{ width: WIDTHpx; padding: 3px; text-align: left; } .caption, .blogheader { width: 360px; padding: 3px; font-family: arial; font-size: 11px; text-align: center; color: white; background-color: #color; filter: alpha (opacity=100, finishopacity=0, style=2); text-transform: lowercaps; margin-top: 10px; } } .left, .blogbody, table.footer, .standard, .leftmodulefontcolor, td, p { /* edits main text */ font:normal 11px arial; line-height:15px; color: #color; letter-spacing:0px; text-align:center; } .blogbody b, .standard b, p b, strong { /* edits bolded text in your entry */ font-weight: bold; color: #color; } em,i {font-weight:normal;italize; lefter-spacing: 0px; font-family: arial; color: #color;}; u {font-weight:normal; letter-spacing:0px; color: #color; border-bottom: 1pt solid #color; font-family: arial;} a:link, .footernav.link, a.footernav:link, a.footernav:active { /* edits all links */ color:#color; text-decoration: none; font: normal 11px arial; } a:visited, a.footernav:visited, { /* edits the links that the user has visited */ color: #color; text-decoration: none; font: normal 11px arial; } a:hover { /* edits when user mouseovers the links */ color: #color; cursor: ne-resize; text-decoration: underline; border: none; background-image: url(); border-bottom: 1pt solid #color; } </style>

This one is like the one above, (but without image mapping, yet it's still slightly advanced)
example

<center>
<img src="URL OF IMAGE HERE" ><br><br>
</center>
<div align=left>
<DIV style="margin-top: -94px; margin-left: 327; border:none;
width:300px;OVERFLOW: auto; height:75px; 
BACKGROUND-COLOR: transparent">
<center>
<b>Navigation</b><br>
. <a href="http://www.xanga.com"  target="_new">Xanga</a> 
. <a href="http://xanga.com/private/home.aspx"  target="_new">Private</a> 
. <a href="http://www.xanga.com/claf"  target="_new">claf</a> 
. Log <a href="http://edit.xanga.com/claf.aspx" 
 target="_new">in</a> or <a href="http://www.xanga.com/logout.aspx"  target="_new">out</a> 
. <a href="http://www.xanga.com/private/SubscribeTo.aspx?user=YOURUSERNAME&quo
t;"  target="_new">add me</a> .<br>
. <a 
href="http://www.xanga.com/guestbook.aspx?user=YOURUSERNAME"  target="_new">guestbook</a> 
. <a 
href="http://www.xanga.com/Private/subs.aspx"  target="_new">Friends</a> 
. <a 
href="http://www.xanga.com/profile.aspx?user=YOURUSERNAME" target="_new">Profile</a> .<br>

</center></div>
</P>
 </TBODY></TABLE></DIV>
 <div style="position:static; margin-left:190px;margin-top: 
-398px;border: 0px solid #color; width: 325px; height:255px; 
background:none;overflow: auto; FILTER: chroma(color=#color) 
allowTransparency">
<style type='text/css'>
table.left, td.mainleft, table.navigation, table.search, 
#SearchBar1_pnlYouAreHere, table.footer TD {display: none;}
body 
{overflow:none;
background-color: #color;
scrollbar-track-color: #color;
scrollbar-shadow-color: #color;
scrollbar-face-color: #color;
scrollbar-highlight-color: #color;
scrollbar-darkshadow-color: #color;
scrollbar-3dlight-color: #color }
body, td, p 
{color:color;
font-family: Andale Mono;
font-size: 8pt;
text-transform: none;}
a:link {color:#color;font-size: 8pt;}
a:visited {color:#color;font-size: 8pt;}
.title { color: #color;font-size: 8pt;}
div.blogheader, .caption {
text-transform:none;
font-size:10px;
font-weight:bold;
color:#color;
text-align: right}
b {
/* bolds the font */ 
font-weight:bold;
color:#color;
text-decoration: #colorline-through;
}
strong {
font-weight:bold;
color: #color;
Filter: DropShadow( color=#color, offX=2, offY=6, ); 
}
i, em {
color:color;
}
u {
text-decoration:underline;
color:#color; 
border-bottom: 1px dashed #color;
}
  }
a:hover {
/* edits when user mouseovers the links */
  color: #color; 
  text-decoration: #colorline-through;
  font:light 8pt arial;
  solid #color;
  cursor: crosshair;
    }
a:hover {
color: #color;
text-decoration: crosshair;
}
</style>

<style type="text/css">
body{cursor:crosshair}
</style>

11:00 PM - 21 views - 2 eprops - 1 comment - email it

Fun HTML

Scrolling marquee like this

Back and forth

whee look at me

Put music on your page :D

Background music
<bgsound src="Music url here!" loop="infinite">

music player *a bit complicated*
<object id="darkplayer" codeBase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" type="application/x-oleobject" height="0" standby="Loading Microsoft Windows Media Player components..." width="0" classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"> <param NAME VALUE> <param NAME="ShowControls" VALUE="0"> <param NAME="ShowStatusBar" VALUE="0"> <param NAME="ShowDisplay" VALUE="0"> <param NAME="DefaultFrame" VALUE="Slide"> <param NAME="Autostart" VALUE="1"> <param NAME="Loop" VALUE="True"> </object> <form name="form"> <p style="text-align: center"> <select style="FONT-SIZE: 8pt; BACKGROUND:#ffffff; WIDTH: 150px; COLOR: #000000; font-face: terminal" name="playlist" size="1"> <option value="0">NAME OF SONG HERE</option> <option value="1">NAME OF SONG HERE</option> <option value="2">NAME OF SONG HERE</option> <option value="3">NAME OF SONG HERE</option> <option value="4">NAME OF SONG HERE</option> <option value="5">NAME OF SONG HERE</option> <option value="6">NAME OF SONG HERE</option> <option value="7">NAME OF SONG HERE</option> </select><br> <input TYPE="BUTTON" NAME="darkplay" VALUE="play" OnClick="play(document.forms['form'].playlist);"> <input TYPE="BUTTON" NAME="darkpause" VALUE="pause" OnClick="document.darkplayer.Pause(); playstate=2;"> <input TYPE="BUTTON" NAME="darkstop" VALUE="stop" OnClick="document.darkplayer.Stop(); playstate=2;"></p> </form>  </span></span>

Links hover glow
 <style type="text/css"><a:link {filter:glow(color:#FFFFFF, strength=4);height:0px;width:inherit} a:active {filter:glow(color:#FFFFFF, strength=4);height:0px;width:inherit} a:visited {filter:glow(color:#FFFFFF, strength=4);height:0px;width:inherit} a:hover {filter:glow(color:#FFFFFF, strength=4);height:0px;width:inherit}</style target="_new">

Scroll images (marquee)
<marquee behavior=scroll direction="left"><img src="yourimagename.gif width="yourimagewidth "height="yourimageheight" border="0" alt="yourimagename"></marquee>

scroll linked images
<marquee behavior=scroll direction="left"><a href="http://address you want to link to><img src="yourimagename.gif width="yourimagewidth "height="yourimageheight" border="0" alt="yourimagename"></a></marquee>

Text area select all ( a text area is the block of text you see right below you :D)

for more scripts go to createblog.com

10:47 PM - 15 views - 12 eprops - 6 comments - email it