今天看了http://www.cnblogs.com/houkai/p/3394402.html 这位仁兄的定制方法,按照他的思路把自己的博客也定制了下,自我感觉不错,和大家分享下我的代码。
1.进入后台管理的设置。
2.我的博客模版选的是summerGarden.
3."通过CSS代码定制代码页面风格". 定制文章标题和文章内容的样式(Metro风格,去微软网站上扒的风格。。。。。)
a. 修改博客标题和副标题。通过F12查找到标题的id为“blogTitle”,所以将其字体改为segoe ui(Metro风格要求的字体。)
#blogTitle{ dipplay:inline-block; font-family:"Segoe UI Semibold","Segoe UI",Tahoma,Helvetica,sans-serif; }
b.修改文章标题的样式
.postTitle{ background-color:#4169E1; dipplay:inline-block; font-family:"Segoe UI Semibold","Segoe UI",Tahoma,Helvetica,sans-serif; font-size:16px; font-color:#ffffff; } .postTitle a{ color:#ffffff !important; }
c.修改文章内容的样式,将背景色设置成眼睛保护色
.postBody{ background-color:#CCFFCC; font-family:"Segoe UI Semibold","Segoe UI",Tahoma,Helvetica,sans-serif; font-size:13px; } .postCon { background-color:#CCFFCC; font-family:"Segoe UI Semibold","Segoe UI",Tahoma,Helvetica,sans-serif; font-size:13px; }
4.增加动画时钟,访问者分布图和微软翻译控件,将下列代码贴入“博客侧边栏公告(支持HTML代码”
a.动画时钟
<object id="honehoneclock" width="160" height="70" align="middle" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"> <param value="always" name="allowScriptAccess"> <param value="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.swf" name="movie"> <param value="high" name="quality"> <param value="#ffffff" name="bgcolor"> <param value="transparent" name="wmode"> <embed width="160" height="70" align="middle" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" allowscriptaccess="always" name="honehoneclock" bgcolor="#ffffff" quality="high" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.swf" wmode="transparent"> </object>
b.访问者分布图
需要去http://www.clustrmaps.com/index.htm 这个网站注册自己的博客网址和帐户,然后把得到的代码贴入即可。
c.微软翻译控件