AI专业者开发社区 1 号成员
  •  0 回帖  •  8 浏览  •  4 个月前
   

博客园更改主题css样式js特效

阅读目录

 

一. 申请 js 权限

 

1.进入博客园设置

 

2.进入博客设置

 

3.下拉, 找到, 博客侧边栏公告, 有个申请 j 权限

上图为申请后样式.

注意: 此权限仅对部分老用户开放, 我本人申请了四次才通过, 注册时间段的人多申请几次

 

二. 更换官方主题

修改设置里可以修改官方提供的多种主题, 可根据自己爱好挑选

 

三. 自定义样式

将代码复制到对应栏, 网上有各种牛人设计的样式, 可以搜搜, 我这里也是一个搬运工

 

在下面每个代码栏都贴上了一个小功能作为演示:

回到顶部

1. 页面定制 css 样式

 

  1. !-- 此处自定义标题背景色 -->
  2. #cnblogs_post_body h1 {
  3.     background: #265B8A;
  4.     border-radius: 6px 6px 6px 6px;
  5.     color: #FFFFFF;
  6.     font-family: FZShuTi；
  7.     font-size: 23px;
  8.     font-weight: bold;
  9.     height: 25px;
  10.     line-height: 25px;
  11.     margin: 18px 0 !important;
  12.     padding: 12px 0 8px 5px;
  13.     text-shadow: 2px 2px 3px #222222;
  14.     text-align:center;
  15.     margin-bottom: 20px;
  16. }
  17. #cnblogs_post_body h2 {
  18. background-color: #008FC6;
  19.     border-radius: 3px;
  20.     text-align:center;
  21.     color: white;
  22.     text-shadow: 1px 1px 2px #222222;
  23.     padding-left: 15px;
  24.     margin-bottom: 12px;
  25. }
  26. #cnblogs_post_body h3 {
  27. background-color: #51C332;
  28.     border-radius: 3px;
  29.     text-align:center;
  30.     color: white;
  31.     text-shadow: 1px 1px 2px #222222;
  32.     padding: 5px 15px;
  33.     margin-bottom: 10px;
  34.     width:50%
  35. }
  36. #cnblogs_post_body h4 {
  37.     background-color: #5bc0de;
  38.     border-radius: 3px;
  39.     text-align:center;
  40.     color: white;
  41.     text-shadow: 1px 1px 2px #222222;
  42.     padding: 5px 15px;
  43.     margin-bottom: 10px;
  44.     width:25%
  45. }
  46. code {
  47.     padding: 1px 3px;
  48.     margin: 0 3px;
  49.     background: #ddd;
  50.     border: 1px solid #ccc;
  51.     font-family: Menlo,Monaco,Andale Mono,lucida console,Courier New,monospace;
  52.     word-wrap: break-word;
  53.     font-size: 14px;
  54. }
  55. #cnblogs_post_body table {
  56.     text-align: center;
  57.     width: 100%;
  58.     border: 1px solid #dedede;
  59.     margin: 15px 0;
  60.     border-collapse: collapse;
  61. }
  62. #cnblogs_post_body table thead tr {
  63.     background: #f8f8f8;
  64. }
  65. #cnblogs_post_body table tbody tr:hover {
  66.     background: #efefef;
  67. }
  69. h1 a:visited, 
  70. h1 a:link {  
  71. color : green;  
  72. } 
  73. #top   
  74. {  
  75. color : red;  
  76. }
这里贴上了更改标题的代码

 

回到顶部

