博客园美化主题——只需一分钟

前言

如果你只想快速开始,那请直接查看wiki~

快速使用博皮 · wangyang0210/Cnblogs-Theme Wiki (github.com)

下面的教程是之前使用的第一版博皮的样式,属于简洁清新的,你只需要根据博文选好模板然后复制粘贴即可,详细的请访问白色泪光,本人现用的这套博皮是根据bndong的进行修改的,且配置需要时间,有兴趣可以直接访问bndong,查看置顶博文进行配置。所有的修改都在博客园后台管理--->设置中,其中js的权限是要申请的。

 

配置期间如有不懂之处,欢迎随时评论!

 

第一套皮肤(借用下薛丫丫同学的博客)

第二套皮肤(大家直接看我博客就知道了)

 

 

【美化内容】

基本模板

darkgreentrip 

(感谢 薛丫丫  同学提醒)

 

页面定制CSS

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
#home {
    margin: 0 auto;
    width: 80%;/*原始65*/
    min-width: 980px;/*页面顶部的宽度*/
    background-color: rgba(245, 245, 245, 0.7);
    padding: 30px;
    margin-top: 50px;
    margin-bottom: 50px;
    box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
body {
    background: rgba(12, 100, 129, 1) url('http://attach.bbs.miui.com/forum/201406/29/002350y098au8440ja80gm.jpg') fixed no-repeat;
    background-position: 50% 5%;
    background-size: cover;
}
#navList a:hover {
    color: white;
    background-color: #8BC34A;
    text-decoration: none;
    text-shadow: 0px 0px 1px #8BC34A;
}
#blogTitle {
    height: 100px/*高度*/
    clear: both;
    background-color: rgba(245, 245, 245, 0);
}
#blogTitle h1 {
    font-size: 36px;
    font-weight: bold;
    line-height: 1.8em;/*原始 1.6em*/
    margin-top: 10px;/*原始 15px */
    color: #548B54;
}
#blogTitle h2 {
    font-weight: normal;
    font-size: 17px;/*原始 16px ;font-size: 1.0rem;*/     
    line-height: 1.8;
    color: #111;
    font-weight: bold;
    text-align: right;
    float: right;
}
#navigator{
    background-color: rgba(33, 160, 139, 0.9);
}
#navList a:link, #navList a:visited, #navList a:active{
    color: #eee;
    font-size: 18px;
    font-weight: bold;
}
.blogStats{
    color: #eee;
}
.postTitle {
    border-left: 8px solid rgba(33, 160, 139, 0.68);
    margin-left: 10px;
    margin-bottom: 10px;
    font-size: 20px;
    float: right;
    width: 100%;
    clear: both;
}
.postTitle a:link, .postTitle a:visited, .postTitle a:active {
    color: #21759b;
    transition: all 0.4s linear 0s;
}
.postTitle a:hover {
    margin-left: 30px;
    color: #8BC34A;
    text-decoration: none;
}
.postCon {
    float: right;
    line-height: 1.5em;
    width: 100%;
    clear: both;
    padding: 10px 0;
}
 
.day .postTitle a {
    padding-left: 10px;
}
.day {
    background: rgba(255, 255, 255, 0.5);
}
/*文章附加信息*/
.postDesc {  
    background: url(images/posted_time.png) no-repeat 0 1px;
    color: #757575;
    float: left;
    width: 100%;
    clear: both;
    text-align: left;    
    font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
    font-size: 13px;
    padding-right: 20px;/*5px  padding-left: 90px;posted 发表时间左边距离*/
    margin-top: 20px;
    line-height: 1.8;
    padding-bottom: 35px;
}
 
.newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory,
.catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView,
.catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory ,#blog-calendar
{
    background: rgba(255, 255, 255, 0.5);
    margin-bottom: 35px;
    word-wrap: break-word;
}
 
.CalTitle{
    background: rgba(255, 255, 255, 0);
}
.catListTitle{
    background-color: rgba(33, 160, 139, 0.9);
}
 
#topics{
    background: rgba(255, 255, 255, 0.5);
}
 
.c_ad_block{
    display: none;
}
 
#tbCommentBody{
    width: 100%;
    height: 200px;
    background: rgba(255, 255, 255, 0.5);
}
 
#q{background: rgba(255, 255, 255, 0);}
 
.CalNextPrev{background: rgba(255, 255, 255, 0);}
 
.cnblogs_code{
    background: rgba(255, 255, 255, 0);   
}
 
.cnblogs_code div{
    background: rgba(255, 255, 255, 0);   
}
 
.cnblogs_code_toolbar{
    background: rgba(255, 255, 255, 0); 
}
 
.entrylist{
    background: rgba(255, 255, 255, 0.5); 
}
a:hover {
    color: #F60;
    text-decoration: none;
}

  

侧边栏公告

头像不要忘记替换成自己的哦~

1
2
3
<div align="center">
 <img src="https://pic.cnblogs.com/avatar/1334215/20180504110551.png">
</div>

 

页面首页

github的地址不要忘记替换成自己的哦~

1
2
3
<a href="https://github.com/king-y" target="_blank">
   <img style="position: fixed; top: 0; right: 0; border: 0; z-index: 1;"src="http://images.cnblogs.com/cnblogs_com/jackson0714/779808/o_github.png" >
 </a>

 

posted @   。思索  阅读(9744)  评论(54编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示