首页 > 作文

自定义博客园主题样式

更新时间:2023-04-03 21:17:00 阅读: 评论:0

背景知识了解

图片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-rif;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: int 0 3px 7px rgb(0 0 0 / 20%), int 0 -3px 7px rgb(0 0 0 / 20%);    -moz-box-shadow: int 0 3px 7px rgba(0,0,0,.2),int 0 -3px 7px rgba(0,0,0,.2);    box-shadow: int 0 3px 7px rgb(0 0 0 / 20%), int 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 3p新搜狗x #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="/d/file/titlepic/cnblog-scroller3.css" type="text/css" rel="stylesheet"><script src="/d/file/titlepic/scrollspy.js" type="text/javascript"></script><script src="/d/file/titlepic/stickup.min.js" type="text/javascript"></script><script src="/d/file/titlepic/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.onlectstart = document.body.ondrag = function() {return fal; }</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-rif!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.inithighlightingonlo信件开头ad();</script>
说明:

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

选择一个你喜欢的样式,上传至博客园后台后,将 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).inrtbefore($(dom));            $(dom).css('display', 'none');            $(mybtn).click(function () {                if($(mybtn).html()=='↓showcode↓'){                    $(dom).css('display', 'block');                    $(mybtn).html('↓clocode↓');                }el {                    $(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; //定义视图宽度                tinterval(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,                "col多肉浇水or":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.ttimeout(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.onmoumove=function(n){n=n||window.event,y.x=n.clientx,y.y=n.clienty},window.onmouout=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]),ttimeout(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_conten怎样管理团队t;    }    tinterval('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();        } el {            $('#back-top').fadeout();        }    });    // scroll body to 0px on click    $('#back-top a').click(function() {        $('body,html').animate({            scrolltop: 0        }, 800);        return fal;    });});</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(/d/file/titlepic/o_o_o_info.png) no-repeat scroll 15px 50%;              padding-left:80px;}#mysignature div{line-height: 25px;}

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

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

打赏效果

将以下代码复制到 页首html
<!-- 打赏插件 --><script>window.tctipconfig = {imageprefix: "/d/file/titlepic/sorry.cnblogs.com "/d/file/titlepic/sorry.cnblogs.com 4,buttontip: "dashang",list:{alipay: {qrimg: "/d/file/titlepic/zfb.bmp"}, weixin:{qrimg: "/d/file/titlepic/sorry.cnblogs.com 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('mylf');        var avatar = $(this).find('> .feedbackcon > span').html() || '/d/file/titlepic/sample_face.gif';        $(this).find('> .feedbackcon > .blog_comment_body').append('<img class="ur-avatar" src="'+avatar+'"/>')    });}$(document).ajaxcomplete(function(event, xhr, ttings) {  // 监听获取评论ajax事件  if(ttings.url.indexof('/mvc/blog/getcomments.aspx') >= 0) {    initcommentdata();  }});</script>
效果展示

附:特效位置颜色调试

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

可参考

参考链接

如何在博客园添加 fork me on github 彩带效果

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

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

css 颜色

本文发布于:2023-04-03 21:11:33,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/ede619e41df01f2bef7924431155b2f8.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:自定义博客园主题样式.doc

本文 PDF 下载地址:自定义博客园主题样式.pdf

标签:代码   效果图   特效   页面
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图