这几天在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不是个人主页!个性化它,只是让它个性化自己而已!
