CSDN博客制作详解（以本人为例）

1.滚动的文字
<marquee direction="up" height=80px scrolldelay=150 scrollamount=2>
<font color=#000080>
<BR>
欢迎来到我的BLOG!建设中!
<BR>

2.为Blog 添加“状态栏文本”功能
<script language=JavaScript>
 var MESSAGE="欢迎您亲自光临飞翔天使的专栏            "
 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.计数器
<img src=http://nmc2.jy.js.cn/cgi-bin/counter.pl?id=csdn_blog_fjnu_angel&md=a12&ln=6&from=0&bd=$0;$0;$255>

4.给blog增加flash精美时钟
<ul class="list"></ul><h3 class="listtitle">时钟</h3>
<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.为Blog 添加“天气预报”功能
<ul class="list"></ul><h3 class="listtitle">天气预报</h3>
<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.为你的blog添加搜索功能
<ul class="list"></ul><h3 class="listtitle">搜索</h3>
<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 src="http://www.google.com/logos/Logo_25wht.gif" border="0" alt="Google" align="middle"></img></a>
<br>
<font size=1> &nbsp;
<input type="text" name="as_q" size="10" ID="as_q">
<input type="button" name="btnG" value="搜索" οnclick="myclick();">
</font>

7.插入音乐
<ul class="list"></ul><h3 class="listtitle">天使之音</h3>
<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.添加CSS样式

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='#FFFFFF', 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 A {

  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 a {

  height:100%; FONT: 80% Verdana; COLOR: black; TEXT-DECORATION: none;

}

#menu LI A {

  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='#ffffff', 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 A {

  COLOR: black; TEXT-DECORATION: none;

}

#leftmenu LI A:hover {

  COLOR: black; TEXT-DECORATION: underline;

}

#main {

  PADDING: 10px; MARGIN-LEFT: 190px;  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='#FFFFFF', 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 A {

  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;

}