2. 博客侧边栏公告

 

 

  1. !-- 爱心特效 -->
  2. <script type="text/javascript">
  4. (function(window,document,undefined){
  5.         var hearts = [];
  6.         window.requestAnimationFrame = (function(){
  7.                 return window.requestAnimationFrame || 
  8.                            window.webkitRequestAnimationFrame ||
  9.                            window.mozRequestAnimationFrame ||
  10.                            window.oRequestAnimationFrame ||
  11.                            window.msRequestAnimationFrame ||
  12.                            function (callback){
  13.                                    setTimeout(callback,1000/60);
  14.                            }
  15.         })();
  16.         init();
  17.         function init(){
  18.                 css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
  19.                 attachEvent();
  20.                 gameloop();
  21.         }
  22.         function gameloop(){
  23.                 for(var i=0;i<hearts.length;i++){
  24.                     if(hearts[i].alpha <=0){
  25.                             document.body.removeChild(hearts[i].el);
  26.                             hearts.splice(i,1);
  27.                             continue;
  28.                     }
  29.                     hearts[i].y--;
  30.                     hearts[i].scale += 0.004;
  31.                     hearts[i].alpha -= 0.013;
  32.                     hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+")rotate(45deg);background:"+hearts[i].color;
  33.             }
  34.             requestAnimationFrame(gameloop);
  35.         }
  36.         function attachEvent(){
  37.                 var old = typeof window.onclick==="function" && window.onclick;
  38.                 window.onclick = function(event){
  39.                         old && old();
  40.                         createHeart(event);
  41.                 }
  42.         }
  43.         function createHeart(event){
  44.             var d = document.createElement("div");
  45.             d.className = "heart";
  46.             hearts.push({
  47.                     el : d,
  48.                     x : event.clientX - 5,
  49.                     y : event.clientY - 5,
  50.                     scale : 1,
  51.                     alpha : 1,
  52.                     color : randomColor()
  53.             });
  54.             document.body.appendChild(d);
  55.     }
  56.     function css(css){
  57.             var style = document.createElement("style");
  58.                 style.type="text/css";
  59.                 try{
  60.                     style.appendChild(document.createTextNode(css));
  61.                 }catch(ex){
  62.                     style.styleSheet.cssText = css;
  63.                 }
  64.                 document.getElementsByTagName('head')[0].appendChild(style);
  65.     }
  66.         function randomColor(){
  67.                 return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";
  68.         }
  69. })(window,document);
  72. </script>
这里贴一个点击出爱心的特效

回到顶部

3. 页首 Html 代码

  1. <canvasid="c_n9"width="1920"height="990"style="position: fixed; top: 0px; left: 0px; z-index: -1; opacity: 0.5;"></canvas>
  2.  
  3. <script src="https://files.cnblogs.com/files/siwuxie095/canvas-nest.min.js"></script>
背景特效, 立体线条

回到顶部

4. 页脚 Html 代码

 

  1. <script language="javascript" type="text/javascript">
  2. // 生成目录索引列表
  3.  
  4. function GenerateContentList()
  5. {
  6.     var mainContent = $('#cnblogs_post_body');
  7.     var h2_list = $('#cnblogs_post_body h2');//如果你的章节标题不是 h2, 只需要将这里的 h2 换掉即可
  8.  
  9.     if(mainContent.length < 1)
  10.         return;
  11.  
  12.     if(h2_list.length>0)
  13.     {
  14.         var content = '<a name="_labelTop"></a>';
  15.         content += '<div id="navCategory"style="color:#152e97;">';
  16.         content += '<p style="font-size:18px;"><b> 阅读目录 </b></p>';
  17.         content += '<ul>';
  18.         for(var i=0; i<h2_list.length; i++)
  19.         {
  20.             var go_to_top = '<div style="text-align: right;"><a href="#_labelTop"style="color:#f68a33"> 回到顶部 </a><a name="_label' + i + '"></a></div>';
  21.             $(h2_list[i]).before(go_to_top);
  22.             
  23.             var h3_list = $(h2_list[i]).nextAll("h3");
  24.             var li3_content = '';
  25.             for(var j=0; j<h3_list.length; j++)
  26.             {
  27.                 var tmp = $(h3_list[j]).prevAll('h2').first();
  28.                 if(!tmp.is(h2_list[i]))
  29.                     break;
  30.                 var li3_anchor = '<a name="_label' + i + '_' + j + '"></a>';
  31.                 $(h3_list[j]).before(li3_anchor);
  32.                 li3_content += '<li><a href="#_label' + i + '_' + j + '">' + $(h3_list[j]).text() + '</a></li>';
  33.             }
  34.             
  35.             var li2_content = '';
  36.             if(li3_content.length > 0)
  37.                 li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>';
  38.             else
  39.                 li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a></li>';
  40.             content += li2_content;
  41.         }
  42.         content += '</ul>';
  43.         content += '</div><p>&nbsp;</p>';
  44.         content += '<hr style="height:1px;border:none;border-top:1px dashed #0066CC;"/>';
  45.         if($('#cnblogs_post_body').length != 0 )
  46.         {
  47.             $($('#cnblogs_post_body')[0]).prepend(content);
  48.         }
  49.     }   
  50. }
  52. GenerateContentList();
  53. </script>
贴上 目录功能