从零开始调整自己的博客外观
作为一位初来乍到的小白,想把自己博客的页面变得好看点,广搜资料,一步一步定制自己的博客外观
首先得申请JS权限,在博客园设置的这个地方(没有权限点击申请JS权限,然后等管理员同意),有权限后后面的外观特效就会出现
一.实现粒子特效
这个特效是我觉得最好看的特效,我迫不及待的就去尝试了,果然没让我失望,首先在文件里面上传一个js.js名字的JavaScript代码,代码内容如下:
! function() { function o(w, v, i) { return w.getAttribute(v) || i } function j(i) { return document.getElementsByTagName(i) } function l() { var i = j("script"), w = i.length, v = i[w - 1]; return { l: w, z: o(v, "zIndex", -2), o: o(v, "opacity", 0.8), c: o(v, "color", "101,255,115"), n: o(v, "count", 300) } } function k() { r = u.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, n = u.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight } function b() { e.clearRect(0, 0, r, n); var w = [f].concat(t); var x, v, A, B, z, y; t.forEach(function(i) { i.x += i.xa, i.y += i.ya, i.xa *= i.x > r || i.x < 0 ? -1 : 1, i.ya *= i.y > n || i.y < 0 ? -1 : 1, e.fillRect(i.x - 0.5, i.y - 0.5, 1, 1); for (v = 0; v < w.length; v++) { x = w[v]; if (i !== x && null !== x.x && null !== x.y) { B = i.x - x.x, z = i.y - x.y, y = B * B + z * z; y < x.max && (x === f && y >= x.max / 2 && (i.x -= 0.03 * B, i.y -= 0.03 * z), A = (x.max - y) / x.max, e.beginPath(), e.lineWidth = A / 2, e.strokeStyle = "rgba(" + s.c + "," + (A + 0.2) + ")", e.moveTo(i.x, i.y), e.lineTo(x.x, x.y), e.stroke()) } } w.splice(w.indexOf(i), 1) }), m(b) } var u = document.createElement("canvas"), s = l(), c = "c_n" + s.l, e = u.getContext("2d"), r, n, m = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(i) { window.setTimeout(i, 1000 / 45) }, a = Math.random, f = { x: null, y: null, max: 20000 }; u.id = c; u.style.cssText = "position:fixed;top:0;left:0;z-index:" + s.z + ";opacity:" + s.o; j("body")[0].appendChild(u); k(), window.onresize = k; window.onmousemove = function(i) { i = i || window.event, f.x = i.clientX, f.y = i.clientY }, window.onmouseout = function() { f.x = null, f.y = null }; for (var t = [], p = 0; s.n > p; p++) { var h = a() * r, g = a() * n, q = 2 * a() - 1, d = 2 * a() - 1; t.push({ x: h, y: g, xa: q, ya: d, max: 6000 }) } setTimeout(function() { b() }, 100) } (); js
效果图如下所示:
然后在设置页面HTML页脚处写下如下代码(只有JS权限通过才能出现特效),记住把51selfstudy改为自己的路径,color后的值为颜色RGB值,opacity是透明度,cout是粒子数量,保存即可,刷新页面。
<script id="c_n_script" src="https://files.cnblogs.com/files/51selfstudy/js.js" color="240,230,140" opacity="1" count="75" zindex="-2"> if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) { } else { } </script>
二.快速评论
将下面这段代码放置在页面定制CSS处
/* 定制推荐和反对按键 */
#div_digg{
position:fixed;
bottom:10px;
width:140px;
right:15px;
box-shadow: 0 0 6px #5F5A4B;
border:2px solid #ECD7B1;
padding:4px;
background-color:#fff;
border-radius:4px 4px 4px 4px !important;
}
.icon_favorite {
background: transparent url('http://images.cnblogs.com/cnblogs_com/shwee/1218109/o_kj.gif') no-repeat 0 0;
padding-left: 15px;
}
#blog_post_info_block a {
text-decoration: none;
color: #5B9DCA;
padding: 3px;
}
会有如下效果
三.鼠标点击特效
放入页首HTML代码下,然后保存,刷新页面点击鼠标即会出现特效
<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>
四.加个各个国家访问统计
在访问旗帜网站中注册一个自己的旗帜,输入邮箱,会得到一个验证码邮件,进邮件的链接,得到属于自己的计数器,我得到的代码如下,会显示在我博客的右上角,将代码复制到博客侧边栏公告(支持HTML代码)处,保存然后刷新即可。
<a href="https://info.flagcounter.com/6FbY"><img src="https://s11.flagcounter.com/count2/6FbY/bg_FFFFFF/txt_000000/border_CCCCCC/columns_2/maxflags_10/viewers_0/labels_0/pageviews_0/flags_0/percent_0/" alt="Free counters!" border="0"></a>
生成效果如下
五.评论打字出现礼花特效
先在博客文件处上传一个JS文件,链接: activate-power-mode.js 提取码: fwq4
然后在页脚Html代码处写上以下代码,注意改下路径,将51selfstudy这部分改为自己的即可,保存刷新。
<script src="https://files.cnblogs.com/files/51selfstudy/activate-power-mode.js"></script> <script> POWERMODE.colorful = true; // 控制开启/开启礼花特效 POWERMODE.shake = false; // 控制开启/关闭屏幕震动特效 document.body.addEventListener('input', POWERMODE); </script>
六.添加头像
在个人主页对头像右键复制得到自己头像链接
然后在博客侧边栏公告处写下如下代码,把链接改为自己的头像链接即可,刷新保存
<img src="https://pic.cnblogs.com/avatar/1624679/20190308164722.png" alt="zzx" class="img_avatar" width="230px" style="border-radius:50%">
参考:
https://www.cnblogs.com/xiaokang01/p/10125821.html(粒子特效)
https://www.cnblogs.com/zhaopei/p/4174811.html(快速评论)
https://www.cnblogs.com/xiaokang01/p/9911501.html(鼠标点击特效)
https://www.cnblogs.com/wangkun1993/p/7237978.html(其它国家访问人数统计)
https://laod.cn/page/javascript-texiao.html(评论打字输出礼花特效)
https://www.cnblogs.com/ZhaoxiCheung/p/CustomizeBlog.html(添加头像)