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

Source: Internet
Author: User

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;

}

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.