博客美化汇总

虽然注册博客园满6个月了，但是开始写博客还是最近的事。作为一个新手，自己码代码定制自己的博客似乎显得有点困难，所幸的是博客园有很多优秀的程序员精于此道并乐于分享。我的博客园美化方法和参考资源汇总如下。

1、申请js权限

直接在设置里点击申请，审核较慢且通过率较低。因此可以向contact@cnblogs.com发邮件，简单说明理由，一般很快就能得到回复了。

2、博客皮肤

源码：

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

Penn000-CSS

操作说明：根据“darkgreentrip”模板进行修改，将代码复制到“页面定制CSS代码”，复制后不必禁用模板默认CSS（我是这样，如果遇到问题，试着禁用）。

3、博文导航目录

参考教程：http://www.cnblogs.com/wangqiguo/p/4355032.html

源码：

 1 <script language="javascript" type="text/javascript">
 2 //生成目录索引列表
 3 function GenerateContentList()
 4 {
 5     var jquery_h3_list = $('#cnblogs_post_body h3');//如果你的章节标题不是h3,只需要将这里的h3换掉即可
 6     if(jquery_h3_list.length>0)
 7     {
 8         var content = '<a name="_labelTop"></a>';
 9         content    += '<div id="navCategory">';
10         content    += '<p style="font-size:18px"><b>阅读目录</b></p>';
11         content    += '<ul>';
12         for(var i =0;i<jquery_h3_list.length;i++)
13         {
14             var go_to_top = '<div style="text-align: right"><a href="#_labelTop">回到顶部</a><a name="_label' + i + '"></a></div>';
15             $(jquery_h3_list[i]).before(go_to_top);
16             var li_content = '<li><a href="#_label' + i + '">' + $(jquery_h3_list[i]).text() + '</a></li>';
17             content += li_content;
18         }
19         content    += '</ul>';
20         content    += '</div>';
21         if($('#cnblogs_post_body').length != 0 )
22         {
23             $($('#cnblogs_post_body')[0]).prepend(content);
24         }
25     }    
26 }
27 GenerateContentList();
28 </script>

博文导航目录

操作说明：将上面的代码，粘贴到 “页脚HTML代码” 区保存即可。以上代码应该只会生成一级目录，是我目前使用的样式。多级目录参考教程2。

参考教程2：https://www.cnblogs.com/xuehaoyue/p/6650533.html

源码：

 1 <script language="javascript" type="text/javascript">
 2 // 生成目录索引列表
 3 // ref: http://www.cnblogs.com/wangqiguo/p/4355032.html
 4 // modified by: zzq
 5 function GenerateContentList()
 6 {
 7     var mainContent = $('#cnblogs_post_body');
 8     var h2_list = $('#cnblogs_post_body h2');//如果你的章节标题不是h2,只需要将这里的h2换掉即可
 9 
10     if(mainContent.length < 1)
11         return;
12  
13     if(h2_list.length>0)
14     {
15         var content = '<a name="_labelTop"></a>';
16         content += '<div id="navCategory" style="color:#152e97;">';
17         content += '<p style="font-size:18px;"><b>目录</b></p>';
18         content += '<ul>';
19         for(var i=0; i<h2_list.length; i++)
20         {
21             var go_to_top = '<div style="text-align: right;"><a href="#_labelTop" style="color:#f68a33">回到顶部</a><a name="_label' + i + '"></a></div>';
22             $(h2_list[i]).before(go_to_top);
23             
24             var h3_list = $(h2_list[i]).nextAll("h3");
25             var li3_content = '';
26             for(var j=0; j<h3_list.length; j++)
27             {
28                 var tmp = $(h3_list[j]).prevAll('h2').first();
29                 if(!tmp.is(h2_list[i]))
30                     break;
31                 var li3_anchor = '<a name="_label' + i + '_' + j + '"></a>';
32                 $(h3_list[j]).before(li3_anchor);
33                 li3_content += '<li><a href="#_label' + i + '_' + j + '">' + $(h3_list[j]).text() + '</a></li>';
34             }
35             
36             var li2_content = '';
37             if(li3_content.length > 0)
38                 li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>';
39             else
40                 li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a></li>';
41             content += li2_content;
42         }
43         content += '</ul>';
44         content += '</div><p>&nbsp;</p>';
45         content += '<hr style="height:1px;border:none;border-top:1px dashed #0066CC;"/>';
46         if($('#cnblogs_post_body').length != 0 )
47         {
48             $($('#cnblogs_post_body')[0]).prepend(content);
49         }
50     }   
51 }
52 
53 GenerateContentList();
54 </script>

