Detailed description of csdn blog creation (taking myself as an example)

1. Scroll text
<Marquee direction = "up" Height = 80px scrolldelay = 150 scrollamount = 2>
<Font color = #000080>
<Br>
Welcome to my blog! Under construction!
<Br>

2. Add the "status bar text" function for the blog
<Script language = JavaScript>
VaR message = "welcome to the Flying Angel column"
VaR position = 100
VaR delay = 10
VaR scroll = new statusmessageobject ()
Function statusmessageobject (p, d)
{
This. MSG = message
This. Out = ""
This. Pos = position
This. Delay = Delay
This. I = 0
This. Reset = clearmessage
}
Function clearmessage ()
{
This. Pos = position
}
Function scroller ()
{
For (scroll. I = 0; scroll. I <scroll. Pos; scroll. I ++ ){
Scroll. out + = ""}
If (scroll. Pos> = 0)
Scroll. out + = scroll. msg
Else scroll. Out = scroll. msg. substring (-scroll. Pos, scroll. msg. length)
Window. Status = scroll. Out
Scroll. Out = ""
Scroll. pos --
If (scroll. Pos <-(scroll. msg. Length )){
Scroll. Reset ()}
SetTimeout ('scroller () ', scroll. Delay)
}
Function snapin (jumpspaces, position)
{
VaR MSG = scroll. msg
VaR out = ""
For (VAR I = 0; I <position; I ++)
{
Out + = msg. charat (I)
}
For (I = 1; I <jumpspaces; I ++)
{
Out + = ""
}
Out + = msg. charat (position)
Window. Status = out
If (jumpspaces <= 1)
{
Position ++
If (msg. charat (position) = '')
{
Position ++
}
Jumpspaces = 100-Position
}
Else if (jumpspaces> 3)
{
Jumpspaces * =. 75
}
Else
{
Jumpspaces --
}
If (position! = Msg. length)
{
VaR cmd = "snapin (" + jumpspaces + "," + Position + ")";
Scrollid = Window. setTimeout (CMD, scroll. Delay );
}
Else
{
Window. Status = ""
Jumpspaces = 0
Position = 0
Cmd = "snapin (" + jumpspaces + "," + Position + ")";
Scrollid = Window. setTimeout (CMD, scroll. Delay );
Return false
}
Return true
}
Snapin (100,0 );
</SCRIPT>
</Font>
</Marquee>

3. counters

4. Add a flash clock to the blog
<Ul class = "list"> </ul> <H3 class = "listtitle"> clock <Embed src = http://www.clocklink.com/Clocks/0001-Blue.swf? Timezone = CCT width = 165 Height = 165 wmode = transparent quality = high loop = true menu = false>

5. Add the "Weather Forecast" function for the blog
<Ul class = "list"> </ul> <H3 class = "listtitle"> weather forecast <P>
<Center> <IFRAME width = 157 Height = 240 frameborder = 0 scrolling = No src = 'HTTP: // appnews.qq.com/cgi-bin/news_qq_search? City = '> </iframe> </center>

6. Add a search function for your blog
<Ul class = "list"> </ul> <H3 class = "listtitle"> Search <SCRIPT type = text/JavaScript>
Function myclick (){
Window. Open ("http://www.google.com/search? As_sitesearch = http://blog.csdn.net/fjnu_angel&as_q= "+ GetObject (" as_q "). value );
}
</SCRIPT>
<A href = "http://www.google.com/">
</img> </a>
<Br>
<Font size = 1> & nbsp;
<Input type = "text" name = "as_q" size = "10" id = "as_q">
<Input type = "button" name = "btng" value = "Search" onclick = "myclick ();">
</Font>

7. Insert music
<Ul class = "list"> </ul> <H3 class = "listtitle"> Angel secrets <Br>
<Embed src = "http://hd61.15150.com/music111/2006_8_12/226634_173010_161545.mp3" width = "170" Height = "25" type = "audio/MPEG" autostart = "true" loop = "infinite"> </embed>

8. Add a CSS style

Body {

Margin: 0px; Background-color: # fafafa

}

A {

Color: # 00f; text-Decoration: None

}

A: hover {

Color: black; text-Decoration: None

}

H2 {

Margin: 0px 0px 10px

}

# Top {

Filter: progid: DXImageTransform. microsoft. gradient (startcolorstr = '# 0a6cce', endcolorstr = '# ffff', gradienttype = '1'); color: # FFF; border-bottom: #443 0px solid; Height: 100%

}

# Top H1 {

