博客美化彙總
雖然註冊博客園滿6個月了，可是開始寫博客仍是最近的事。做爲一個新手，本身碼代碼定製本身的博客彷佛顯得有點困難，所幸的是博客園有不少優秀的程序員精於此道並樂於分享。個人博客園美化方法和參考資源彙總以下。javascript
一、申請js權限
直接在設置裏點擊申請，審覈較慢且經過率較低。所以能夠向contact@cnblogs.com發郵件，簡單說明理由，通常很快就能獲得回覆了。php
二、博客皮膚
參考教程：博客園頁面定製CSS代碼 - Penn000 - 博客園css
源碼：html
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 }
操做說明：根據「darkgreentrip」模板進行修改，將代碼複製到「頁面定製CSS代碼」，複製後沒必要禁用模板默認CSS（我是這樣，若是遇到問題，試着禁用）。java
三、博文導航目錄
參考教程：http://www.cnblogs.com/wangqiguo/p/4355032.htmljquery
源碼：git
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：http://www.javashuo.com/article/p-nmvgkfya-da.htmlgithub
源碼：web
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> </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>
操做說明：同上。
四、自動添加底部側邊欄博文目錄
參考教程：http://www.javashuo.com/article/p-stmgmbpi-dw.html
代碼文件：marvin.nav.my1502.css、marvin.cnblogs.js、marvin.nav.my1502.WhiteTears.js
操做說明：第一個文件爲樣式、第二個文件事實上不是博文目錄代碼文件，而是後面的版權聲明（可不要），第三個文件爲生成目錄的函數實現。使用的時候將這三個文件下載下來，下載方法爲【右鍵】-【另存爲】-【保存】，文件名默認便可。而後進入博客，選擇【管理】-【文件】-【上傳文件】，將三個文件上傳自本身的博客，記錄文件地址。而後將如下代碼複製到「頁腳HTML代碼」欄：
1 <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
2 <link href="http://files.cnblogs.com/files/asxinyu/marvin.nav.my1502.css" rel="stylesheet">
3 <script type="text/javascript" src="http://files.cnblogs.com/files/asxinyu/marvin.cnblogs.js"></script>
4 <script type="text/javascript" src="http://files.cnblogs.com/files/asxinyu/marvin.nav.my1502.js"></script>
注意將文件HTML地址寫成本身的，基本上將「asxinyu」修改成本身的博客名便可。我遇到的問題是從教程上下載的 marvin.nav.my1502.js 修改上傳後會忽略修改（問題定位爲博客園會將上傳文件與歷史上傳文件名進行比對，文件名相同，博客園保留歷史版本而不會保留更改），因而我將文件名修改成 marvin.nav.my1502.WhiteTears.js 再上傳，因此你們能夠直接下載個人修改文件。另外有一個問題是在手機上查看博文時若頁面放大博文會有大面積遮擋，有一些問題期待改進。
五、版權聲明
參考教程：http://www.javashuo.com/article/p-stmgmbpi-dw.html
代碼文件：marvin.cnblogs.js
操做說明：已經包含在上面生成底部側邊欄目錄的操做說明中了。
六、評論帶頭像並支持旋轉
參考教程：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="http://files.cnblogs.com/files/本身的博客名稱/Comments.js"></script>
七、推薦與反對炫酷樣式
參考教程：http://www.cnblogs.com/jackson0714/p/4833669.html
將如下代碼複製到頁面定製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('http://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 }
八、添加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地址換成本身的，一樣顯示圖片最好下載下來上傳到本身的相冊裏，固然也可更換。
九、分享按鈕
參考教程：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 -->
十、自定義地址欄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>
十一、QQ交談
參考教程：http://www.cnblogs.com/jackson0714/p/BeautifyBlog_06.html
將如下html代碼添加到「博客側邊欄公告」
1 <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=343716061&site=qq&menu=yes">
2 <img align="absmiddle" border="0" src="http://wpa.qq.com/pa?p=2:343716061:41 &r=0.30709030851721764" alt="歡迎與我聯繫" title="歡迎與我聯繫">
3 </a>
注意修改成本身的聯絡QQ號
十二、主頁頭像
將如下代碼添加到側邊欄公告代碼區：
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博客主頁，可自行修改。
1三、訪客記錄
參考教程：http://www.javashuo.com/article/p-mlbwdpvp-cx.html
操做說明：去http://www.amazingcounters.com/sign-up.php網站選擇樣式並生成代碼，複製粘貼至側邊欄公告代碼區
1四、博客簽名
新建博客簽名，輸入下面的代碼。默認簽名會出如今每一篇博文的末尾。這裏隨意便可。
1 <div>做者：<a href="http://www.cnblogs.com/WhiteTears/">白色淚光</a></div>
2 <div>出處：<a target="_blank">http://www.cnblogs.com/WhiteTears/</a></div>
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 博客彙總
- 2. Phylab 博客彙總
- 3. 博客美化篇
- 4. 博客園美化
- 5. 美化博客園
- 6. 博客美化總結（持續更新）
- 7. Hexo博客之博客美化
- 8. 博客園美化之博客背景美化
- 9. Java博客大彙總
- 10. 衝刺博客彙總