页面定制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 }
- 评论带头像，且支持旋转
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 }
上传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>
- 加微博关注
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>
页首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>
- 添加打赏按钮
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-->
参考：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
- 生成一级目录
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>
参考：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;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>
参考：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>
参考：http://www.cnblogs.com/asxinyu/p/Bolg_Category_AddArticleCategory_6.html