Padding-Right: 5px; padding-left: 5px; padding-bottom: 2px; padding-top: 2px

}

# Top H1 {

Color: # FFF;

}

# Menu {

Border-top: #999 1px solid; font-size: 100%; Background: # f1f1f1; padding-bottom: 2px; margin: 0px; padding-top: 2px; border-bottom: #999 1px solid

}

# Menu ul {

Height: 100%; font-size: 100%; color: black; text-Decoration: none; margin: 0px 0px 0px 20px; padding: 0px; List-style-type: none;

}

# Menu Li {

Height: 100%; font-size: 100%; border-Right: # a9a9a9 1px solid; padding-Right: 2px; display: inline; padding-left: 2px; padding-bottom: 0px; padding-top: 0px;

}

# Menu Li {

Height: 100%; Font: 80% verdana; color: black; text-Decoration: none;

}

# Menu Li {

Border: 1px # f1f1f1 solid; padding-left: 6px; padding-Right: 6px; padding-top: 1px; padding-bottom: 1px; margin: 0px; Background-color: # f1f1f1; color: black; text-Decoration: none;

}

# Menu Li A: hover {

Border: 1px #999 solid; padding-left: 6px; padding-Right: 6px; padding-top: 1px; padding-bottom: 1px; margin: 0px; Background-color: # CCC; color: black; text-Decoration: none;

}

# Mylinks1_xmllink {

Visibility: hidden; width: 0px; Height: 0px; padding: 0px; margin: 0px;

}

# Mylinks1_xmllink IMG {

Visibility: hidden; width: 0px; Height: 0px; padding: 0px; margin: 0px;

}

# Leftmenu H3 {

Border: #999 0px; border-bottom: none; Height: 100%; margin: 0px; padding: 5px; filter: progid: DXImageTransform. microsoft. gradient (endcolorstr = '# ffff', startcolorstr =' # 4992db', gradienttype = '0 ');

}

# Leftmenu ul {

Border-Right: #999 0px; padding-Right: 5px; border-top: #999 0px; margin-top: 0px; padding-left: 4px; margin-bottom: 10px; padding-bottom: 4px; margin-left: 0px; border-left: #999 0px; padding-top: 4px; border-bottom: #999 0px

}

# Leftmenu Li {

Color: black; text-Decoration: none;

}

# Leftmenu Li A: hover {

Color: black; text-Decoration: underline;

}

# Main {

Padding: 10px; margin-left: pixel PX; Border: none; border-left: #999 1px solid; border-bottom: #999 4px solid; Background-color: # ffffff

}

# Main P. Date {

Border: #999 1px solid; border-bottom: none; padding: 5px; margin: 0px; Height: 100%; filter: progid: DXImageTransform. microsoft. gradient (endcolorstr = '# 4992db', startcolorstr =' # ffff', gradienttype = '1 ');

}

# Main Div. Post {

Border: #999 1px solid; padding: 5px; margin: 0px 0px 10px;

}

# Main A, A: hover, A: visited {

Color: #700;

}

# Main P. postfoot {

Padding: 0px; padding-top: 5px; padding-bottom: 2px; margin: 10px 0px 0px; border-top: #999 1px dotted;

}

# Comments {

Margin-bottom: 10px; color: #700

}

# Comments H3 {

Color: #700.

}

# Comments H4 {

 

}

# Comments P {

Border-bottom: # dddddd 1px solid

}

# Comments p {

Font-size: 9px; color: darkblue

}

# Comments H4 span {

Color: #999.

}

# Footer {

Font-size: 0px; visibility: hidden; margin: 0px; padding-top: 0px; Height: 0px; text-align: Center

}

# Footer IMG {

Visibility: hidden; width: 0px; Height: 0px

}

# Div_list P {

Font-size: 12px

}

# Div_list IMG {

Border-Right: #000000 1px solid; border-top: #000000 1px solid; border-left: #000000 1px solid; border-bottom: #000000 1px solid

}

# Imageframe Div. div_image {

Margin-top: 20px; text-align: Center

}

# Imageframe Div. div_link {

Text-align: Center

}

# Commentform table {

Border-Right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px

}

# Commentform TD {

Border-Right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px

}

# Commentform tr {

Border-Right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px

}

# Main Div. cus_code {

Color: #465584; font-size: 12px; font-family: Courier New; Border: #000000 1px solid; border-left: #666666 6px solid; padding-left: 0px 0px 0px 0px; margin: 10px 20px; behavior: URL ("/images/upload/myhan/formatphpcode. HTC "); background-color: # ffffff;

}