博文导航目录样式2

操作说明：同上。

4、自动添加底部侧边栏博文目录

参考教程：https://www.cnblogs.com/asxinyu/p/4344153.html

代码文件：marvin.nav.my1502.css、marvin.cnblogs.js、marvin.nav.my1502.WhiteTears.js

1 <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
2 <link href="https://files.cnblogs.com/files/asxinyu/marvin.nav.my1502.css" rel="stylesheet">
3 <script type="text/javascript" src="https://files.cnblogs.com/files/asxinyu/marvin.cnblogs.js"></script>
4 <script type="text/javascript" src="https://files.cnblogs.com/files/asxinyu/marvin.nav.my1502.js"></script>

注意将文件HTML地址写成自己的，基本上将“asxinyu”修改为自己的博客名即可。我遇到的问题是从教程上下载的 marvin.nav.my1502.js 修改上传后会忽略修改（问题定位为博客园会将上传文件与历史上传文件名进行比对，文件名相同，博客园保留历史版本而不会保留更改），于是我将文件名修改为 marvin.nav.my1502.WhiteTears.js 再上传，所以大家可以直接下载我的修改文件。另外有一个问题是在手机上查看博文时若页面放大博文会有大面积遮挡，有一些问题期待改进。

5、版权声明

参考教程：https://www.cnblogs.com/asxinyu/p/4344153.html

代码文件：marvin.cnblogs.js

操作说明：已经包含在上面生成底部侧边栏目录的操作说明中了。

6、评论带头像并支持旋转

参考教程：http://www.cnblogs.com/jackson0714/p/BeautifyBlog_09.html

将以下代码复制到页面定制CSS代码中：

 1 .feedbackCon img:hover {
 2 -webkit-transform: rotateZ(360deg);
 3 -moz-transform: rotateZ(360deg);
 4 -ms-transform: rotateZ(360deg);
 5 -o-transform: rotateZ(360deg);
 6 transform: rotateZ(360deg);
 7 }
 8  
 9 .feedbackCon img {
10 border-radius: 40px;
11 -webkit-transition: all 0.6s ease-out;
12 -moz-transition: all 0.5s ease-out;
13 -ms-transition: all 0.5s ease-out;
14 -o-transition: all 0.5s ease-out;
15 transition: all 0.5s ease-out;
16 }

下载代码文件 Comments.js 并保存上传到自己的博客文件中，在页脚HTML代码中添加引用语句：

<script type="text/javascript" src="https://files.cnblogs.com/files/自己的博客名称/Comments.js"></script>

将以下代码复制到页面定制CSS中:

 1 /*推荐和反对*/
 2 #div_digg {
 3     padding: 10px;
 4     position: fixed;
 5     _position: absolute;
 6     z-index: 1000;
 7     bottom: 20px;
 8     right: 0;
 9     _right: 17px;
10     border: 1px solid #D9DBE1;
11     background-color: #FFFFFF;
12     filter: alpha(Opacity=80);
13     -moz-opacity: 0.8;
14     opacity: 0.8;
15 }
16 
17 .icon_favorite {
18     background: transparent url('https://files.cnblogs.com/files/jackson0714/kj.gif') no-repeat 0 0;
19     padding-left: 16px;
20 }
21 
22 #blog_post_info_block a {
23     text-decoration: none;
24     color: #5B9DCA;
25     padding: 3px;
26 }

