博客园自定义css样式与js特效
本文参考☞:https://www.cnblogs.com/menxin
就拿我的博客样式来做效果展示吧:https://www.cnblogs.com/SuperBrother/
开始教程:
首先找到设置选项, 或者直接输入连接:https://i-beta.cnblogs.com/settings
如图:

没截到的地方不太方便展示,接下来就可以开始写代码了
注意,先在这里申请开通js 权限

将 博客皮肤 选项 选择为MTClean ,然后将下面代码复制到 ->页面定制 CSS 代码
.snow-container { position: fixed; top:0; left:0; right: 0; bottom:0; overflow: hidden; z-index: 2; pointer-events: none; background-color: none; } .snow { display: block; position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); -webkit-animation: snow linear infinite; animation: snow linear infinite; } .snow.foreground { background-image: url("https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-large-075d267ecbc42e3564c8ed43516dd557.png"); -webkit-animation-duration: 15s; animation-duration: 15s; } .snow.foreground.layered { -webkit-animation-delay: 7.5s; animation-delay: 7.5s; } .snow.middleground { background-image: url(https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-medium-0b8a5e0732315b68e1f54185be7a1ad9.png); -webkit-animation-duration: 20s; animation-duration: 20s; } .snow.middleground.layered { -webkit-animation-delay: 10s; animation-delay: 10s; } .snow.background { background-image: url(https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-small-1ecd03b1fce08c24e064ff8c0a72c519.png); -webkit-animation-duration: 30s; animation-duration: 30s; } .snow.background.layered { -webkit-animation-delay: 15s; animation-delay: 15s; } @-webkit-keyframes snow { 0% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { -webkit-transform: translate3d(15%, 100%, 0); transform: translate3d(15%, 100%, 0); } } @keyframes snow { 0% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { -webkit-transform: translate3d(15%, 100%, 0); transform: translate3d(15%, 100%, 0); } } /** 原有样式修改 */ #sideBar{ display: none; } #mainContent{ width: 100%; box-shadow: 0 0 0; border-radius: 0px; opacity: 0; transition:0.5s; margin-top:40px; } #main{ width: 60%; background-color: white; /*max-width: 700px;*/ padding-right: 0px; margin:auto; } @media screen and (max-width: 1000px) { #main {width: 100%;} } body{ background-image: none; background-color: white; font-family: Menlo,Bitstream Vera Sans Mono,DejaVu Sans Mono,Monaco,Consolas,monospace !important; line-height: 1.8; } #cnblogs_post_body{ font-size: 16px; } #green_channel{ display: none; } #post_next_prev{ display: none; } .forFlow img{ margin-top: 0; } /** 去除广告 */ #cb_post_title_url{ display: none; } #cnblogs_c1{ display: none; } #cnblogs_c2{ display: none; } #ad_t2{ display: none; } #kb_block{ display:none } #under_post_news{ display:none } #header{ display:none } #BlogPostCategory{ display: none; } #comment_nav{ display: none; } .postDesc{ border-bottom:none; } #author_profile_follow{ display: none; } /** 自定义样式 */ /* 加载条 */ #myProgressBar{ width: 15%; height: 2px; background-color: #eb5055; position: fixed; top: 0; left: 0; z-index: 999; } #nprogress { pointer-events: none; } #nprogress .bar { background: #eb5055; position: fixed; z-index: 1031; top: 0; left: 0; width: 100%; height: 2px; } #nprogress .peg { display: block; position: absolute; right: 0px; width: 100px; height: 100%; box-shadow: 0 0 10px #eb5055, 0 0 5px #eb5055; opacity: 1.0; -webkit-transform: rotate(3deg) translate(0px, -4px); -ms-transform: rotate(3deg) translate(0px, -4px); transform: rotate(3deg) translate(0px, -4px); } #nprogress .spinner { display: block; position: fixed; z-index: 1031; top: 15px; right: 15px; } #nprogress .spinner-icon { width: 18px; height: 18px; box-sizing: border-box; border: solid 2px transparent; border-top-color: #eb5055; border-left-color: #eb5055; border-radius: 50%; -webkit-animation: nprogress-spinner 400ms linear infinite; animation: nprogress-spinner 400ms linear infinite; } .nprogress-custom-parent { overflow: hidden; position: relative; } .nprogress-custom-parent #nprogress .spinner, .nprogress-custom-parent #nprogress .bar { position: absolute; } @-webkit-keyframes nprogress-spinner { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes nprogress-spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /** 导航栏 */ #mynavbar{ width: 100%; height: 70px; position: fixed; display: block; top: 0px; z-index: 100; background-color: white; transition:0.5s ease-in-out; box-shadow: 0 1px 5px rgba(0,0,0,.1); } #mynavbar_menu{ display: inline-block; width: auto; position: relative; float: right; text-align: right; line-height: 68px; } #mynavbar_menu a{ padding: 0 15px; font-size: 14px; outline: 0; color: #313131; text-decoration: none; } #mynavbar_menu a:hover{ color: #eb5055 !important; } /** 头部 */ #myheader{ background-color: #2175bc!important;/**顶部背景栏底色 */ margin-top:70px; position: relative; width: 100%; height: 300px; } #myheader_bg{ width:100%; height:300px; background-position: center; background-size: cover; -webkit-filter: blur(0px); -moz-filter: blur(0px); filter: blur(0px); position: absolute; } #myheader_cover{ position: relative; margin-top: 70px; width: 100%; height: 300px; background-color: rgba(0,0,0,.5); box-shadow: 0 1px 5px rgba(0,0,0,.3); } #mypost_title{ position: relative; top: 105pt; margin: 0 auto; padding: 30px 25px 20px; max-width: 700px; color: white; transition:0.5s; opacity: 0; } #mypost_title_e{ margin: 0; padding: 5px 0 15px; } #mypost_title_e a{ border: 1px solid #6fa3ef; /** 签名栏边框颜色*/ border-radius: 15px; background: #6fa3ef; /**签名栏颜色*/ color: #fff;display: inline-block; margin: 4px 8px 0 0; padding: 0 15px; letter-spacing: 0; font-weight: 600; font-size: 13px;outline: 0;text-decoration: none; transition: 0.5s; } #mypost_title_e a:before{ content: "# " } #mypost_title_e a:hover{ background-color: white; border: 1px solid white; color:black; } #mypost_title_f a{ color: white; } #mypost_title_f a:hover{ text-decoration:none; } /** 右侧导航 */ #right_meun{ position: fixed; z-index: 999; top: 100px; left: 75%; display: none; text-align: left; border-left: 1px solid #ddd; font-size: 10px; } #right_meun li{ list-style: none!important; } #right_meun a{ display: inline-table; margin-left: 5px; white-space: nowrap; text-decoration: none; color: #313131; outline: 0; } #right_meun a:hover{ color: #eb5055; } #right_meun>li::before { position: relative; top: 0; left: -4px; display: inline-block; width: 7px; height: 7px; content: ''; border-radius: 50%; background-color: #eb5055; } /* 底部导航 */ #post-bottom-bar{ position: fixed; right: 0; bottom: 0; left: 0; z-index: 2; height: 3pc; border-top: 1px solid #e0e0e0; background-color: #fff; margin: 0; padding: 0; transition: 0.5s ease-in-out; } #post-bottom-bar a{ text-decoration: none!important; } .post-bottom-bar .bottom-bar-inner{ margin: 0 auto; padding: 0 10px; max-width: 900px; } .bottom-bar-items{ margin: 0 0 0 10px; color: #313131; font-size: 14px !important; line-height: 3pc;float: left; } .post-bottom-bar{ margin: 0 0 0 10px; color: #313131; font-size: 14px; line-height: 3pc; } .post-bottom-bar .social-share .bottom-bar-item { padding: 4px; } .post-bottom-bar .bottom-bar-item.bottom-bar-facebook a { background-color: #1b95e0; color: #fff; } .post-bottom-bar .social-share .bottom-bar-item a { padding: 2px 10px; border-radius: 15px; } .post-bottom-bar .bottom-bar-item a { margin: 0; padding: 9pt; border: 0; background: 0 0; color: #eb5055; font-size: 14px; line-height: 3pc; cursor: pointer; } .post-bottom-bar .bottom-bar-item.bottom-bar-twitter a { background-color: #1b95e0; color: #fff; } .post-bottom-bar .bottom-bar-item.bottom-bar-qrcode a { background-color: #1b95e0; color: #fff; } .bottom-bar-item a:hover{ color: #eb5055; } /** MarkDown样式调整 */ .cnblogs-markdown .hljs{ font-size: 16px!important; line-height: 2!important; padding: 15px!important; } .cnblogs-markdown code{ background:rgb(238,240,244) none !important; border:0px !important; color: rgb(73,59,92) !important; font-size: 16px!important; } .cnblogs-markdown h2{ font-weight: 500; margin: 20px 0; } .cnblogs-markdown h2:before{ content: "#"; color: #eb5055; position: relative; top: 0; left: -12px; } #cnblogs_post_body h2{ font-weight: 500; margin: 20px 0; } #cnblogs_post_body h3{ font-size: 16px; font-weight: bold; line-height: 1.5; margin: 10px 0; } .cnblogs-markdown h3:before{ content: "##"; color: #2175bc; position: relative; top: 0; left: -8px; } .postBody blockquote, .postCon blockquote{ background-image: none; border-left: 5px solid #DDDFE4; background-color: #EEF0F4; width: 100%; padding: 6px 0 6px 25px; } blockquote{ border:0; } /* code加上行数 */ .cnblogs-markdown .syntaxhighlighter table td.code { width:95% !important; } .cnblogs-markdown .syntaxhighlighter code { font-family: "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace!important; padding: 0 !important; border-radius: 0 !important; background-color: transparent !important; } .cnblogs-markdown .syntaxhighlighter code:before, .cnblogs-markdown .syntaxhighlighter code:before { letter-spacing: -0.5em; } /** 更改浏览器滚动条和选中字体背景颜色 */ ::selection { background-color: #2175bc; color: #fff; } ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-thumb { min-height: 28px; background-color: #eb5055; background-clip: padding-box; } ::-webkit-scrollbar-track-piece { background-color: #fff; } *, :after, :before { box-sizing: border-box; } #leftmenu { display:none; } #tagline{ display:none; } #Header1_HeaderTitle { display:none; } #top{ border-top:0px double #666; } .postTitle2 { font-size: 20px; padding-right: 64px; padding-left: 10px; border-left-width: 3px; border-left-style: solid; border-left-color: #2175bc; } div.post h2 a:link { font-size:18x; } p.postfoot { font-size: 12px; color: #999; margin-left:60%; } a:link, a:visited { text-decoration: none; color: #39f; } .c_b_p_desc { color: #606060; font-size: 12px; }
将下面代码复制到 -> 页首 HTML 代码
<div class="snow-container">
<div class="snow foreground"></div>
<div class="snow foreground layered"></div>
<div class="snow middleground"></div>
<div class="snow middleground layered"></div>
<div class="snow background"></div>
<div class="snow background layered"></div>
</div>
<!-- 自定义进度条 -->
<div id="myProgressBar"></div>
<!-- 自定义导航条 -->
<div id="mynavbar">
<div style="position:relative;width:65pc;height:70px;margin:0 auto;">
<a style="width: auto;height: 22px;margin-left: 25px;" href="https://www.cnblogs.com/SuperBrother/">
<img style="width: auto;height: 22px;outline: 0;margin-top: 25px;" src="https://images.cnblogs.com/cnblogs_com/menxin-/1561019/o_LOGO.png">
</a>
<div id="mynavbar_menu">
<a href="https://www.cnblogs.com/SuperBrother/">首页</a>
<a href="https://i.cnblogs.com/Configure.aspx">设置</a>
<a href="https://i-beta.cnblogs.com/posts/edit">新随笔</a>
<a href="https://msg.cnblogs.com/send/menxin-">联系</a>
<a href="#">Github</a>
<a href="https://www.cnblogs.com/">博客园</a>
</div>
</div>
</div>
<!-- 自定义头部锚点 -->
<a name="mtop"></a>
<!-- 自定义头部 -->
<div id="myheader">
<!-- 背景图片 -->
<div id="myheader_bg"></div>
<!-- 遮罩层 -->
<div id="myheader_cover" title="点我点我">
<!-- 博客标题 -->
<div id="mypost_title">
<div id="mypost_title_h" style="font-weight: 500;font-size: 21px;">活着</div>
<div id="mypost_title_f">新人入坑,不定时分享一些工作中遇到的一些问题,或者觉得好的点</div>
<div id="mypost_title_e">
<a href="https://www.cnblogs.com/SuperBrother/"">不求人好感,不予人难堪</a>
</div>
</div>
</div>
</div>
将下面代码复制到 -> 页脚 HTML 代码
<!-- ............自定义尾部代码开始............ -->
<div id="post-bottom-bar" class="post-bottom-bar">
<div class="bottom-bar-inner">
<!-- 左边 -->
<div class="bottom-bar-items social-share" style="float: left;">
<!-- <span class="bottom-bar-item bottom-bar-facebook">
<a id="bottom-d" href="javascript:void(0)" target="_blank">好文要赞</a>
</span>-->
<span class="bottom-bar-item bottom-bar-twitter" >
<a id="bottom-g" href="https://home.cnblogs.com/u/SuperBrother/"" target="_blank">关注我</a>
</span>
<span class="bottom-bar-item bottom-bar-qrcode">
<a id="bottom-s" href="javascript:void(0)" target="_blank">收藏该文</a>
</span>
</div>
<!-- 右边 -->
<div class="bottom-bar-items right" style="float: right;">
<span class="bottom-bar-item"><a href="#mfooter">↓</a></span>
<span class="bottom-bar-item"><a href="#mtop">↑</a></span>
</div>
</div>
</div>
<a name="mfooter"></a>
<!-- ............自定义尾部代码结束............ -->
<script type="text/javascript" src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>
<script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
<script type="text/javascript">
/**
用来设置初始时需要执行的js
*/
$(document).ready(function(){
//加载顶部进度条
NProgress.start();
NProgress.done();
$("#myProgressBar").hide();
//设置背景图片地址
if ($("#head_bg_img").val()!=null && $("#head_bg_img").val()!="") {
$("#myheader_bg").css("background-image","url("+$("#head_bg_img").val()+")");
}else{
$("#myheader_bg").css("background-image","url(http://static.oneplus.cn/data/attachment/forum/201410/18/111440yq2sp3y35mmmsmpm.jpg)");//顶部背景图片
}
//标题
$("#mypost_title_h").html($("#cb_post_title_url").html());
//正文和标题淡入
$("#mainContent").css("opacity","1");
$("#mainContent").css("margin-top","0");
$("#mypost_title").css("opacity","1");
$("#mypost_title").css("top","75pt");
//更改iocn图标
var linkObject = document.createElement("link");
linkObject.rel = "shortcut icon";
linkObject.href = "https://images.cnblogs.com/cnblogs_com/menxin-/1561019/o_00.png";
document.getElementsByTagName("head")[0].appendChild(linkObject);
})
/**
设置ajax请求加载完所有数据时执行的js
*/
setTimeout(afterAjax,1000);
function afterAjax(){
//假如是首页
if (window.location.href == "https://www.cnblogs.com/SuperBrother/"||
window.location.href == "https://www.cnblogs.com/SuperBrother"||
window.location.href == "https://www.cnblogs.com/SuperBrother"||
window.location.href == "https://www.cnblogs.com/SuperBrother") {
$("#mypost_title_f").html("新人入坑,不定时分享一些工作中遇到的一些问题,或者觉得好的点");
$("#mypost_title_e").html("<a href='https://www.cnblogs.com/SuperBrother'>不求人好感,不予人难堪。</a>");
}else{
var classification = null;
if ($("#BlogPostCategory").html()!=null && $("#BlogPostCategory").html()!= "") {
classification = $("#BlogPostCategory").html();
classification = classification.substring(3,classification.length);
}else{
classification = "<a href='https://www.cnblogs.com/menxin-/'>暂未分类</a>";
}
//设置副标题标题
$("#mypost_title_f").html(ftitle);
//设置标题分类按钮
$("#mypost_title_e").html(classification);
//设置底部导航条上一篇下一篇文章
var pnp = $("#post_next_prev a");
$("#mbottom-left").attr("href",pnp[1].href);
if (pnp.length>2) {
$("#mbottom-right").attr("href",pnp[3].href);
}
}
$("#myheader_bg").css("filter","blur(0px)");
}
/**
自定义的js方法
*/
$("#bottom-s").click(function(){
AddToWz(cb_entryId);return false;
})
if (window.location.href == "https://www.cnblogs.com/SuperBrother"||
window.location.href == "https://www.cnblogs.com/SuperBrother"||
window.location.href == "https://www.cnblogs.com/SuperBrother"||
window.location.href == "https://www.cnblogs.com/SuperBrother") {
}else{
var url = window.location.href;
var lastUrl = url.substring(url.lastIndexOf("/")+1);
var mpageId = lastUrl.substring(0,lastUrl.indexOf("."));
$("#bottom-d").click(function(){
// DiggIt(mpageId,cb_blogId,1);
green_channel_success(this,'谢谢推荐!');
})
}
//通过滚动条控制导航条的展现隐藏
var oldScrollNum = 0;
window.onscroll = function(){
var t = document.documentElement.scrollTop || document.body.scrollTop;
//下滑
if (t>oldScrollNum) {
if (t>120) {
$("#mynavbar").css("margin-top","-70px");//顶部导航
$("#post-bottom-bar").css("bottom","-3pc");//底部导航
}
if (t>300) {
$("#right_meun").css("display","inline-block");//右侧导航
}
//上拉
}else{
//防止用a链接跳转也触发效果
if (oldScrollNum-t<20) {
$("#mynavbar").css("margin-top","0px");//顶部导航
$("#post-bottom-bar").css("bottom","0");//底部导航
}
if (t<=300) {
$("#right_meun").css("display","none");//右侧导航
}
}
oldScrollNum = t;
}
//背景大图点击模糊||清晰
$("#myheader_cover").click(function(){
if ($("#myheader_bg").css("filter") == "blur(3px)") {
$("#myheader_bg").css("filter","blur(0px)");
}else{
$("#myheader_bg").css("filter","blur(3px)");
}
})
//点击图片放大居中显示
layer.photos({
photos: '#cnblogs_post_body'
,shift: 0
});
</script>
<script type="text/javascript">
var setMyBlog = {
setCopyright: function() {
//设置版权信息,转载出处自动根据页面url生成
var info_str = '<p>作者:<a target="_blank">@gzdaijie</a><br>'+
'本文为作者原创,转载请注明出处:<a class="uri"></a></p><hr></hr>',
info = $(info_str),
info_a = info.find("a"),
url = window.location.href;
$(info_a[0]).attr("href","https://github.com/zaijianwodeai");
$(info_a[1]).attr("href",url).text(url);
$("#cnblogs_post_body").prepend(info);
},
setCodeRow: function(){
// 代码行号显示
var pre = $("pre.sourceCode"); //选中需要更改的部分
if(pre && pre.length){
pre.each(function() {
var item = $(this);
var lang = item.attr("class").split(" ")[1]; //判断高亮的语言
item.html(item.html().replace(/<[^>]+>/g,"")); //将<pre>标签中的html标签去掉
item.removeClass().addClass("brush: " + lang +";"); //根据语言添加笔刷
SyntaxHighlighter.all();
})
}
},
setAtarget: function() {
// 博客内的链接在新窗口打开
$("#cnblogs_post_body a").each(function(){
this.target = "_blank";
})
},
setContent: function() {
// 根据h2、h3标签自动生成目录
var captions_ori = $("#cnblogs_post_body h2"),
captions_ori2 = $("#cnblogs_post_body h3"),
captions = $("#cnblogs_post_body h2,#cnblogs_post_body h3").clone(),
content = $("<ul id='right_meun'></ul>");
$("#cnblogs_post_body").prepend(content.append(captions));
var index = -1,index2 = -1;
captions.replaceWith(function(){
var self = this;
if(self.tagName == "H2" || self.tagName == "h2"){
// 设置点击目录跳转
index += 1;
$('<a name="' + '_caption_' + index + '"></a>').insertBefore(captions_ori[index]);
return '<li id="'+index+'li"><a href="#_caption_' + index + '">' + self.innerHTML + '</a><ul></ul></li>';
} else {
// add by summertime-wu 增加h3链接跳转
index2 += 1;
$('<a name="' + '_caption' + index2 + '"></a>').insertBefore(captions_ori2[index2]);
$("#"+index+"li ul").append("<li><a href='#_caption" + index2 + "' style='color:#5f5f5f;'>" +self.innerHTML+"</a></li>");
return ;
}
});
},
runAll: function() {
/* 运行所有方法
* setAtarget() 博客园内标签新窗口打开
* setContent() 设置目录
* setCopyright() 设置版权信息
* setCodeRow() 代码行号显示
*/
this.setAtarget();
//假如为手机端不显示目录
if(document.body.clientWidth>=1000){
this.setContent();
}
// this.setCopyright();
this.setCodeRow();
}
}
setMyBlog.runAll();
var a_idx = 0;
jQuery(document).ready(function($) {
$("body").click(function(e) {
var a = new Array("❤我爱你❤","❤无畏❤","❤人海❤","❤的拥挤❤","❤用尽❤","❤余生❤","❤的勇气❤","❤只为❤","❤能靠近你❤","❤哪怕❤","❤一❤","❤厘米❤","❤爱上你❤","❤是我❤","❤落下❤","❤的险棋❤","❤不惧❤","❤岁月❤","❤的更替❤","❤往后❤","❤的潮汐❤","❤无论❤","❤风雨❤","❤是你❤","❤就足以❤");
var $i = $("<span></span>").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
},
1500,
function() {
$i.remove();
});
});
});
</script>
<!--网页icon图标 -->
<script type="text/javascript" language="javascript">
//Setting ico for cnblogs
var linkObject = document.createElement('link');
linkObject.rel = "shortcut icon";
linkObject.href = "https://files-cdn.cnblogs.com/files/menxin-/20191008025811159_easyicon_net_32.ico";
document.getElementsByTagName("head")[0].appendChild(linkObject);
</script>
然后保存,大功告成!
浙公网安备 33010602011771号