转载自：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-calendar99 {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.html4 // modified by: zzq5 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.css、marvin.cnblogs.js、marvin.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>

转载于:https://www.cnblogs.com/lishanlei/p/10078397.html

博客园---博客美化汇总相关推荐

  1. 前端小白也能快速学会的博客园博客美化全攻略

    前端小白也能快速学会的博客园博客美化全攻略 A呦V,博客园er的自我修养是什么?第一条,别只顾收藏和偷师呀,记得点"推荐"或关注本人喔~ 美化方法论简介 一般而言,需要选一个默认的 ...

  2. 前端小白也能快速学会的博客园博客美化全攻略[附源码]

    前端小白也能快速学会的博客园博客美化全攻略[附源码] 文章目录 前端小白也能快速学会的博客园博客美化全攻略[附源码] 美化方法论简介 准备工作 js权限申请 如何模仿一个博客园的自定义风格(样式css ...

  3. 博客园博客账号意外被封怎么办？

    今天我们就谈谈博客园博客账号意外被封如何申请解封,希望对新手有些帮助,事情是这样的,早上的时候我上了一下自己的博客园博客账号发现:咦!乍回事啊,怎么登不上去了呢? ================== ...

  4. python爬虫入门教程-Python爬虫入门教程——爬取自己的博客园博客

    互联网时代里,网络爬虫是一种高效地信息采集利器,可以快速准确地获取网上的各种数据资源.本文使用Python库requests.Beautiful Soup爬取博客园博客的相关信息,利用txt文件转存. ...

  5. 博客园博客PDF生成器

    周末写了一个博客园博客PDF生成器,由于博客园文件上传大小的限制,我把源代码放在CSDN上了(想信大家都有帐号哈),如果没有帐号的请留下邮箱,我会尽快发给你,当然如果哪位朋友能帮忙把源代码上传到博客园 ...

  6. 无忧开通了博客园博客主页

    无忧开通了博客园博客主页,今后在这里安家了. 分享一点工作经验和学习心得,有事没事常来看看.另一个独立博客www.wuyouseo.com 转载于:https://www.cnblogs.com/wu ...

  7. 博客园博客开通了，庆贺一下

    博客园博客开通了,庆贺一下 还是觉得博客园里面的技术气氛比较浓一些 转载于:https://www.cnblogs.com/binghe021/archive/2011/02/14/1954370.h ...

  8. python爬虫教程-Python爬虫入门教程——爬取自己的博客园博客

    互联网时代里,网络爬虫是一种高效地信息采集利器,可以快速准确地获取网上的各种数据资源.本文使用Python库requests.Beautiful Soup爬取博客园博客的相关信息,利用txt文件转存. ...

  9. 我的博客园博客开通了

    我的博客园博客开通了 发文做个记录庆祝下  https://www.cnblogs.com/akweb/

  10. 『Python开发实战菜鸟教程』实战篇：爬虫快速入门——统计分析CSDN与博客园博客阅读数据

    文章目录 0x01:引子 首先介绍一下网络爬虫是什么,可以用来做什么? 这里简单探讨一下网络爬虫的合法性 正式进入爬虫实战前,需要我们了解下网页结构 HTML CSS JScript 写一个简单的 H ...

最新文章

  1. nRF51800 蓝牙学习 进程记录 2：关于二维数组 执念执战
  2. python学习 01 变量
  3. 前天在一直Linux根文件系统时提示WARNING: Unable to open an in...
  4. 浅谈C#中的多态及相关知识(主要内容来自msdn) －转载(benzite)
  5. oracle sql字符拆分字符串函数,oracle-是否有在PL / SQL中拆分字符串的功能？
  6. HBase timestamp（version）
  7. Android WebRTC视频旋转问题
  8. boost::local_time模块custom_time_zone 和 posix_time_zone 的简单示例
  9. jdbc 链接不了mysql_JDBC链接Mysql失败
  10. express 4.x 获取post提交的数据
  11. vue的父子组件属性绑定传值
  12. arcgis 只能查看指定行政区域_用ArcGIS来实现坐标转换操作，以及相关的使用心得...
  13. 计算机老出现无法响应,我的电脑老是会未响应_电脑软件总是未响应
  14. centos7.9编译安装构建系统gn+ninja
  15. Asp代码转换java代码器_asp下实现对HTML代码进行转换的函数
  16. 微信WeChat多开
  17. HDMI-CEC功能之System Audio Control
  18. 【你好，windows】Win10 x64 1709 X64企业G纯净版2019.7.28
  19. uni-app服务器端搭建
  20. 关于电子科技大学宿舍安装热水的调查

热门文章

  1. 鸿蒙os编码_如何看待鸿蒙OS代码示例?
  2. 为什么招聘高级前端开发这么难？
  3. 【C语言】在线OJ题 BC7-BC52-牛客网编程初学者入门训练
  4. 计算机文化课每个人都要学吗,计算机文化基础课程
  5. mysql applicationcontext.xml_配置applicationcontext.xml文件
  6. java通信rs485_基于VB6.0与485仪表的Modbus RTU通信（含代码）
  7. flowlayout布局怎么换行_web前端学习怎么入门
  8. springboot整个缓存_Github点赞接近100k的SpringBoot学习教程+实战推荐！牛批！
  9. Pytorch:PIL 和CV
  10. Qt官网变更【2012】