转贴：个性化的Blog Skin制作方法详解(本教程适用于.Text的Blog系统)

[原创教程]个性化的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;
}

在“自定义CSS”输入新的CSS代码：

#top {
padding : 0px;
background-color : #FF0066;
color : #000;
border-bottom : 1px solid #FFF;
height : 40px;
}

“SAVE”后，刷新你的blog，你会看到顶部的颜色变成了粉红色。
如果你还要使用背景图片显示在顶部，可以使用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;
}

（注：为了说明效果，上面的图片地址引用了我的blog上面的地址，你可以根据需要改成你自己的路径。）
其他部分的效果，你可以用同样的方法修改，此时，你需要对CSS知识有一定的了解。

  4   我的第一个Blog Skin的CSS代码
为了给你的学习带来一些帮助，这里公布我的第一个Blog Skin的CSS代码，你可以直接使用该代码查看效果。
（注：此代码仅供学习使用，请最好不要将此作为你的blog最终的代码，而且其中图片连接的地址不一定长期有效。）
效果预览：查看效果
模板选择：Hover-Custom CSS
自定义CSS：

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 
}  

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!^_^