欢迎光临
我的个人博客网站

自定义博客园主题样式


背景知识了解

图片url获取

1.将选定的背景图上传至博客园服务器

将选定的图片上传至自己博客园的相册中
自定义博客园主题样式

2.获取上传至博客园服务器背景图的url

打开相册,选择需要的背景图片–>单击–>在打开的图片上方右键–>复制图片地址

自定义博客园主题样式

JS权限申请

目的:后面的添加js特效需要用到

我的博客园–>管理

自定义博客园主题样式

设置–>博客园侧边栏公告–>点击 申请JS权限

自定义博客园主题样式

编写申请js权限内容

例:

尊敬的博客园管理员:  请问是否可以帮我开通js权限,我想对文章的样式和布局需要js代码进行调整外观。  谢谢您的帮助。 
尊敬的博客园管理员:  您好,我希望用JS美化下我的博客页面,麻烦通过下我的JS权限申请。  谢谢您的帮助。 

随便写一个就行,比较快的话大概一两个小时就能通过,审核不通过多换几个内容试试

通过审核的状态:

自定义博客园主题样式

自定义设置位置

进入 个人首页—>管理—>设置

自定义博客园主题样式

页面定制css代码 位置

自定义博客园主题样式

博客侧边栏公告(支持HTML代码) 位置

自定义博客园主题样式

页首 HTML 代码 位置

自定义博客园主题样式

页脚 HTML 代码 位置

自定义博客园主题样式

模板设置

选择一个你喜欢的模板,后面的代码都是基于你选择的这个模板修改的,可以和我一样选择red_autumnal_leaves

自定义博客园主题样式

JS文件的下载和上传

目的:把别人服务器上的文件替换你服务器上的,防止别人删除文件你也不能用了。

打开链接,ctrl+s保存

自定义博客园主题样式 自定义博客园主题样式

我的首页–>管理–>文件–>选择文件–>选择你刚才下载的js文件–>上传

自定义博客园主题样式

点击下载可以看到对应的链接

自定义博客园主题样式 自定义博客园主题样式

替换前后对比:

https://blog-static.cnblogs.com/files/Merak21/scrollspy.js

https://blog-static.cnblogs.com/files/你的用户名/scrollspy.js

即只要你将文件上传到了你自己的博客园服务器,直接替换用户名就可

彩带跳转

Gitee彩带跳转

将以下代码复制粘贴到 页首 HTML 代码

<a href="https://gitee.com/sunny_21">   <img style="position: fixed; top: 0; left: 0; border: 0; z-index:9999;"       src="https://images.cnblogs.com/cnblogs_com/Merak21/1978140/o_210521135414Gitee.png"       alt="Fork me on Gitee"> </a> 

效果图展示:
自定义博客园主题样式

Github彩带跳转

  • 将以下代码复制粘贴到 页首 HTML 代码
<a href="https://github.com/sunny21">   <img style="position: fixed; top: 0; right: 0; border: 0; z-index:9999;"    	 src="https://github.blog/wp-content/uploads/2008/12/forkme_right_red_aa0000.png"    	 alt="Fork me on GitHub"> </a> 
  • 说明:

    ​ a href=””中的链接换成你自己的 GitHub 主页地址

github彩带颜色

绿色

自定义博客园主题样式

src中链接替换成以下链接:

https://github.blog/wp-content/uploads/2008/12/forkme_right_green_007200.png 

黑色

自定义博客园主题样式

src中链接替换成以下链接:

https://github.blog/wp-content/uploads/2008/12/forkme_right_darkblue_121621.png 

橘黄色

自定义博客园主题样式

src中链接替换成以下链接:

https://github.blog/wp-content/uploads/2008/12/forkme_right_orange_ff7600.png 

灰色:

自定义博客园主题样式

src中链接替换成以下链接:

https://github.blog/wp-content/uploads/2008/12/forkme_right_gray_6d6d6d.png 

白色:

自定义博客园主题样式

src中链接替换成以下链接:

https://github.blog/wp-content/uploads/2008/12/forkme_right_white_ffffff.png 

