[更改Blog界面的方法] 让你的Blog更个性化些

转载 2004年09月22日 12:53:00
 

这几天在CSDN的Blog上看了好些人的文章!也收获或多或少!^o^
不过在Blog上的界面看来看去都是这么传统的几个好看点。于是就突发奇想,看看可不可以把自己的Blog改得更好看更有自己的个性化点!呵!现在这个界面,就是结果了!

下面我把代码贴出来,也让大家的Blog更个性化些吧!代码很简单,也只是一些HTML加上一点点Javascript罢了!最重要的就是要了解下CSS样式表了!

_________________________________

首先进入你的Blog管理中心,选择:选项->配置
在“定制CSS选择器”文本框中输入你自己定义的CSS样式表。(下面是我的界面的CSS代码):

---------------------------------------------------------------------------------

body{
 background-color: #666666;
 margin: 0px;
 padding: 0px;
 SCROLLBAR-FACE-COLOR: #FFFFFF;
 SCROLLBAR-HIGHLIGHT-COLOR: #888888;
 SCROLLBAR-SHADOW-COLOR: #888888;
 SCROLLBAR-3DLIGHT-COLOR:#FFFFFF;
 SCROLLBAR-ARROW-COLOR: #888888;
 SCROLLBAR-TRACK-COLOR: #FFFFFF;
 SCROLLBAR-DARKSHADOW-COLOR:#FFFFFF;
}
.headermaintitle {
 font-size: x-large;
 FILTER: dropshadow(color=#000000, offx=1, offy=1, positive=1); WIDTH: 100%;
}
.midd {
 vertical-align: middle;
}
.FooterCell {
 visibility: hidden;
}
#top {
 BACKGROUND-POSITION: right top;
 BACKGROUND-IMAGE: url(http://www.so26.com/Images/bg_1.gif);
 BACKGROUND-REPEAT: no-repeat;
 HEIGHT: 88px
 VERTICAL-ALIGN: middle; HEIGHT: 75px; BACKGROUND-COLOR: #BB3D00;
}
.post {
 background-color: #F7F7F7;
 BORDER-RIGHT: #cccccc 1px solid;
 PADDING-RIGHT: 15px;
 BACKGROUND-POSITION: 50% top;
 BORDER-TOP: #cccccc 1px solid;
 PADDING-LEFT: 15px;
 FONT-SIZE: 9pt;
 MARGIN-BOTTOM: 28px;
 PADDING-BOTTOM: 15px;
 BORDER-LEFT: #cccccc 1px solid;
 COLOR: #000000;
 LINE-HEIGHT: 22px;
 PADDING-TOP: 1px;
 BORDER-BOTTOM: #cccccc 1px solid;
 BACKGROUND-REPEAT: repeat-x;
 background-image: url(http://www.so26.com/Images/bg_2.gif);
}
a:link {
 color: #000000;
 text-decoration: none;
}
a:visited {
 color: #000000;
 text-decoration: none;
}
a:hover {
 color: #000000;
 text-decoration: underline;
}
.post H2 {
 FILTER: dropshadow(color=#FFFFFF, offx=1, offy=1, positive=1); WIDTH: 100%;
}
.post .postfoot {
 color: #FF6600;
}
H5 {
 FILTER: dropshadow(color=#FFFFFF, offx=1, offy=1, positive=1); WIDTH: 100%;
}

---------------------------------------------------------------------------------

然后在“静态新闻/声明”的文本框中输入HTML或Javascript代码。(下面是我的界面的代码):

---------------------------------------------------------------------------------

<bgsound src="http://www.so26.com/mid/Loop_1.mid"/>
<DIV id=Layer2   style="BORDER-RIGHT: #000000 0px; BORDER-TOP: #000000 0px; Z-INDEX: 0; LEFT: 0px; BORDER-LEFT: #000000 0px; WIDTH: 180px; BORDER-BOTTOM: #000000 0px; POSITION: absolute; TOP: 0px; HEIGHT: 120px; BACKGROUND-COLOR: #eeeeee; layer-background-color: #eeeeee">
<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="180" height="22" align="left" valign="middle"><LI><H3>无聊寄语</H3></LI></td>
  </tr>
  <tr>
    <td><div id=speakDiv><div></td>
  </tr>
  <tr>
    <td class="midd"><H3><a href="http://blog.csdn.net/bgu/admin/default.aspx"><IMG alt="Manage Center" src="/images/xml.gif" border=0>管理中心</a></H3></td>
  </tr>
</table>
</DIV>
<script language="JavaScript">
var content;
content="<table width=180 height=70 class=midd><tr><td>";
content+="  在茫茫人海中寻找我人生唯一之伴侣,得之,我幸,不得,我之不幸!";
content+="<br>           --HD";
content+="</LI></td></table>";
document.all("speakDiv").innerHTML=content;
</script>

---------------------------------------------------------------------------------

代码很简单,只是在修改Blog代码的时候注意在HTML里的ID号就可以了!

我这里的修改也只是简单的改了加了点东西。大家如果有什么更好的意见,可留言!

最后:csdn的Blog不是个人主页!个性化它,只是让它个性化自己而已!


作者Blog:http://blog.csdn.net/bgu/

2016百度杯12月第四场挑战赛解题过程记录

这题从入门,到放弃,使用了一天时间,里面关于sql注入的套路比较深,故记录下解题过程,并和WP作了一定的结合。 百度杯比赛链:http://www.ichunqiu.com/racing/ctf_5...
  • qq_30123355
  • qq_30123355
  • 2017年02月27日 17:40
  • 214

Django 学习小组:博客开发实战第二周教程 —— 实现博客详情页面和分类页面

上周我们完成了博客的 Model 部分,以及 Blog 的首页视图 IndexView。本节接上周的文档 Django 学习小组:博客开发实战第一周教程 —— 编写博客的 Model 与首页面,我们继...
  • u014792107
  • u014792107
  • 2016年05月27日 14:18
  • 1271

ThinkPHP5.0应用生命周期

ThinkPHP5.0的应用请求的生命周期,以便了解整个执行流程。
  • znyaiw
  • znyaiw
  • 2017年12月18日 14:17
  • 22

Django:快速搭建自己打第一个的Blog

摘要: 利用Django快速搭建一个简单的Blog。参考自《Django Web开发指南》第二章。 一直有种想要搭建自己博客系统打冲动,可惜需要前端知识较多,而且还要安装一系列软件并配置(window...
  • huangzhiyuan111
  • huangzhiyuan111
  • 2016年12月04日 11:42
  • 2688

Python常用模块

常用模块  time  时间有关的操作,有三种表达方式:  1.时间戳(time.time)双流哪家医院做包皮好?成都金牛区治疗阴茎短小哪里好成都合江亭哪个医院无痛人流好?成都牛市口人流大概需要多少钱...
  • weixin_41235247
  • weixin_41235247
  • 2018年01月02日 14:53
  • 27

软件测试 Top 120 Blog (博客)

# Site Author Memo 1 DevelopSense Michael Bolton Context-driven school 2 James Bach's B...
  • KerryZhu
  • KerryZhu
  • 2013年09月23日 17:37
  • 21684

tiny-blog项目设计介绍(一个基于LAMP架构的轻量级博客系统)

一、源码路径 https://github.com/weiganyi/tiny-blog   二、界面 把项目代码放到Web服务器路径下某个目录,通过浏览器访问这个目录可以看到如下界面:   三、...
  • gary531
  • gary531
  • 2013年12月24日 17:31
  • 3016

如何用AWS(亚马逊云服务器)搭建一个自己的BLOG (2) – 修改网站的标题和样式

现在你已经有一个自己的blog了,但是如果你尝试登陆,你会发现你不知道用户名和密码。 你只要按照下面文档去做就可以找到密码, https://bitnami.com/aws-credentials...
  • fenixshadow
  • fenixshadow
  • 2016年03月16日 20:44
  • 1982

为什么要写blog????

作为一名IT屌丝,曾经沉醉在自我的时间,没有目标,彷徨,没有方向。看到这篇文章心中一怔,或许这就是起点!从这篇blog开始行动...
  • qq_28570871
  • qq_28570871
  • 2017年05月27日 18:16
  • 149

谈一谈CloudBlog的系统架构

最近十几天在做一个博客系统,因为域名服务器都闲置已久,于是乎决定合理利用起来,做个网站。系统整体架构采用分布式的系统,也是当今很多企业都在用的,基于restful风格的一套系统。从父工程开始blog-...
  • sdksdk0
  • sdksdk0
  • 2016年12月14日 11:03
  • 2721
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:[更改Blog界面的方法] 让你的Blog更个性化些
举报原因:
原因补充:

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