[原创教程]个性化的Blog Skin制作方法详解
原文地址 http://dotnet.mblogger.cn/qiuji/posts/2012.aspx
自从7月9日我设计出自己的第一个Blog Skin开始到现在,已经有许多朋友表示对此感兴趣,并且迫切的想知道怎么样去实现它。由于前段时间比较忙,所以一直没有时间来整理,现在把制作方法整理出来,提供给大家参考,希望能够给您美化您的Blog带来一定的帮助。阅读过程中如果有什么疑问,请在下面留言。
1 需要具备的知识
你需要了解基本的HTML知识以及CSS样式表的知识。另外,如果你需要界面更加生动,可以添加一些图片效果,这时你需要掌握一些图片处理的知识,会使用一种图像处理软件(例如:Photoshop, Fireworks等等)。
2 本教程的适用范围以及相关注意事项
·适用范围:本教程适用于.Text的Blog系统(其他的Blog系统由于没有测试过,所以不能肯定是否适用)。
如果确定你的Blog系统是.Text的Blog系统?
.Text的Blog系统在页面上你会看到图标,一般位于页面的最底部。
·注意事项:下面的制作过程以mblogger.cn汉化的.Text Blog系统为基础,您的Blog如果不是mblogger.cn的,可能在部分词语的表达上会稍微有点不同,不过请放心,这只是系统界面翻译的问题,不影响你的任何操作。
·其他注意事项:其他需要注意的地方,我会在文中相应的地方以粗体或者显目的颜色标示。
3 Blog Skin 制作过程讲解
步骤一:
登录你的Blog,然后点击“管理”进入管理页面。选择“选项”->“配置”,在这里“模板选择”和“自定义CSS”将决定你的Blog的显示效果。“模板选择”提供了基本的模板,而“自定义CSS”则是你大显身手的地方,这里你可以添加你自定义的CSS样式(如图)。
要自定义你的CSS,建议选择你的模板为名称中带有Custom的,例如“Hover-Custom CSS”。
步骤二:
到这里,我们知道了通过添加“自定义CSS”来个性化Blog的界面,但是如何添加呢?
仔细研究过你会发现,每个模板都对应一个CSS文件,该文件包含了该模板所有的CSS样式。
假设你选择了模板“Hover-Custom Css”,现在回到你的blog首页,点击右键,选择“查看源文件”,你会找到下面的代码:<link rel="stylesheet" href="/Skins/Hover/style.css" type="text/css" >
以我的Blog(http://dotnet.mblogger.cn/qiuji/)为例,那么该CSS的位置为http://dotnet.mblogger.cn/Skins/Hover/style.css
打开此文件,你就可以看到CSS代码了。现在,你要修改哪个部分的效果,就把那个部分的CSS代码修改成你自己的,然后放到“自定义CSS”文本框中,然后“SAVE”后,重新打开你的Blog页面,就可以看到效果了。
例如:你要修改页面顶部的显示效果,可以这样修改:
原来的CSS代码:
#top {
padding : 0px; background-color : #088; color : #000; border-bottom : 1px solid #FFF; height : 40px; } |
#top {
padding : 0px; background-color : #FF0066; color : #000; border-bottom : 1px solid #FFF; height : 40px; } |
如果你还要使用背景图片显示在顶部,可以使用background-image属性,代码如下:
#top {
background-image: url(http://dotnet.mblogger.cn/images/dotnet.mblogger.cn/qiuji/45/o_qiuji_top.jpg); background-repeat: repeat; padding-top: 15px; background-color : #088; color : #000; border-bottom : 1px solid #FFF; height : 70px;vertical-align : middle; } |
其他部分的效果,你可以用同样的方法修改,此时,你需要对CSS知识有一定的了解。
4 我的第一个Blog Skin的CSS代码
为了给你的学习带来一些帮助,这里公布我的第一个Blog Skin的CSS代码,你可以直接使用该代码查看效果。
(注:此代码仅供学习使用,请最好不要将此作为你的blog最终的代码,而且其中图片连接的地址不一定长期有效。)
效果预览:查看效果
模板选择:Hover-Custom CSS
自定义CSS:
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](/Images/OutliningIndicators/None.gif)
body {
font-size : 9pt; font-family : 宋体,Verdana, Geneva, Arial, Helvetica, sans-serif; margin : 0px; } A:link { COLOR: #3F68A6; TEXT-DECORATION: none } A:active { COLOR: #3F68A6; FONT-STYLE: normal; TEXT-DECORATION: none } A:visited { COLOR: #3F68A6; TEXT-DECORATION: none } A:hover { COLOR: #A7672E;TEXT-DECORATION: underline } #leftmenu ul { list-style : none; margin : 0px; padding : 0px; margin-left : 5px; margin-bottom : 10px; } #top { background-image: url(http://dotnet.mblogger.cn/images/dotnet.mblogger.cn/qiuji/45/o_qiuji_top.jpg); background-repeat: repeat; padding-top: 15px; background-color : #088; color : #000; border-bottom : 1px solid #FFF; height : 70px;vertical-align : middle; } div.post{ background-image: url(http://dotnet.mblogger.cn/images/dotnet.mblogger.cn/qiuji/45/o_o_bj.jpg); background-repeat: repeat-x; padding-right: 20px; padding-left: 20px; font-size: 9pt; padding-bottom: 5px; padding-top: 5px; line-height:150%; } #leftmenu { position : absolute; left : 0px; width : 180px; background-image: url(http://dotnet.mblogger.cn/images/dotnet.mblogger.cn/qiuji/45/o_zuo_bj.jpg); padding-bottom : 5px; line-height:150%; } #comments h4 { vertical-align : middle; margin : 0px; font-size : 1.2em; background-color : #F1F7FA; height:25px; color:#006699; } p.date { height : 25px; font-size : 12pt; margin-bottom : 0px; padding : 2px 0px; color:#FFF; background-color : #45A; background-image: url(http://dotnet.mblogger.cn/images/dotnet.mblogger.cn/qiuji/45/o_bg0001.jpg); } p.date span { padding-left : 10px; padding-right : 10px; text-align:right; background-image: url(http://dotnet.mblogger.cn/images/dotnet.mblogger.cn/qiuji/45/o_bg0001.jpg); } #tagline { color : #000; font-size : 1em; margin : 0px; background-image: url(http://dotnet.mblogger.cn/images/dotnet.mblogger.cn/qiuji/45/o_bihai3.gif); padding : 5px;font-weight : bold; background-color : #B2DEFF; } #leftmenu a:active, #leftmenu a:visited, #leftmenu a:link { border : 0px solid #C00; margin-right : 5px; padding : 2px; COLOR: #3F68A6; TEXT-DECORATION: none } #leftmenu a:hover { COLOR: #A7672E; border : 0px solid #C00; background-color : transparent; TEXT-DECORATION: underline } |
5 总结
基本上要点就是这么多,由于时间仓促,可能还有部分要点没有提到,如有疑问和任何不理解的地方,请在下面留言,我会尽快给您解答。
充分发挥你的想象力,相信您会把你的Blog改得非常的漂亮、非常充满个性。
祝您使用愉快!Enjoy yourself!^_^