透明图片背景

  • 将以下代码复制粘贴到 页面定制 CSS 代码
/* 背景图片,背景透明度 */ #home { opacity: 0.80; margin: 0 auto; width: 85%; min-width: 950px; background-color: #fff; padding: 30px; margin-top: 30px; margin-bottom: 50px; box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3); } body { color: #000; background: url(https://你自己的背景图片.jpg) fixed; background-size: 100%; background-repeat: no-repeat; font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif; font-size: 12px; min-height: 101%; } 
  • 说明 :
    #home 中的 opacity: 0.80; 表示主页面透明度 width: 85%;表示主页面所占宽
    将body模块下的参数”background”url的值修改为你上传到博客园的背景图片url,保存就可以了

  • 效果图展示

    自定义博客园主题样式

个人信息特效

将以下代码复制到 页面定制CSS代码

/* 个人信息特效 */ #header {     position: relative;     height: 167px;     margin: 0;     background: transparent url(https:你的头部背景图片.jpg) no-repeat 0 0;     -webkit-box-shadow: inset 0 3px 7px rgb(0 0 0 / 20%), inset 0 -3px 7px rgb(0 0 0 / 20%);     -moz-box-shadow: inset 0 3px 7px rgba(0,0,0,.2),inset 0 -3px 7px rgba(0,0,0,.2);     box-shadow: inset 0 3px 7px rgb(0 0 0 / 20%), inset 0 -3px 7px rgb(0 0 0 / 20%); } #header h1 a {     font-family: "Comic Sans MS";     color: #b15900; } #blogTitle h2 {     font-weight: normal;     font-size: 14px;     color: #ff7f34;     line-height: 1.5em;     margin-top: 10px;     margin-left: 30px;     width: 50%;     margin-left: 6em;     float: left; } #navList a:link, #navList a:visited, #navList a:active {     color: #00b11b;     font-weight: bold;     font-size: 15px; } #navList a:hover { color: #00ff27; text-decoration: none; } .blogStats {     float: right;     color: #b1b1b1;     margin-top: 14px;     margin-right: 180px;     position: absolute;     right: 77px;     top: 35px;     font-size: 14px; } 
  • 效果图展示

自定义博客园主题样式

标题样式特效

  • 将以下代码复制到 页面定制CSS代码
/* 标题样式 */ #cnblogs_post_body h1 {     background: linear-gradient(to bottom , #f37001,rgb(255 255 255 / 10%));     border-radius: 6px 6px 6px 6px;     box-shadow: 0 0 0 1px #ffb9a9, 1px 1px 4px 1px rgb(255 95 95 / 78%);     color: #FFFFFF;     font-family: "微软雅黑", "宋体", "黑体", Arial;     font-size: 20px;     font-weight: bold;     height: 30px;     line-height: 29px;     margin: 18px 0 !important;     padding: 5px 0 5px 10px;     text-shadow: 2px 2px 3px #a70505;     text-align:center } #cnblogs_post_body h2 {     background: linear-gradient(to bottom , #b930ff,rgb(255 255 255 / 10%));     border-radius: 6px 6px 6px 6px;     box-shadow: 0 0 0 1px #ebbaff, 1px 1px 4px 1px rgb(156 56 181 / 72%);     color: #FFFFFF;     font-family: "微软雅黑", "宋体", "黑体", Arial;     font-size: 15px;     font-weight: bold;     height: 23px;     line-height: 23px;     margin: 12px 0 !important;     padding: 5px 0 5px 10px;     text-shadow: 2px 2px 3px #9d65ca;     text-align:center } #cnblogs_post_body h3 {     background: linear-gradient(to bottom , #5efd35,rgb(255 255 255 / 10%));     border-radius: 6px 6px 6px 6px;     box-shadow: 0 0 0 1px #ccffab, 1px 1px 6px 1px rgb(4 117 8 / 84%);     color: #FFFFFF;     font-family: "微软雅黑", "宋体", "黑体", Arial;     font-size: 12px;     font-weight: bold;     height: 21px;     line-height: 21px;     margin: 12px 0 !important;     padding: 5px 0 5px 10px;     text-shadow: 2px 2px 3px #36a019;     text-align:center } #cnblogs_post_body h4 {     background: linear-gradient(to bottom , #37fff6,rgb(255 255 255 / 10%));     border-radius: 6px 6px 6px 6px;     box-shadow: 0 0 0 1px #afffff, 1px 1px 6px 1px rgb(4 101 101 / 78%);     color: #FFFFFF;     font-family: "微软雅黑", "宋体", "黑体", Arial;     font-size: 13px;     font-weight: bold;     height: 16px;     line-height: 18px;     margin: 18px 0 !important;     padding: 5px 0 5px 10px;     text-shadow: 2px 2px 3px #059081;     text-align:center } /* 标题样式设置结束 */ 
  • 说明: text-align:center 标题居中显示 font-size: 13px; 字体值大小 line-height: 18px; 字体位置 ,可自行更改
  • 效果图展示
    自定义博客园主题样式

