博客园页面美化

博客园页面美化步骤

    参考了很多大贤的博客，总结尝试后，随笔记录。原帖网址如下：

静默虚空：https://www.cnblogs.com/jingmoxukong/p/7826982.html

Penn000：https://www.cnblogs.com/Penn000/p/6947472.html

温一壶月光：https://www.cnblogs.com/Tangent-1231/p/10393759.html

Trainoo：https://www.cnblogs.com/Trainoo/p/8045340.html

---

    首先，模板要选择darkgreentrip，在此基础上进行修改。

一、页面CSS代码

    将以下代码复制粘贴到页面css代码栏中，具体参数按照要求自行调节，以rgba（255,0,0,0.5）为例，255,0,0表示红色，0.5表示透明度。可使用颜色在线转换器将颜色的16进制转换为rgba格式。

  1 #home {
  2     margin: 0 auto;/*元素外边距*/
  3     width: 80%;/*原始65*/
  4     min-width: 980px;/*页面顶部的宽度*/
  5     background-color: rgba(245, 245, 245, 0.5);/*页面背板颜色，建议如果有背景图片的话，透明度高一些，不会遮挡*/
  6     padding: 30px;
  7     margin-top: 50px;
  8     margin-bottom: 50px;
  9     box-shadow: 0 2px 6px rgba(255,0,0,0.5);/*背板边缘光晕*/
 10 }
 11 body {
 12     background:rgba(154,252,0,0.1);/*网页背景颜色*/
 13     background-position: 50% 5%; 
 14     background-size: cover;
 15 }
 16 #blogTitle {
 17     height: 90px;
 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(255,0,0,0.5);/*主页面大标题框颜色*/
 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 .newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory, 
 96 .catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView, 
 97 .catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory ,#blog-calendar
 98 {
 99     background: rgba(255, 255, 255, 0.5);/*侧边栏小背板颜色*/
100     margin-bottom: 35px;
101     word-wrap: break-word;
102 }
103 
104 .CalTitle{
105     background:  rgba(255, 255, 255, 0.5);/*日历栏标题栏颜色*/
106 }
107 .catListTitle{
108     background-color: rgba(255,0,0,0.5);/*侧边栏标题框颜色*/
109 }
110 
111 #topics{
112     background: rgba(255, 255, 255, 0.5);
113 }
114 
115 .c_ad_block{
116     display: none;
117 }
118 
119 #tbCommentBody{
120     width: 100%;
121     height: 200px;
122     background: rgba(255, 255, 255, 0.5);
123 }
124 
125 #q{background: rgba(255, 255, 255, 0);}
126 
127 .CalNextPrev{background: rgba(255, 255, 255, 0);}
128 
129 .cnblogs_code{
130     background: rgba(255, 255, 255, 0);
131 }
132 
133 .cnblogs_code div{
134     background: rgba(255, 255, 255, 0); 
135 }
136 
137 .cnblogs_code_toolbar{
138     background: rgba(255, 255, 255, 0); 
139 }
140 #main{min-width: 640px;}
141 .entrylist{
142     background: rgba(255, 255, 255, 0.5); 
143 }

页面css代码，点击+号打开折叠

二、博客侧边栏设置（先申请js权限，半天完事）

    1.添加右下角的返回顶部图标（小火箭），可更改12行的图片链接修改图标样式：

 1 <style>
 2 #back-top {
 3      position: fixed;
 4      bottom: 10px;
 5      right: 5px;
 6      z-index: 99;
 7 }
 8 #back-top span {
 9      width: 50px;
10      height: 64px;
11      display: block;
12      background:url(http://images.cnblogs.com/cnblogs_com/seanshao/855033/o_rocket.png) no-repeat center center;
13 }
14 #back-top a{outline:none}
15 </style>
16 <script type="text/javascript">
17 $(function() {
18     // hide #back-top first
19     $("#back-top").hide();
20     // fade in #back-top
21     $(window).scroll(function() {
22         if ($(this).scrollTop() > 500) {
23             $('#back-top').fadeIn();
24         } else {
25             $('#back-top').fadeOut();
26         }
27     });
28     // scroll body to 0px on click
29     $('#back-top a').click(function() {
30         $('body,html').animate({
31             scrollTop: 0
32         }, 800);
33         return false;
34     });
35 });

小火箭代码，点击+号打开折叠

    2.添加侧边栏头像，第三行的图片链接换成自己的：

1 </script>
2 <p id="back-top" style="display:none"><a href="#top"><span></span></a></p>
3 <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2178320981,2144335976&fm=26&gp=0.jpg" alt="Penn000" class="img_avatar" width="210px" height="210px" style="border-radius:10%">

添加头像代码，点击+号打开折叠

    3.添加公告栏时钟控件特效:

1 <embed wmode="transparent" src="https://files.cnblogs.com/files/jingmoxukong/honehone_clock_tr.swf" quality="high" bgcolor="#FDF6E3" width="230" height="110" name="honehoneclock" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">

三、页脚HTML代码

    1.页面背景特效，线条随鼠标移动：

 1 <script>
 2 !function(){
 3  function n(n,e,t){
 4  return n.getAttribute(e)||t
 5  }
 6  function e(n){
 7  return document.getElementsByTagName(n)
 8  }
 9  function t(){
10  var t=e("script"),o=t.length,i=t[o-1];
11  return{
12  l:o,z:n(i,"zIndex",-1),o:n(i,"opacity",.5),c:n(i,"color","0,0,0"),n:n(i,"count",99)
13  }
14  }
15  function o(){
16  a=m.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,
17  c=m.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight
18  }
19  function i(){
20  r.clearRect(0,0,a,c);
21  var n,e,t,o,m,l;
22  s.forEach(function(i,x){
23  for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>a||i.x<0?-1:1,i.ya*=i.y>c||i.y<0?-1:1,r.fillRect(i.x-.5,i.y-.5,1,1),e=x+1;e<u.length;e++)n=u[e],
24  null!==n.x&&null!==n.y&&(o=i.x-n.x,m=i.y-n.y,
25  l=o*o+m*m,l<n.max&&(n===y&&l>=n.max/2&&(i.x-=.03*o,i.y-=.03*m),
26  t=(n.max-l)/n.max,r.beginPath(),r.lineWidth=t/2,r.strokeStyle="rgba("+d.c+","+(t+.2)+")",r.moveTo(i.x,i.y),r.lineTo(n.x,n.y),r.stroke()))
27  }),
28  x(i)
29  }
30  var a,c,u,m=document.createElement("canvas"),
31  d=t(),l="c_n"+d.l,r=m.getContext("2d"),
32 x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||
33  function(n){
34  window.setTimeout(n,1e3/45)
35  },
36  w=Math.random,y={x:null,y:null,max:2e4};m.id=l,m.style.cssText="position:fixed;top:0;left:0;z-index:"+d.z+";opacity:"+d.o,e("body")[0].appendChild(m),o(),window.οnresize=o,
37  window.οnmοusemοve=function(n){
38  n=n||window.event,y.x=n.clientX,y.y=n.clientY
39  },
40  window.οnmοuseοut=function(){
41  y.x=null,y.y=null
42  };
43  for(var s=[],f=0;d.n>f;f++){
44  var h=w()*a,g=w()*c,v=2*w()-1,p=2*w()-1;s.push({x:h,y:g,xa:v,ya:p,max:6e3})
45  }
46  u=s.concat([y]),
47  setTimeout(function(){i()},100)
48  }();
49  </script>

线条随鼠标移动，点击+号打开折叠

    2.反对和推荐特效：

 1 <script>
 2 $(function(){
 3     changeIndReadCommentStyle();
 4     //changeCatReadCommentStyle();
 5 
 6     //返回顶部
 7     $('#back-to-top').click(function(e){ $('html,body').animate({scrollTop:0}, 500) });
 8 
 9     //滑稽~
10     $('#ad_t2').remove();
11     $('#under_post_news').remove();
12     $('#under_post_kb').remove();
13     $('.c_ad_block').remove();
14     $('.c_ad_block').remove();
15     $('#blog-calendar').remove();
16     $('#sidebar_search').remove();
17     $('title').html($('title').html())
18 });
19 // 修改首页 阅读、评论样式
20 function changeIndReadCommentStyle(){    
21     var count = $('.postDesc').length;
22     var pattern = new RegExp("阅读(.*?)<a");
23     for (var i=0; i < count; i++){
24         var html = "";
25         var txt = pattern.exec($('.postDesc').eq(i).html());
26         html += "<span class=\"glyphicon glyphicon-eye-open\"></span>";
27         html += "  " + txt;
28         $('.postDesc').eq(i).html(html);
29     }
30 }
31 // 修改分类页 阅读、评论样式
32 function changeCatReadCommentStyle(){    
33     var count = $('.entrylistItemPostDesc').length;
34     var pattern1 = new RegExp("阅读(.*?)");
35     for (var i=0; i < count; i++){
36         var html = "";
37         var txt = pattern1.exec($('.entrylistItemPostDesc').eq(i).html());
38         html += "<span class=\"glyphicon glyphicon-eye-open\"></span>";
39         html += "  " + txt + "<\/a>";
40         $('.entrylistItemPostDesc').eq(i).html(html);
41     }
42 }
43 </script>

推荐和反对按钮，点击+号打开折叠

   

    先写这么多，再行补充！

转载于:https://www.cnblogs.com/menxin-/p/11154509.html