8、添加GitHub地址

参考教程：http://www.cnblogs.com/jackson0714/p/BeautifyBlog_05.html

将以下代码复制到页眉HTML中：

1 <a href="https://github.com/Jackson0714" target="_blank">
2 　　<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" >
3 </a>

注意将GitHub地址换成自己的，同样显示图片最好下载下来上传到自己的相册里，当然也可更换。

9、分享按钮

参考教程：http://www.cnblogs.com/jackson0714/p/4829071.html

到分享按钮的设计网站http://www.jiathis.com/ 生成代码，可以自定义生成代码，也可以直接使用默认的代码。将代码复制到页眉HTML：

 1 <!-- 分享 -->
 2 <!-- JiaThis Button BEGIN -->
 3 <script type="text/javascript" >
 4 var jiathis_config={
 5     siteNum:15,
 6     sm:"copy,qzone,tsina,weixin,tqq,tsohu,renren,cqq,tieba,douban,kaixin001,t163,yixin,51,copy",
 7     summary:"",
 8     boldNum:6,
 9     showClose:true,
10     shortUrl:false,
11     hideMore:false
12 }
13 </script>
14 <script type="text/javascript" src="http://v3.jiathis.com/code/jiathis_r.js?btn=r.gif&move=0" charset="utf-8"></script>
15 <!-- JiaThis Button END -->

10、自定义地址栏logo

参考教程：http://www.cnblogs.com/jackson0714/p/BeautifyBlog_04.html

图标获取：在线icon图标制作

制作好的图标，上传到自己的博客文件中。将以下JavaScript代码添加到“页脚Html代码”中：

1 <script type="text/javascript" language="javascript">
2 　　//Setting ico for cnblogs
3 　　var linkObject = document.createElement('link');
4 　　linkObject.rel = "shortcut icon";
5 　　linkObject.href = "icon的网络路径";
6 　　document.getElementsByTagName("head")[0].appendChild(linkObject);
7 </script>

11、QQ交谈

参考教程：http://www.cnblogs.com/jackson0714/p/BeautifyBlog_06.html

将以下html代码添加到“博客侧边栏公告”

1 <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&amp;uin=343716061&amp;site=qq&amp;menu=yes">
2 　　<img align="absmiddle" border="0" src="http://wpa.qq.com/pa?p=2:343716061:41 &amp;r=0.30709030851721764" alt="欢迎与我联系" title="欢迎与我联系">
3 </a>

注意修改为自己的联络QQ号

12、主页头像

将以下代码添加到侧边栏公告代码区：

1 <!-- 添加图片并指向CSDN -->
2 <div align="center">
3 <a href="https://blog.csdn.net/muyun_csdn">
4 <img src="https://pic.cnblogs.com/avatar/1248164/20180404195601.png">
5 </a> 
6 </div>

注意可以使用任意头像并附加任意连接。头像地址获取方式为：【选中图片】-【右键】-【复制图片地址】；链接随意，这里我指向我的CSDN博客主页，可自行修改。

13、访客记录

参考教程：https://www.cnblogs.com/phper12580/p/8034280.html

操作说明：去http://www.amazingcounters.com/sign-up.php网站选择样式并生成代码，复制粘贴至侧边栏公告代码区

14、博客签名

新建博客签名，输入下面的代码。默认签名会出现在每一篇博文的末尾。这里随意即可。

1 <div>作者：<a href="http://www.cnblogs.com/WhiteTears/">白色泪光</a></div>
2 <div>出处：<a target="_blank">http://www.cnblogs.com/WhiteTears/</a></div>

posted @ 2018-04-14 00:54 白色泪光阅读(6366) 评论(7) 编辑收藏举报

刷新页面返回顶部

白色泪光

There are two things I want to know about, the world and you.