目录导航效果

目录导航效果一

  • 将以下代码复制粘贴到 页脚HTML代码
<script src="https://blog-static.cnblogs.com/files/Merak21/bootstrap.min.js"></script> <link href="https://blog-static.cnblogs.com/files/Merak21/marvin.nav.my1502.css" rel="stylesheet"> <script type="text/javascript" src="https://blog-static.cnblogs.com/files/Merak21/marvin.nav.my1502.WhiteTears.js"></script> 
  • 说明:
    只有h1标题会显示
  • 效果图展示
    自定义博客园主题样式

目录导航效果二

将以下代码复制到 页首HTML代码

<link href="http://files.cnblogs.com/files/Merak21/cnblog-scroller3.css" type="text/css" rel="stylesheet"> <script src="http://files.cnblogs.com/files/Merak21/scrollspy.js" type="text/javascript"></script> <script src="http://files.cnblogs.com/files/Merak21/stickUp.min.js" type="text/javascript"></script> <script src="http://files.cnblogs.com/files/Merak21/cnblog-scroller.js" type="text/javascript"></script> 

将以下代码复制到 页面定制 CSS 代码

/*添加滚动条*/ #sideBarMain ul {     line-height: 1.5em;     overflow: auto;     max-height: 600px; } 
  • 说明:

    h1-h6标题都会显示

    max-height 可以自定义导航栏的最大高度

    为了不影响观看效果,可以将博客侧边栏的选项全部关闭

    我的博客–>管理–>选项–>侧边栏控件–>全部不选

    自定义博客园主题样式

  • 效果图展示:

自定义博客园主题样式

正文图片悬停放大特效

  • 将以下代码复制到 页面定制 CSS 代码
.post img {     cursor: pointer;     transition: all 0.5s; } .post img:hover {     transform: scale(1.3); } 
  • 效果图展示

自定义博客园主题样式

禁止页内复制

  • 将以下代码复制到 页首HTML代码
<script language="Javascript"> document.body.onselectstart = document.body.ondrag = function() {return false; } </script> 

markdown特效

代码高亮显示

  • 复制以下代码到 页面定制 CSS 代码
