博客园---博客美化汇总

转载自: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

操作说明:同上。

扫描二维码关注公众号,回复: 4397083 查看本文章
 

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

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

代码文件:marvin.nav.my1502.cssmarvin.cnblogs.jsmarvin.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&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>

猜你喜欢

转载自www.cnblogs.com/lishanlei/p/10078397.html