部落格園---部落格美化彙總
轉載自：https://www.cnblogs.com/WhiteTears/p/8824544.html
1、申請js許可權
直接在設定裡點選申請，稽核較慢且通過率較低。因此可以向[email protected]發郵件，簡單說明理由，一般很快就能得到回覆了。
2、部落格面板
參考教程：部落格園頁面定製CSS程式碼 - Penn000 - 部落格園
原始碼：
Penn000-CSS
操作說明：根據“darkgreentrip”模板進行修改，將程式碼複製到“頁面定製CSS程式碼”，複製後不必禁用模板預設CSS（我是這樣，如果遇到問題，試著禁用）。
3、博文導航目錄
參考教程：http://www.cnblogs.com/wangqiguo/p/4355032.html
原始碼：
博文導航目錄
操作說明：將上面的程式碼，貼上到 “頁尾HTML程式碼” 區儲存即可。以上程式碼應該只會生成一級目錄，是我目前使用的樣式。多級目錄參考教程2。
參考教程2：https://www.cnblogs.com/xuehaoyue/p/6650533.html
原始碼：
博文導航目錄樣式2
操作說明：同上。
4、自動新增底部側邊欄博文目錄
參考教程：https://www.cnblogs.com/asxinyu/p/4344153.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 再上傳，所以大家可以直接下載我的修改檔案。另外有一個問題是在手機上檢視博文時若頁面放大博文會有大面積遮擋，有一些問題期待改進。
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="http://files.cnblogs.com/files/自己的部落格名稱/Comments.js"></script>
7、推薦與反對炫酷樣式
參考教程：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 }
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&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號
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>