/* markdown配置 */ .cnblogs-markdown .hljs {     display: block;     overflow-x: auto;     padding: 0.5em;     background: #ecf2ff !important;     border: 1px solid #fdfdfd !important;     color: #272727;     white-space: pre;     word-break: normal;     font-family: "Consolas",sans-serif!important;     font-size:14px!important; } 
  • 复制以下代码到 页脚 HTML 代码
<!-- markdown配置 --> <link href="https://blog-static.cnblogs.com/files/Merak21/mk.min.css" rel="stylesheet"/> <script src="https://blog-static.cnblogs.com/files/Merak21/highlight.min.js"></script> <script>hljs.initHighlightingOnLoad();</script> 
  • 说明:

如果想要其他颜色样式,可以从highlightjs官网下载

自定义博客园主题样式

选择一个你喜欢的样式,上传至博客园后台后,将 link标签的链接 更换成你博客园里的css链接就可

自定义博客园主题样式 自定义博客园主题样式 自定义博客园主题样式

如果对官网的样式也不满意,可以进入CSS文件自行修改相应值

自定义博客园主题样式

  • 效果图展示:

自定义博客园主题样式

代码行号显示

  • 将以下代码复制到 页脚 HTML 代码
<script src="https://blog-static.cnblogs.com/files/Merak21/highlightjs-line-numbers.min.js"></script> <script>hljs.initLineNumbersOnLoad();</script> 
  • 效果图展示

自定义博客园主题样式

代码复制显示

  • 将以下代码复制到 页面定制 CSS 代码
/*添加按钮*/ .cnblogs-markdown pre {   position: relative; } .cnblogs-markdown pre > span {   position: -webkit-sticky;   position: sticky;   top: 0;   right: 0;   border-radius: 2px;   padding: 0 10px;   font-size: 12px;   background: rgba(0, 0, 0, 0.4);   color: #fff;   cursor: pointer;   display:none; } .cnblogs-markdown pre:hover > span {   display:block; } .cnblogs-markdown pre > .copyed {   background: #0c7100; } 
  • 将以下代码复制到 页脚 HTML 代码
<script src="https://blog-static.cnblogs.com/files/Merak21/clipboard.min.js"></script> <script src="https://blog-static.cnblogs.com/files/Merak21/cp.js"></script> 
  • 效果图展示

自定义博客园主题样式

代码滚动条显示

纵向滚动条显示

​ 效果:纵向显示自动,横向显示滑到markdown最底部才会显示,高度大于300显示

  • 复制以下代码到 页脚html代码
<script>     // 高度大于300的添加滚动条      $('pre').each(function (ind, dom) {         if ($(dom).css('height').slice(0, -2) > 300) {              $(dom).css('height', '300px');              $(dom).css('overflow', 'auto');          }      }) </script> 
  • 说明:如果需要其他高度,请在 slice(0, -2) > 300 ‘height’, ‘300px’ 中更改相应值
  • 效果图展示
    自定义博客园主题样式

横向+纵向滚动条显示

​ 效果:超过固定长宽都会显示,与行号显示,纵向显示,显隐按钮会有冲突,用这个最好把其他几个注释

  • 复制以下代码到 页面定制CSS代码
.cnblogs-markdown .hljs {     max-width: 970px;     max-height: 300px;     overflow: auto; } 
  • 效果图展示

    自定义博客园主题样式

代码显隐按钮

给高度大于600的代码添加显示隐藏按钮,与行号显示,滚动条显示冲突,最好只选一个

  • 将以下代码复制到 页脚HTML代码
<script>     // 高度大于600的添加显示隐藏按钮     $('pre').each(function (ind, dom){         if ($(dom).css('height').slice(0, -2) > 500) {             var mybtn = document.createElement('button');             $(mybtn).html('↓ShowCode↓');             $(mybtn).css({'border-radius': '4px','background-color':'lightblue','cursor':'pointer','border-color':'lightblue'});             $(mybtn).insertBefore($(dom));             $(dom).css('display', 'none');             $(mybtn).click(function () {                 if($(mybtn).html()=='↓ShowCode↓'){                     $(dom).css('display', 'block');                     $(mybtn).html('↓CloseCode↓');                 }else {                     $(dom).css('display', 'none');                     $(mybtn).html('↓ShowCode↓');                 }             })         }     }); </script> 
  • 说明:这个是设置的高度大于600的代码添加按钮,如果需要其他值,请自行更改相应值

  • 效果图展示

    自定义博客园主题样式

雪花飘落特效

雪花特效一

  • I、将以下代码复制到 页面定制CSS代码
#Snow{     position: fixed;     top: 0;     left: 0;     width: 100%;     height: 100%;     z-index: 99999;     background: rgba(255,255,240,0.1);     pointer-events: none; } 

II、将以下代码复制到 博客侧边栏公告处(要申请支持js代码)

<!--雪花--> <div class="Snow">     <canvas id="Snow"></canvas> </div> <script src="https://files.cnblogs.com/files/Merak21/snow.js"></script> 
  • 效果图展示
    自定义博客园主题样式

雪花特效二

  • 将以下代码复制到 页脚HTML代码
<script type="text/javascript">    window.onload = function () {                 var minSize = 10; //最小字体                 var maxSize = 20;//最大字体                 var newOne = 100; //生成雪花间隔                 var flakColor = "#f5f5f5fa"; //雪花颜色                 var flak = $("<div></div>").css({position:"absolute","top":"0px"}).html("✽");//定义一个雪花                 var dhight = $(window).height(); //定义视图高度                 var dw =$(window).width()-80; //定义视图宽度                 setInterval(function(){                 var sizeflak = minSize+Math.random()*maxSize; //产生大小不等的雪花                 var startLeft = Math.random()*dw; //雪花生成是随机的left值                 var startOpacity = 0.7+Math.random()*0.3; //随机透明度                 var endTop= dhight-100; //雪花停止top的位置                 var endLeft= Math.random()*dw; //雪花停止的left位置                 var durationfull = 5000+Math.random()*3000; //雪花飘落速度不同                 flak.clone().appendTo($("body")).css({                 "left":startLeft ,                 "opacity":startOpacity,                 "font-size":sizeflak,                 "color":flakColor                 }).animate({                 "top":endTop,                 "left":endLeft,                 "apacity":0.1                 },durationfull,function(){                 $(this).remove()                 });                 },newOne);             }  </script>  
  • 效果图展示
    自定义博客园主题样式

樱花飘落特效

樱花飘落特效一

效果:飘落两三页会停

  • 将以下代码复制粘贴到 页首HTML代码

    <script src="https://files.cnblogs.com/files/Merak21/sakuraPlus.js"></script> 
  • 效果图展示:

    自定义博客园主题样式

樱花飘落特效二

效果:一直飘落

  • 将以下代码复制粘贴到 页首HTML代码
<script src="https://files.cnblogs.com/files/Merak21/sakura.js"></script> 
  • 效果图展示:

    自定义博客园主题样式

鼠标特效

点击特效

文字特效

  • 将以下代码复制粘贴到 页脚HTML代码
<!-- 鼠标点击特效 --> <script type="text/javascript"> $(document).ready(function(){ var a_index = 0; $("body").click(function(e){ var a = new Array("❤北冥是个❤","❤阳光❤","❤洒脱❤","❤孑然❤","❤真淳❤","❤不羁❤","❤随和❤","❤浪漫❤","❤富有责任心❤","❤爱你❤","❤的美男子❤"); var $i = $("<span/>").text(a[a_index]); a_index = (a_index + 1) % a.length; var x = e.pageX,y = e.pageY; $i.css({ "z-index": 99999, "top": y - 20, "left": x, "position": "absolute", "font-weight": "bold", "color": randomColor() }); $("body").append($i); $i.animate({"top": y-180,"opacity": 0},1500,function() { $i.remove(); }); function randomColor(){ let r = Math.floor(Math.random()*256) let g = Math.floor(Math.random()*256) let b = Math.floor(Math.random()*256) return "rgb("+r+','+g+','+b+")" } }); }); </script> 
  • 效果图展示

    自定义博客园主题样式

烟花特效

  • 将以下代码复制粘贴到 页尾HTML代码
<script src="https://blog-static.cnblogs.com/files/Merak21/cursor-effects.js"></script> <canvas width="1366" height="662" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas> 
  • 效果图展示

    自定义博客园主题样式

动态追随

动态线条特效

将以下代码复制到 页脚HTML代码

<div style = "display:none;">动态线条</div> <script> !function(){ function n(n,e,t){ return n.getAttribute(e)||t } function e(n){ return document.getElementsByTagName(n) } function t(){ var t=e("script"),o=t.length,i=t[o-1]; return{ l:o,z:n(i,"zIndex",-1),o:n(i,"opacity",.5),c:n(i,"color","0,0,0"),n:n(i,"count",99) } } function o(){ a=m.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth, c=m.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight } function i(){ r.clearRect(0,0,a,c); var n,e,t,o,m,l; s.forEach(function(i,x){ 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], null!==n.x&&null!==n.y&&(o=i.x-n.x,m=i.y-n.y, l=o*o+m*m,l<n.max&&(n===y&&l>=n.max/2&&(i.x-=.03*o,i.y-=.03*m), 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())) }), x(i) } var a,c,u,m=document.createElement("canvas"), d=t(),l="c_n"+d.l,r=m.getContext("2d"), x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame|| function(n){ window.setTimeout(n,1e3/45) }, 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.onresize=o, window.onmousemove=function(n){ n=n||window.event,y.x=n.clientX,y.y=n.clientY }, window.onmouseout=function(){ y.x=null,y.y=null }; for(var s=[],f=0;d.n>f;f++){ 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}) } u=s.concat([y]), setTimeout(function(){i()},100) }(); </script> <div style = "display:none;"> 动态线条end</div> 

