首先，需要在博客园里申请JS权限，成功后会在博客侧边栏公告那行看到有支持JS代码的一句话
现在开始美化博客
首先，个人认为darkgreentrip比较好看，不太暗，也不刺眼，所以下面一段页面定制代码是针对darkgreentrip的，喜欢其他主体也可以照这个代码改
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)
} ();
#home {
margin: 0 auto;
width: 80%;/*原始65*/
min-width: 980px;/*页面顶部的宽度*/
background-color: rgba(245, 245, 245, 0.7);
padding: 30px;
margin-top: 50px;
margin-bottom: 50px;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
#blogTitle {
height: 100px; /*高度*/
clear: both;
background-color: rgba(245, 245, 245, 0);
}
#blogTitle h1 {
font-size: 36px;
font-weight: bold;
line-height: 1.8em;/*原始 1.6em*/
margin-top: 10px;/*原始 15px */
color: #548B54;
}
#blogTitle h2 {
font-weight: normal;
font-size: 17px;/*原始 16px ；font-size: 1.0rem;*/
line-height: 1.8;
color: #111;
font-weight: bold;
text-align: right;
float: right;
}
#navigator{
background-color: rgba(33, 160, 139, 0.9);
}
#navList a:link, #navList a:visited, #navList a:active{
color: #eee;
font-size: 18px;
font-weight: bold;
}
.blogStats{
color: #eee;
}
.postTitle {
border-left: 8px solid rgba(33, 160, 139, 0.68);
margin-left: 10px;
margin-bottom: 10px;
font-size: 20px;
float: right;
width: 100%;
clear: both;
}
.postTitle a:link, .postTitle a:visited, .postTitle a:active {
color: #21759b;
transition: all 0.4s linear 0s;
}
.postTitle a:hover {
margin-left: 30px;
color: #0f3647;
text-decoration: none;
}
.postCon {
float: right;
line-height: 1.5em;
width: 100%;
clear: both;
padding: 10px 0;
}
.day .postTitle a {
padding-left: 10px;
}
.day {
background: rgba(255, 255, 255, 0.5);
}
/*文章附加信息*/
.postDesc {
background: url(images/posted_time.png) no-repeat 0 1px;
color: #757575;
float: left;
width: 100%;
clear: both;
text-align: left;
font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
font-size: 13px;
padding-right: 20px;/*5px padding-left: 90px;posted 发表时间左边距离*/
margin-top: 20px;
line-height: 1.8;
padding-bottom: 35px;
}
.newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory,
.catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView,
.catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory ,#blog-calendar
{
background: rgba(255, 255, 255, 0.5);
margin-bottom: 35px;
word-wrap: break-word;
}
.CalTitle{
background: rgba(255, 255, 255, 0);
}
.catListTitle{
background-color: rgba(33, 160, 139, 0.9);
}
#topics{
background: rgba(255, 255, 255, 0.5);
}
.c_ad_block{
display: none;
}
#tbCommentBody{
width: 100%;
height: 200px;
background: rgba(255, 255, 255, 0.5);
}
#q{background: rgba(255, 255, 255, 0);}
.CalNextPrev{background: rgba(255, 255, 255, 0);}
.cnblogs_code{
background: rgba(255, 255, 255, 0);
}
.cnblogs_code div{
background: rgba(255, 255, 255, 0);
}
.cnblogs_code_toolbar{
background: rgba(255, 255, 255, 0);
}
.entrylist{
background: rgba(255, 255, 255, 0.5);
}
下面代码就适合所有主题啦
推荐和反对
#div_digg {
padding: 10px;
position: fixed;
_position: absolute;
z-index: 1000;
bottom: 20px;
right: 0;
_right: 17px;
border: 1px solid #D9DBE1;
background-color: #FFFFFF;
filter: alpha(Opacity=80);
-moz-opacity: 0.8;
opacity: 0.8;
}
.icon_favorite {
background: transparent url('http://files.cnblogs.com/files/jackson0714/kj.gif') no-repeat 0 0;
padding-left: 16px;
}
#blog_post_info_block a {
text-decoration: none;
color: #5B9DCA;
padding: 3px;
}
body{
background-image: url("");
background-repeat: repeat;
background-attachment: fixed;
background-size:cover;
cursor: url(https://files.cnblogs.com/files/wkfvawl/cursor.ico),auto;
}
#back-to-top {
background-color: #00CD00;
bottom: 0;
box-shadow: 0 0 6px #00CD00;
color: #444444;
padding: 10px 10px;
position: fixed;
right: 50px;
cursor: pointer;
}
关注和收藏等按钮
#green_channel {
padding: 5px 0 15px 0;
margin-bottom: 10px;
margin-top: 10px;
border: 0;
border-top: #eee 1px dashed;
border-bottom: #eee 1px dashed;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: rgb(238, 238, 238);
font-size: 12px;
width: 100%!important;
text-align: center;
display: inline-block;
vertical-align: middle;
}
a#green_channel_digg, a#green_channel_follow, a#green_channel_favorite, a#green_channel_weibo, a#green_channel_wechat {
text-decoration: none;
color: #fff;
margin: auto;
width: 80px;
display: inline-block;
line-height: 30px;
font-size: 15px;
font-weight: 500;
letter-spacing: 2px;
border-radius: 3px;
text-transform: uppercase;
transition: all .4s;
-webkit-transition: all .4s;
-moz-transition: all .4s;
-ms-transition: all .4s;
-o-transition: all .4s;
position: relative;
margin-left: 10px;
background-image: none;
margin-top: 10px;
}
a#green_channel_digg {
background-color: #2daebf;
box-shadow: 0 15px 18px -6px rgba(95,193,206,0.65);
}
a#green_channel_favorite {
background-color: #ffb515;
box-shadow: 0 15px 18px -6px rgba(255,198,75,0.65);
margin-left: 10px;
}
a#green_channel_follow {
background-color: #e33100!important;
box-shadow: 0 15px 18px -6px rgba(227,49,0,0.65);
margin-left: 10px;
}
a#green_channel_wechat {
padding: 3px 8px!important;
background-color: #3cb034!important;
box-shadow: 0 15px 18px -6px rgba(60,176,52,0.65)!important;
margin-left: 10px;
width: 35px;
}
a#green_channel_weibo {
padding: 3px 8px!important;
background-color: #ff464b!important;
box-shadow: 0 15px 18px -6px rgba(255,70,75,0.65)!important;
margin-left: 10px;
width: 35px;
}
头像边框
#author_profile_info img.author_avatar {
border-radius: 100%;
box-shadow: inset 1px 1px 3px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.4);
border: 3px solid #f7f7f7;
padding: 0;
margin-left: 3px;
margin-right: 7px;
}
禁用下划线
.postBody a:link, .postBody a:visited, .postBody a:active {
text-decoration: none;
}
上下一篇
#post_next_prev {
font-size: 14px;
color: #535353;
}
邪恶地删除掉反对按钮
.buryit{
display: none;
}
屏蔽广告
#ad_t2 {
display: none;
}
.c_ad_block {
display: none;
}
编辑和收藏
#topics .postDesc a {
background-color: #51C332;
border-radius: 3px;
text-align: center;
color: white;
text-shadow: 1px 1px 2px #8B0000;
padding: 3.7px 13px;
font-size: 14px;
font-weight: bold;
line-height: 1.5;
margin: 10px 3px;
box-shadow: black 0px 2px 8px;
}
图片自动放大
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 300px;
height: 300px;
border: #000 solid 1px;
margin: 50px auto;
overflow: hidden;
}
div img{
cursor: pointer;
transition: all 0.6s;
}
div img:hover{
transform: scale(1.1);
}
</style>
</head>
<body>
<div>
<img src="img/focus.png" />
</div>
</body>
</html>
背景线条和雪花
! function (e) {
function t(t) {
for (var o, a, c = t[0], u = t[1], s = t[2], l = 0, p = []; l < c.length; l++) a = c[l], r[a] && p.push(r[a][0]), r[a] = 0;
for (o in u) Object.prototype.hasOwnProperty.call(u, o) && (e[o] = u[o]);
for (f && f(t); p.length;) p.shift()();
return i.push.apply(i, s || []), n()
}
function n() {
for (var e, t = 0; t < i.length; t++) {
for (var n = i[t], o = !0, c = 1; c < n.length; c++) {
var u = n[c];
0 !== r[u] && (o = !1)
}
o && (i.splice(t--, 1), e = a(a.s = n[0]))
}
return e
}
var o = {},
r = {
4: 0
},
i = [];
function a(t) {
if (o[t]) return o[t].exports;
var n = o[t] = {
i: t,
l: !1,
exports: {}
};
return e[t].call(n.exports, n, n.exports, a), n.l = !0, n.exports
}
a.m = e, a.c = o, a.d = function (e, t, n) {
a.o(e, t) || Object.defineProperty(e, t, {
enumerable: !0,
get: n
})
}, a.r = function (e) {
"undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, {
value: "Module"
}), Object.defineProperty(e, "__esModule", {
value: !0
})
}, a.t = function (e, t) {
if (1 & t && (e = a(e)), 8 & t) return e;
if (4 & t && "object" == typeof e && e && e.__esModule) return e;
var n = Object.create(null);
if (a.r(n), Object.defineProperty(n, "default", {
enumerable: !0,
value: e
}), 2 & t && "string" != typeof e)
for (var o in e) a.d(n, o, function (t) {
return e[t]
}.bind(null, o));
return n
}, a.n = function (e) {
var t = e && e.__esModule ? function () {
return e.default
} : function () {
return e
};
return a.d(t, "a", t), t
}, a.o = function (e, t) {
return Object.prototype.hasOwnProperty.call(e, t)
}, a.p = "";
var c = window.webpackJsonp = window.webpackJsonp || [],
u = c.push.bind(c);
c.push = t, c = c.slice();
for (var s = 0; s < c.length; s++) t(c[s]);
var f = u;
i.push([30, 0]), n()
}({
27: function (e, t, n) {},
30: function (e, t, n) {
"use strict";
n.r(t);
var o = n(1),
r = n(6),
i = n(15),
a = n(10),
c = n(9),
u = n(2),
s = n(11),
f = n(7),
l = n(8),
p = n(34),
y = n(37),
h = n(35),
b = n(36);
function d(e) {
return (d = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (e) {
return typeof e
} : function (e) {
return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e
})(e)
}
function v(e, t) {
for (var n = 0; n < t.length; n++) {
var o = t[n];
o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, o.key, o)
}
}
function w(e, t) {
return !t || "object" !== d(t) && "function" != typeof t ? function (e) {
if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
return e
}(e) : t
}
function m(e) {
return (m = Object.setPrototypeOf ? Object.getPrototypeOf : function (e) {
return e.__proto__ || Object.getPrototypeOf(e)
})(e)
}
function O(e, t) {
return (O = Object.setPrototypeOf || function (e, t) {
return e.__proto__ = t, e
})(e, t)
}
var g, j, P = n(4);
n(14), n(27);
function S(e, t) {
for (var n = 0; n < t.length; n++) {
var o = t[n];
o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, o.key, o)
}
}
function _(e, t, n) {
return (_ = "undefined" != typeof Reflect && Reflect.get ? Reflect.get : function (e, t, n) {
var o = function (e, t) {
for (; !Object.prototype.hasOwnProperty.call(e, t) && null !== (e = F(e)););
return e
}(e, t);
if (o) {
var r = Object.getOwnPropertyDescriptor(o, t);
return r.get ? r.get.call(n) : r.value
}
})(e, t, n || e)
}
function k(e) {
return (k = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (e) {
return typeof e
} : function (e) {
return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e
})(e)
}
function M(e, t) {
if (!(e instanceof t)) throw new TypeError("Cannot call a class as a function")
}
function x(e, t) {
return !t || "object" !== k(t) && "function" != typeof t ? function (e) {
if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
return e
}(e) : t
}
function F(e) {
return (F = Object.setPrototypeOf ? Object.getPrototypeOf : function (e) {
return e.__proto__ || Object.getPrototypeOf(e)
})(e)
}
function T(e, t) {
if ("function" != typeof t && null !== t) throw new TypeError("Super expression must either be null or a function");
e.prototype = Object.create(t && t.prototype, {
constructor: {
value: e,
writable: !0,
configurable: !0
}
}), t && z(e, t)
}
function z(e, t) {
return (z = Object.setPrototypeOf || function (e, t) {
return e.__proto__ = t, e
})(e, t)
}
var E, L = new(g = Object(f.a)({
x: 1,
y: 1
}, .1), Object(l.a)((E = j = g(j = function (e) {
function t() {
return M(this, t), x(this, F(t).apply(this, arguments))
}
return T(t, r["a"]), t
}()) || j, j = function (e) {
function t(e) {
var n;
return function (e, t) {
if (!(e instanceof t)) throw new TypeError("Cannot call a class as a function")
}(this, t), (n = w(this, m(t).call(this, e))).clock = new o.Clock, n.currentPass = !1, n.effects = {}, n.passes = [], n.composer = new p.a(n.renderer, {}), n.effects.render = new y.a(n.scene, n.camera), n.addPass(n.effects.render), n
}
var n, r, i;
return function (e, t) {
if ("function" != typeof t && null !== t) throw new TypeError("Super expression must either be null or a function");
e.prototype = Object.create(t && t.prototype, {
constructor: {
value: e,
writable: !0,
configurable: !0
}
}), t && O(e, t)
}(t, E), n = t, (r = [{
key: "addBloomEffect",
value: function (e, t) {
this.effects.bloom = new h.a(e), this.effects.bloom.blendMode.opacity.value = t, this.addPass(new b.a(this.camera, this.effects.bloom))
}
}, {
key: "addPass",
value: function (e) {
this.passes.length && (this.passes[this.passes.length - 1].renderToScreen = !1), this.passes.push(e), this.composer.addPass(e), this.passes[this.passes.length - 1].renderToScreen = !0
}
}, {
key: "render",
value: function () {
this.composer.render(this.clock.getDelta())
}
}, {
key: "resizeRender",
value: function () {
this.composer && this.composer.setSize(this.width, this.height)
}
}]) && v(n.prototype, r), i && v(n, i), t
}() || j)) || j);
L.camera.position.z = 2, L.addBloomEffect({
resolutionScale: .5,
kernelSize: 4,
distinction: .01
}, 1);
var R = new i.a;
R.update = function () {
R.rotation.y -= 4e-4, R.rotation.x -= 2e-4
}, L.add(R);
var A = new o.Vector3,
B = new o.Vector3,
I = new o.Raycaster,
D = new o.SphereBufferGeometry(4, 32, 32, 0, 3.2, 4, 2.1),
J = new o.MeshBasicMaterial({
wireframe: !0,
visible: !1
}),
V = new o.Mesh(D, J);
L.add(V), V.position.z = 2;
var q = ["#FFFAFF", "#0A2463", "#3E92CC", "#723bb7", "#efd28e", "#3f9d8c"].map(function (e) {
return new o.Color(e)
}),
G = new(function (e) {
function t() {
return M(this, t), x(this, F(t).apply(this, arguments))
}
var n, o, r;
return T(t, c["a"]), n = t, (o = [{
key: "addLine",
value: function () {
for (var e = Object(u.a)(-2.4, 7.2), n = -25 * Math.PI / 180, o = 200 * Math.PI / 180, r = []; n < o;) {
n += .2, e -= .1, A.set(4 * Math.cos(n), e, 4 * Math.sin(n)), B.set(-A.x, 0, -A.z), B.normalize(), I.set(A, B);
var i = I.intersectObject(V, !0);
i.length && r.push(i[0].point.x, i[0].point.y, i[0].point.z)
}
0 !== r.length && (Math.random() > .5 ? _(F(t.prototype), "addLine", this).call(this, {
visibleLength: Object(u.a)(.01, .2),
points: r,
speed: Object(u.a)(.003, .008),
color: Object(s.a)(q),
width: Object(u.a)(.01, .1)
}) : _(F(t.prototype), "addLine", this).call(this, {
visibleLength: Object(u.a)(.05, .2),
points: r,
speed: Object(u.a)(.01, .1),
color: q[0],
width: Object(u.a)(.01, .01)
}))
}
}]) && S(n.prototype, o), r && S(n, r), t
}())({
frequency: .99
}, {
transformLineMethod: function (e) {
return e
}
});
L.add(G), L.start();
var H = new TimelineLite({
delay: .2,
onStart: function () {
G.start()
}
});
H.to(".overlay", 2, {
autoAlpha: 0
}), H.fromTo(L.lookAt, 3, {
y: -4
}, {
y: 0,
ease: Power3.easeOut
}, "-=2"), H.add(C.show, "-=2"), P.a.onHide(function (e) {
var t = new TimelineLite;
t.to(L.lookAt, 2, {
y: -6,
ease: Power3.easeInOut
}), t.add(C.hide, 0), t.add(G.stop), t.to(".overlay", .5, {
autoAlpha: 1,
onComplete: e
}, "-=1.5")
})
}
});
</script>
<script language="javascript" type="text/javascript">
离开网页时的话
GenerateContentList();
</script>
<div style = "display:none;" > 浏览器标题切换 </div>
<script>
var OriginTitile = document.title; // 保存之前页面标题
var titleTime;
document.addEventListener('visibilitychange', function(){
if (document.hidden){
document.title ='不点个赞再走吗？'; // 切出文字
clearTimeout(titleTime);
}else{
document.title = '欢迎回来～'; // 切入文字
titleTime = setTimeout(function() {
document.title = OriginTitile;
}, 1000); // 2秒后恢复原标题
}
});
</script>
<div style = "display:none;" > 浏览器标题切换end </div>
<script type="text/javascript">
鼠标点击特效
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>
<span id="back-to-top"><a href="#top">TOP</a></span>
我提供的就只有那么多，具体效果参考我的博客
#div_digg { padding: 10px; position: fixed; _position: absolute; z-index: 1000; bottom: 20px; right: 0; _right: 17px; border: 1px solid #D9DBE1; background-color: #FFFFFF; filter: alpha(Opacity=80); -moz-opacity: 0.8; opacity: 0.8;}
.icon_favorite { background: transparent url('http://files.cnblogs.com/files/jackson0714/kj.gif') no-repeat 0 0; padding-left: 16px;}
#blog_post_info_block a { text-decoration: none; color: #5B9DCA; padding: 3px;}body{ background-image: url(""); background-repeat: repeat; background-attachment: fixed; background-size:cover; cursor: url(https://files.cnblogs.com/files/wkfvawl/cursor.ico),auto;}#back-to-top { background-color: #00CD00; bottom: 0; box-shadow: 0 0 6px #00CD00; color: #444444; padding: 10px 10px; position: fixed; right: 50px; cursor: pointer;}
来源：https://www.cnblogs.com/gzezzry/p/12190233.html