我的CSDN BLOG风格设置

原创 2004年10月30日 15:36:00

今天刚刚激活CSDN BLOG后就对它进行了一次“美容”,哈哈(我也是个俗人,没办法)

对于BLOG,RSS等新鲜玩意我完全是个门外汉,还好InterNet是个百科全书,真难想象
没有它的日子我们能撑多久。

言规正传,在Google上搜了一把,看到很多大侠写的关于设置BLOG的文章,于是就照葫芦
画瓢照搬了他们的创意,甚至照抄了“相忘江湖”大侠的页面风格,真是“罪过”!!!

猜想大侠们应该不会在意吧,大家都用他们的创意才显得大侠厉害嘛!(但愿马屁没有拍到
马腿上,嘻嘻~~~~~~

美容的内容主要如下:
1 增加时钟
2 增加天气预报
3 增加计数器(计数器部分的代码我没有提供,需要你自己先去申请免费的计数器,
  然后那里会告诉你如何在你的页面中嵌入计数器!,我的免费计数器来自
  http://www.newzgc.com/others/counter/,在这里申请后将相应的代码放入
  “静态新闻/声明”部分即可)
4 鼠标后的动态文字
5 修改页面的显示风格

主要参考的文章:
http://blog.csdn.net/wenweimin/archive/2004/08/20/79873.aspx(源自大侠:wenweimin的专栏)

还有如下几个大侠的BLOG:
相忘江湖铁拳的 Blog .......

我的BLOG->“选项”->“配置”中相关设置如下:
(如果你不知道怎么用,copy我的配置到相应位置,当然有些地方需要你修改

皮肤
AnotherEon001

定制CSS选择器

.headermaintitle{font-family:Verdana;font-size:1cm;color:#000000;align:center}
.BlogStats{color:black;}
p.date span
{
 background-color : #e7e7e7;
}
.post
{
 border: 1px solid #CCCCCC;
 border-bottom-width: 2px;
 border-right-width: 2px;
 padding: 4px;
 margin-bottom: 28px;
 background-color: #dadada;
}
.post h2
{
 font-size: 14px;
 margin: 0px;
 margin-bottom: 4px;
 font-family:Verdana;
}
.post a
{
 color: #ff5500;
}
.post .postfoot
{
 margin: 0px;
 margin-top: 14px;
 color: #aa6666;
 border-top: 1px solid #DDDDDD;
 font-size: 0.8em;
 background-color: #c8c8c8;
}
#top
{
 background-color : #ffffff;
 height: 75px;
 vertical-align: middle;
 background-image:url(你的背景照片URL);
 background-repeat:no-repeat;
 filter:alpha(opacity=80);
}
#sub
{
 text-align: right;
 background-color:#BBd4D9;
 color: #CCCCCC;
 font-size: 0.8em;
 padding: 4px;
}
#LeftCell
{
 width: 200px;
 vertical-align: top;
 background-color:#BBC3D9;
 filter:alpha(opacity=100,finishopacity=0,style=1);
}
.MainCell
{
 border-left: 1px solid #DDDDDD;
 border-bottom: 1px solid #DDDDDD;
 padding: 10px;
 background-color:#e7e7e7;
 vertical-align: top;
}

静态新闻/声明

<br>
<center>
<EMBED SRC=http://www.butabon.com/Clock/clock_022.swf WIDTH=150 HEIGHT=150 wmode=transparent quality=high loop=true menu=false>
</center>
<p>
<br>
<b>&nbsp今日天气</b>
<br>
<center>
<iframe width=157 height=240 frameborder=0 scrolling=NO src='http://appnews.qq.com/cgi-bin/news_qq_search?city='></iframe>
</center>

<br>
<b>&nbsp联系方式</b>
<br>
<br>

<center>
<img src="你的mail LOGO">
</img>
</center>
<br>

<center>
<img src="http://icon.tencent.com/你的QQ/l/612/">
</img> QQ:2176077
</center>
<br>
<br>

<style type="text/css">
.spanstyle
{
 position:absolute;
 visibility:visible;
 top:-500px;
 font-size:10pt;
 color: #0000ff;
 font-weight:bold;
}
</style>

<script>
 var x,y
 var step=15
 var flag=0
 var message="施主何必呢"
 message=message.split("")
 var xpos=new Array()
 for (i=0;i<=message.length;i++)
 {
  xpos[i]=-500
 }
 var ypos=new Array()
 for (i=0;i<=message.length;i++)
 {
  ypos[i]=-500
 }
 function handlerMM(e)
 {
  x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX-5
  y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY-75
  flag=1
 }
 function makesnake()
 {
  if (flag==1 && document.all)
  {
   for (i=message.length; i>=1; i--)
   {
    xpos[i]=xpos[i-1]+step
    ypos[i]=ypos[i-1]
   }
   xpos[0]=x+step
   ypos[0]=y
   for (i=0; i<message.length; i++)
   {
    var thisspan = eval("span"+(i)+".style")
    thisspan.posLeft=xpos[i]
    thisspan.posTop=ypos[i]
   }
  }
  else if (flag==1 && document.layers)
  {
   for (i=message.length; i>=1; i--)
   {
    xpos[i]=xpos[i-1]+step
    ypos[i]=ypos[i-1]
   }
   xpos[0]=x+step
   ypos[0]=y
   for (i=0; i<message.length; i++)
   {
    var thisspan = eval("document.span"+i)
    thisspan.left=xpos[i]
    thisspan.top=ypos[i]
   }
  }
  var timer=setTimeout("makesnake()",30)
 }
</script>

<body onLoad="makesnake()" >
<script>
 for (i=0;i<=message.length;i++)
 {
  document.write("<span id='span"+i+"'class='spanstyle'>")
  document.write(message[i])
  document.write("</span>")
 }
 if (document.layers)
 {
  document.captureEvents(Event.MOUSEMOVE);
 }
 document.onmousemove = handlerMM;
</script>


(完)

CSDN 博客排版技巧

CSDN的博客排版采用的编辑器是xhEditor,官方介绍是:能实现Word代码自动检测并清理,提供高效完美的Word代码过滤方案,生成代码最优化精简,不丢失任何细节效果。但是,实际使用中不丢失任何细...
  • thisinnocence
  • thisinnocence
  • 2014年04月27日 21:13
  • 5205

常用的样式

输入文本框的样式: .input-text { background: #FAFAFA none repeat scroll 0 0; border: 1px solid #...
  • oYuanFen123456789
  • oYuanFen123456789
  • 2013年08月23日 14:10
  • 451

自定义CSDN Blog的CSS样式

csdn blog css自定义设置可以在博客的配置页面的自定义css栏中填入css样式代码来自定也blog的风格csdn blog的页面架构基本是由div实现的,整个页面主要由三个div组成,它们的...
  • dux003
  • dux003
  • 2009年11月08日 16:08
  • 1844

CSDN博客模版之vista 样式

  • 2007年11月22日 18:47
  • 2KB
  • 下载

我原来自定义的一些CSDN BLOG样式.

body { font-size: 12px; text-decoration: none;}.postTitle { font-size: 14px; font-weight: bold; colo...
  • kgdiwss
  • kgdiwss
  • 2005年06月18日 18:17
  • 949

制作自定义CSDNBLOG皮肤

制作自定义CSDNBLOG皮肤hbzxf(阿好)http://blog.csdn.net/hbzxf/         如果你已经有了一个比较个性化的计数器的话,下面我教你如何为CSDNBLOG制作自...
  • hbzxf
  • hbzxf
  • 2004年06月27日 18:09
  • 11425

如何更改CSDN博客高亮代码皮肤的样式,使博客看起来更有范

由于本人写博客的时候,也没有配置博客的相关属性,因此贴出来的代码块都是CSDN默认的,因此代码背景色都是白色的,如下所示: 但是本人在浏览他人博客的时候,发现有些博客的代码块看起来比较有...
  • oThomasyang
  • oThomasyang
  • 2013年10月23日 21:42
  • 4059

csdn博客 代码块的显示设置以及图片的插入技巧

最近在csdn写技术类的博客,
  • fengkuangshixisheng
  • fengkuangshixisheng
  • 2014年05月30日 17:00
  • 9407

设置新版CSDN博客的标题、域名、皮肤及代码皮肤~

设置新版CSDN博客的标题、域名、皮肤及代码皮肤 以前总觉的自己的CSDN博客很单调,后来有时间查了查,发现设置博客的标题、皮肤什么的都挺简单的,下面将设置的步骤罗列一下。 步骤一:打开...
  • yangle20081982
  • yangle20081982
  • 2014年03月15日 15:05
  • 3116

CSDN博客图片调整大小

![这里写图片描述](http://img.blog.csdn.net/2017094030746?watmark/2/text/aHR0cDovL2cuY3Nkbi5uZXQvV5bm1hbjIzM...
  • feynman233
  • feynman233
  • 2017年08月24日 20:53
  • 298
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:我的CSDN BLOG风格设置
举报原因:
原因补充:

(最多只允许输入30个字)