2、效果图展示
自定义博客园主题样式

鼠标显示

鼠标指针特效

  • 将以下代码复制到 页面 定制CSS 代码
/* 鼠标指针特效 */ body{     background-repeat: repeat;     background-attachment: fixed;     background-size:cover;     cursor: url(https://images.cnblogs.com/cnblogs_com/Merak21/1978140/o_210521150418shub.png),auto; } /*提交按钮*/ #btn_comment_submit{     width:73px;height:35px;border:none;     background-color:#0cbb00;     -webkit-border-radius: 10px;color:white;     font-weight: bold;     -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);     text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);     font-size: 10pt; } 

将以下代码复制到 页脚 HTML 代码

<!-- 鼠标指针特效 --> <script src="https://blog-static.cnblogs.com/files/Merak21/cursor-effects.js"></script> <canvas width="1366" height="662" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas> 
  • 说明:body url中替换成你自已的鼠标指针图片链接

自定义博客园主题样式

  • 效果图展示

    自定义博客园主题样式

点赞特效

  • 将以下代码复制到 页面定制 CSS 代码
#div_digg{   padding: 5px;   border-radius: 5px;   position: fixed;   left: 0;   bottom: 80px;   width:80px;   z-index:100; } .diggit{   background: url(http://images2017.cnblogs.com/blog/894443/201709/894443-20170920105433618-867225449.png) no-repeat;   width: 60px;   height: 60px; } #div_digg .diggnum{   position: absolute;   bottom: -20px;   left: 6px;   background: #D0D0D0;   padding: 2px 0;   display: block;   color: #555;   font-size: 12px;   text-align: center;   width: 60px;   -moz-border-radius: 4px;   -webkit-border-radius: 4px;   font-weight: bold; } /* 删除反对按钮,有点邪恶了 */ .buryit{   display: none; } 
  • 说明:如果需要调整点赞位置,可用F12进行调试,详细可参考本博客最后一条
  • 效果图展示
    自定义博客园主题样式

置顶特效

  • 将以下代码复制到 页首HTML代码
<!-- 置顶特效 --> <script>     function func(){         var tag = document.getElementById('i1');         var content = tag.innerText;         var f = content.charAt(0);         var l = content.substring(1,content.length);         var new_content = l + f;         tag.innerText = new_content;     }     setInterval('func()',1600); </script> <span id="back-to-top"><a href="#top"></a></span> <style> #back-top {      position: fixed;      bottom: 10px;      right: 5px;      z-index: 99; } #back-top span {      width: 50px;      height: 64px;      display: block;      background:url(https://images.cnblogs.com/cnblogs_com/Merak21/1978205/o_210522231213hj.png) no-repeat center center; } #back-top a{outline:none} </style> <script type="text/javascript"> $(function() {     // hide #back-top first     $("#back-top").hide();     // fade in #back-top     $(window).scroll(function() {         if ($(this).scrollTop() > 500) {             $('#back-top').fadeIn();         } else {             $('#back-top').fadeOut();         }     });     // scroll body to 0px on click     $('#back-top a').click(function() {         $('body,html').animate({             scrollTop: 0         }, 800);         return false;     }); }); </script> <p id="back-top" style="display:none"><a href="#top"><span></span></a></p> 
  • 效果图展示
    自定义博客园主题样式

版权信息效果

1、 将以下代码复制到 页面定制CSS代码

#MySignature  {   border:solid 1px #E5E5E5;                padding:10px;                background:#FFFEFE url(http://images.cnblogs.com/cnblogs_com/grenet/226272/o_o_o_info.png) no-repeat scroll 15px 50%;               padding-left:80px;} #MySignature div{line-height: 25px;} 

2、将以下代码复制贴到 博客签名

<div>作者:<a href="https://www.cnblogs.com/Merak21/" target="_blank">Merak</a></div> <div>出处:<a href="https://www.cnblogs.com/Merak21/" target="_blank">https://www.cnblogs.com/Merak21/</a></div> <div>本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须在文章页面给出原文连接,否则保留追究法律责任的权利。 </div> 
  • 说明:
    博客签名位置:管理–>博客签名–>标题(随便写)–>内容(上面代码)–>保存
    自定义博客园主题样式
    自定义博客园主题样式
  • 效果图展示
    自定义博客园主题样式

打赏效果

  • 将以下代码复制到 页首html
<!-- 打赏插件 --> <script> window.tctipConfig = { imagePrefix: "http://files.cnblogs.com/files/kdy11/", cssPrefix: "http://files.cnblogs.com/files/kdy11", buttonImageId: 4, buttonTip: "dashang", list:{ alipay: {qrimg: "http://files.cnblogs.com/files/xxx/zfb.bmp"},  weixin:{qrimg: "http://files.cnblogs.com/files/xxx/wx.bmp"}, } }; </script> <script src="https://blog-static.cnblogs.com/files/Merak21/ch_tctip01.js"></script> 
  • 说明

    ​ 将支付宝收款码和微信收款码上传到博客园相册

    ​ alipay:{qrimg:”xxx.bmp”}, xxx.bmp 里改成自己上传的支付宝收款码图片链接

    ​ weixin:{qrimg:”xxx.bmp”}, xxx.bmp 里改成自己上传的微信收款码图片链接

  • 效果图展示

自定义博客园主题样式

评论效果

  • 将以下代码复制到 页首html代码
<link  type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/hafiz/feedback.css"> 

​ 将以下代码复制到 页脚html代码

<script type="text/javascript"> $(function(){     $('#blogTitle h1').addClass('bounceInLeft animated');     $('#blogTitle h2').addClass('bounceInRight animated');     // 删除反对按钮     $('.buryit').remove();     initCommentData(); }); function initCommentData() {     $('.feedbackItem').each(function() {         var text = $(this).find('.feedbackListSubtitle .layer').text();         // 将楼层信息放到data里面         // $(this).find('.blog_comment_body').attr('data-louceng', text.replace(/^#/g, ''));         if($(this).find('.feedbackListSubtitle .louzhu').length>0) $(this).addClass('myself');         var avatar = $(this).find('> .feedbackCon > span').html() || 'http://pic.cnitblog.com/face/sample_face.gif';         $(this).find('> .feedbackCon > .blog_comment_body').append('<img class="user-avatar" src="'+avatar+'"/>')     }); }  $(document).ajaxComplete(function(event, xhr, settings) {   // 监听获取评论ajax事件   if(settings.url.indexOf('/mvc/blog/GetComments.aspx') >= 0) {     initCommentData();   } }); </script> 
  • 效果展示
    自定义博客园主题样式

附:特效位置颜色调试

自定义博客园主题样式 自定义博客园主题样式 自定义博客园主题样式

调试好后将CSS样式放在 页面定制CSS代码 保存即可

可参考【详细图解】一步一步教你自定义博客园(cnblog)界面

参考链接

小白如何在博客园上创建一个自己的超美化博客

如何在博客园添加 Fork me on GitHub 彩带效果

博客园添加版权签名

【详细图解】一步一步教你自定义博客园(cnblog)界面

博客园美化(最全)

【CSS】渐变背景(background-image)

一行代码引入博客园樱花飘落特效

博客园文章自动生成导航目录

博客园Markdown编辑器修改代码配色、添加代码行号

博客园个人首页背景设置

CSS 颜色

赞(0) 打赏
未经允许不得转载:张拓的天空 » 自定义博客园主题样式
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