首页 > 代码库 > 博客园美化笔记
博客园美化笔记
页面定制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 // 一级目录 start13 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="http://www.mamicode.com/#_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="http://www.mamicode.com/#_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 // 二级目录 start27 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="http://www.mamicode.com/#_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 else48 {49 next = jquery_h1_list[i + 1];50 }51 }52 else53 {54 next = jquery_h2_list[nextH2Index];55 }56 var jquery_h3_list = $(jquery_h2_list[j]).nextUntil(next, "h3");57 // 三级目录 start58 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="http://www.mamicode.com/#_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 // 三级目录 end77 }78 if (jquery_h2_list.length > 0)79 {80 li_content +=‘</ul>‘;81 }82 li_content +=‘</li>‘;83 // 二级目录 end84 85 content += li_content;86 }87 // 一级目录 end88 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="http://www.mamicode.com/#_labelTop">回到顶部</a><a name="_label‘ + i + ‘"></a></div>‘;15 $(jquery_h3_list[i]).before(go_to_top);16 var li_content = ‘<li><a href="http://www.mamicode.com/#_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;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="http://www.mamicode.com/#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="http://www.mamicode.com/#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 offset26 fixedIndexs.css(‘right‘,$("#home").offset().left+32+‘px‘);27 }28 }29 createIndexs();30 $(window).scroll(function(event){31 //clear all active32 $("#indexs li a").removeClass("active");33 //set active34 $.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 display45 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
博客园美化笔记
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。