菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

VIP优先接,累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

入驻
2
0

博客园美化笔记

原创
05/13 14:22
阅读数 10872

页面定制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 }
View Code

 - 评论带头像,且支持旋转

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

上传JavaScript文件Comments.js,页脚引入上传的JavaScript文件。

参考:http://www.cnblogs.com/jackson0714/p/BeautifyBlog_09.html

博客侧边栏公告(支持HTML代码)(支持JS代码):

 - 添加公告栏显示个性化时间

1 <div id="myTime"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="160" height="70" id="honehoneclock" align="center">
2 <param name="allowScriptAccess" value="always" />
3 <param name="movie" value="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.swf" />
4 <param name="quality" value="high" />
5 <param name="bgcolor" value="#ffffff" />
6 <param name="wmode" value="transparent" /><embed wmode="transparent" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.swf" quality="high" bgcolor="#ffffff" width="160" height="70" name="honehoneclock" align="center" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></object></div>
View Code

- 加微博关注

1 <!--微博关注-->
2 <html xmlns:wb="http://open.weibo.com/wb">
3 <script src="http://tjs.sjs.sinajs.cn/open/api/js/wb.js" type="text/javascript" charset="utf-8"></script>
4 <wb:follow-button uid="2991975565" type="red_1" width="67" height="24" ></wb:follow-button>
View Code

 页首Html代码:

 - 添加GitHub链接

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/wonux/974364/o_o_github.png" >
3 </a>
View Code

- 添加打赏按钮

 1 <!--打赏 Start-->
 2  <script>
 3     window.tctipConfig = {
 4             staticPrefix: "http://static.tctip.com",
 5             buttonImageId: 1,
 6             buttonTip:    "dashang",
 7             list:{
 8                 alipay: { qrimg: "http://images.cnblogs.com/cnblogs_com/wonux/974364/o_a6x051911ixvfyb0uq0u0fe.png"},
 9                 weixin: { qrimg: "http://images.cnblogs.com/cnblogs_com/wonux/974364/o_snipaste20170328_113315.png"},
10             }
11         };
12 </script>
13  <script src="http://static.tctip.com/js/tctip.min.js" />
14 <!--打赏 End-->
View Code

参考:http://www.cnblogs.com/jackson0714/p/BeautifyBlog_07.html

页脚Html代码:

- 生成三级目录

 1 <script language="javascript" type="text/javascript">
 2 //生成目录索引列表
 3 function GenerateContentList()
 4 {
 5     var jquery_h1_list = $('#cnblogs_post_body h1');
 6     if (jquery_h1_list.length == 0) { return; }
 7     if ($('#cnblogs_post_body').length == 0) { return; }
 8 
 9     var content = '<a name="_labelTop"></a>';
10     content    += '<div id="navCategory">';
11     content    += '<p style="font-size:18px"><b>阅读目录(Content)</b></p>';
12     // 一级目录 start
13     content += '<ul class="first_class_ul">';
14 
15     for (var i = 0; i < jquery_h1_list.length; i++)
16     {
17         var go_to_top = '<div style="text-align: right"><a href="#_labelTop">回到顶部(go to top)</a><a name="_label' + i + '"></a></div>';
18         $(jquery_h1_list[i]).before(go_to_top);
19 
20         // 一级目录的一条
21         var li_content = '<li><a href="#_label' + i + '">' + $(jquery_h1_list[i]).text() + '</a></li>';
22 
23         var nextH1Index = i + 1;
24         if (nextH1Index == jquery_h1_list.length) { nextH1Index = 0; }
25         var jquery_h2_list = $(jquery_h1_list[i]).nextUntil(jquery_h1_list[nextH1Index], "h2");
26         // 二级目录 start
27         if (jquery_h2_list.length > 0)
28         {
29             //li_content +='<ul style="list-style-type:none; text-align: left; margin:2px 2px;">';
30             li_content += '<ul class="second_class_ul">';
31         }
32         for (var j = 0; j < jquery_h2_list.length; j++)
33         {
34             var go_to_top2 = '<div style="text-align: right"><a name="_lab2_'+ i + '_' + j + '"></a></div>';
35             $(jquery_h2_list[j]).before(go_to_top2);
36             // 二级目录的一条
37             li_content +='<li><a href="#_lab2_'+ i +'_' + j + '">' + $(jquery_h2_list[j]).text() + '</a></li>';
38 
39             var nextH2Index = j + 1;
40             var next;
41             if (nextH2Index == jquery_h2_list.length) 
42             {
43                 if (i + 1 == jquery_h1_list.length)
44                 {
45                     next = jquery_h1_list[0];
46                 }
47                 else
48                 {
49                     next = jquery_h1_list[i + 1];
50                 }
51             }
52             else
53             {
54                 next = jquery_h2_list[nextH2Index];
55             }
56             var jquery_h3_list = $(jquery_h2_list[j]).nextUntil(next, "h3");
57             // 三级目录 start
58             if (jquery_h3_list.length > 0)
59             {
60                 li_content += '<ul class="third_class_ul">';
61             }
62             
63             for (var k = 0; k < jquery_h3_list.length; k++)
64             {
65                 var go_to_third_Content = '<div style="text-align: right"><a name="_label3_' + i + '_' + j + '_' + k + '"></a></div>';
66                 $(jquery_h3_list[k]).before(go_to_third_Content);
67                 // 三级目录的一条
68                 li_content += '<li><a href="#_label3_' + i + '_' + j + '_' + k + '">' + $(jquery_h3_list[k]).text() + '</a></li>';
69             }
70             
71             if (jquery_h3_list.length > 0)
72             {
73                 li_content += '</ul>';
74             }
75             li_content += '</li>';
76             // 三级目录 end
77         }
78         if (jquery_h2_list.length > 0)
79         {
80             li_content +='</ul>';
81         }
82         li_content +='</li>';
83         // 二级目录 end
84 
85         content += li_content;
86     }
87     // 一级目录 end
88     content += '</ul>';
89     content += '</div>';
90 
91     $($('#cnblogs_post_body')[0]).prepend(content);
92 }
93 
94 GenerateContentList();
95 </script>
96 levels of contents
View Code

