博客園---博客美化匯總


轉載自:https://www.cnblogs.com/WhiteTears/p/8824544.html

 

1、申請js權限

直接在設置里點擊申請,審核較慢且通過率較低。因此可以向contact@cnblogs.com發郵件,簡單說明理由,一般很快就能得到回復了。

 

2、博客皮膚

參考教程:博客園頁面定制CSS代碼 - Penn000 - 博客園

源碼:

  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 }
View Code

操作說明:根據“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>
View Code

操作說明:將上面的代碼,粘貼到 “頁腳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>
View Code

操作說明:同上。

 

4、自動添加底部側邊欄博文目錄

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

代碼文件:marvin.nav.my1502.cssmarvin.cnblogs.jsmarvin.nav.my1502.WhiteTears.js

操作說明:第一個文件為樣式、第二個文件事實上不是博文目錄代碼文件,而是后面的版權聲明(可不要),第三個文件為生成目錄的函數實現。使用的時候將這三個文件下載下來,下載方法為【右鍵】-【另存為】-【保存】,文件名默認即可。然后進入博客,選擇【管理】-【文件】-【上傳文件】,將三個文件上傳自自己的博客,記錄文件地址。然后將以下代碼復制到“頁腳HTML代碼”欄:

<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="http://files.cnblogs.com/files/asxinyu/marvin.nav.my1502.css" rel="stylesheet">
<script type="text/javascript" src="http://files.cnblogs.com/files/asxinyu/marvin.cnblogs.js"></script>
<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&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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM