欢迎光临
我们一直在努力

[更改Blog界面的方法] 让你的Blog更个性化些-ASP教程,ASP应用

建站超值云服务器,限时71元/月

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

赞(0)
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com 特别注意:本站所有转载文章言论不代表本站观点! 本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。未经允许不得转载:IDC资讯中心 » [更改Blog界面的方法] 让你的Blog更个性化些-ASP教程,ASP应用
分享到: 更多 (0)

相关推荐

  • 暂无文章