好羨慕二次元大佬們的博客園,大佬們估計都是禁用模板樣式而後本身寫一套。javascript
然而向我這樣的cai ji 只能稍微改改樣式。css
一種是不須要js權限的:前端
好比在頁腳HTML,頁首HTML里加點結構,java
在頁腳HTML裏複製粘貼以下代碼 jquery
<div class="scrollBtn" id="scrollBtn"> <ul class="clearfix"><li class="sB-goTop" id="goTop" style="display: list-item"> <a href="#top" title="回頂部"></a> </li> </ul> </div>
在頁面定製css裏複製以下代碼:css3
.scrollBtn { position: fixed; right: 15px; bottom: 45px; width: 54px } .scrollBtn a { display: inline-block; width: 54px; -webkit-transition: opacity .5s ease; transition: opacity .5s ease; text-align: center; opacity: .6; color: #fff; background: url(http://images2015.cnblogs.com/blog/459873/201601/459873-20160127210900473-1080897398.png) no-repeat; filter: alpha(opacity=60) } .scrollBtn li { float: left; margin-bottom: 5px } .scrollBtn a:hover { opacity: 1; filter: alpha(opacity=100) } .scrollBtn a, .scrollBtn li { overflow: hidden; height: 54px }
保存設置, 去你的隨筆裏就能夠在右下角看到一個·回到頂部的方塊。web
---------------------------------------------------------------------------------------------canvas
再好比給你的博客加個頭像, 在設置裏的標題前面加上:app
<span class="portrait"></span>dom
你的標題
再在頁面定製css裏改下樣式,甚至能夠用css3加上動畫,基礎樣式能夠參考:
.portrait { display: block; position: absolute; left: 0; top: 0; width: 100px; height: 100px; overflow: hidden; background-image: url("你的圖片地址"); background-size: 100% 100%; border-radius: 50%; background-repeat: no-repeat; overflow: hidden; transform-origin: center center; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
url 改爲 你的圖片地址, 而後保存。
也能夠把全部的css樣式寫在一個文件裏, 而後再點 管理 =》文件 =》 上傳 到博客園,
上傳完成後點擊文件名就能夠看到url 了,而後在頁首HTML裏用link 標籤引入 這個文件:
<link href="你的url" rel="stylesheet">
基於此,若是你想徹底定製你的博客園的話, 就禁用模板css
而後從新寫一套css 引入進去, 怎麼調樣式不用我多說了把,打開谷歌控制檯,調css所見即所得。
ps(樣式沒加上多是權重不夠,實在沒辦法加上!important把權重提到最高)
================================================================
然而這樣徹底沒有知足前端童鞋的需求,你須要js權限
怎麼申請js權限, 很簡單
博客側邊欄公告右邊,若是你沒有js權限的話, 右邊是一個申請權限的按鈕,點擊有個彈窗,
你須要輸入你爲何要申請js權限,你們自由發揮,考驗小學語文的時候到了,而後等1 到 2 個小時就行了。
有js權限之後, 你就能夠引入別人封裝好的特效了,固然牛逼也能夠本身寫。
爛大街的特效 : 1 隨鼠標移動的線條 , 在頁腳HTML種插入:
<script type="text/javascript" color="47,135,193" opacity='0.5' zIndex="-2" count="199" src="http://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>
參數能夠本身改: color : 線條顏色rgb, opacity:透明的 , z-indx:層級, count:數量
2, 雪花飄落,下載jquery 和 jQuery.snow.js 而後上傳到博客園,再用script標籤引入進頁首HTML,
嫌麻煩的能夠直接用別人的233333
<script src="https://blog-static.cnblogs.com/files/zhonglinke/jquery-1.7.1.min.js"></script>
<script src="https://files.cnblogs.com/files/zhonglinke/jquery.snow.js"></script>
3 點擊特效 , 同理複製下面代碼到一個js文件並上傳到博客園
/* 鼠標特效 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, 嫌麻煩的直接引入:<script src="https://files.cnblogs.com/files/zhonglinke/my.js"></script>
看到這裏你們應該摸清楚了吧, 理論上來講你想要什麼特效插件, 上最大同性交友網站上搜出來,下載或者克隆到本地
再把壓縮文件上傳到博客園就好了,剩下的道友們自由發揮吧!!!