這幾天在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 ><IMG alt="Manage Center" src="http://www.okasp.com/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不是個人主頁!個性化它,只是讓它個性化自己而已!
|