- 生成一级目录

 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

参考:http://www.cnblogs.com/chinas/p/6088341.html

- 给文章添加索引目录(CSDN样式)

 1 <div class="fixedIndexs" style="position: fixed;bottom: 40px;display: none"></div>
 2 <script language="javascript" type="text/javascript">
 3     var fixedIndexs=$('.fixedIndexs');
 4     var hs = $('#cnblogs_post_body h3');
 5     function openorclose(a) {
 6         $("#indexs").slideToggle("fast");
 7         var text=$(a).text();
 8         if(text=='[-]'){
 9             $(a).text("[+]");
10             return;
11         }
12         $(a).text("[-]");
13     }
14     function createIndexs(){
15         var indexs_container=$('<div style="border:solid 1px #ccc; background:#eee;width:180px;padding:4px 10px;"></div>');
16         var indexs_controller=$('<p style="text-align:right;margin:0;"><span style="float:left;">目录<a onclick="javascript:openorclose(this);" style="cursor: pointer">[-]</a></span><a href="#top" style="text-align: right;color: #444">返回顶部</a></p>');
17         var indexs=$('<ol id="indexs" style="margin-left: 14px; padding-left: 14px; line-height: 160%; display: block;"></ol>');
18         indexs_container.append(indexs_controller).append(indexs);
19         $.each(hs,function(i,h){
20             $(h).before('<a name="index_'+i+'"></a>');
21             indexs.append('<li style="list-style:decimal"><a href="#index_'+i+'" id="active_'+i+'">'+$(h).text()+'</a></li>');
22         });
23         if(hs.length!=0){
24             fixedIndexs.append(indexs_container);
25             //get home div right offset
26             fixedIndexs.css('right',$("#home").offset().left+32+'px');
27         }
28     }
29     createIndexs();
30     $(window).scroll(function(event){
31         //clear all active
32         $("#indexs li a").removeClass("active");
33         //set active
34         $.each(hs,function (i, h) {
35             var next_active_top;
36             i<(hs.length-1)?next_active_top=hs.eq(i+1).offset().top:hs.last().offset().top;
37             if($(h).offset().top<$(window).scrollTop()+30&&$(window).scrollTop()+30<next_active_top){
38                 $("#active_"+i).addClass("active");
39             }
40             if(i+1==hs.length&&$(window).scrollTop()+30>hs.last().offset().top){
41                 $("#active_"+i).addClass("active");
42             }
43         });
44         //auto display
45         if($(window).scrollTop()>$(window).height()){
46             fixedIndexs.show();
47             return;
48         }
49         fixedIndexs.hide();
50     });
51     $(window).resize(function (event) {
52         fixedIndexs.hide();
53         fixedIndexs.css('right',$("#home").offset().left+32+'px');
54         if($(window).scrollTop()>$(window).height()){
55             fixedIndexs.show();
56         }
57     })
58 </script>
View Code

参考:http://www.cnblogs.com/sakuraph/p/5814060.html#top

- 博文自动添加目录(Wiznote样式)

1 <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
2 <link href="http://files.cnblogs.com/files/wonux/Wiz_marvin.nav.css" rel="stylesheet">
3 <script type="text/javascript" src="http://files.cnblogs.com/files/wonux/Wiz_marvin.nav.js"></script>
View Code

 参考:http://www.cnblogs.com/asxinyu/p/Bolg_Category_AddArticleCategory_6.html

发表评论

0/200
2 点赞
0 评论
收藏