?2016-2026 Matools All rights reserved,
粵ICP備17059708號
前言
博客園有著豐富的博客皮膚（目前有124個），博客樣式按說應該足夠豐富了，總有一款適合我們吧？但作為一名專業(yè)的程序員，有時候我們想要有自己的一些自定義操作
1、賬號設置 -> 博客設置
2、向博客園申請js權限
3、在以下位置定制代碼
有了HTML、CSS、JS代碼權限，就可以愉快的美化自己的博客樣式啦?
?
如何“剽
竊”他人的智慧？...
?
如果自己不擅長前端操作，可以自己喜歡的一些大佬的頁面美化效果“偷”過來，教大家一招如何“偷”別人的代碼，打開具體博客，打開F12，就可以看到該博客對博客園頁面美化的代碼了，一般在頁首、頁尾（手動滑稽臉...）
?
拿我自己的博客為例，
個人定制的CSS代碼
? 個人定制的HTML、JS代碼
?
?
我的樣式
我的博客園皮膚選的是
? 所有的優(yōu)化具體效果直接看我當前博客頁面
?
目錄彈窗
請看我之前的博客：自定義web彈窗/層：簡易風格的msg與可拖放的dialog，生成博客園文章目錄彈窗
<https://www.cnblogs.com/huanzi-qch/p/10082116.html>
效果
?
?
統(tǒng)計閱讀總數
請看我之前的博客：Web Worker——js的多線程，實現(xiàn)統(tǒng)計博客園總閱讀量
<https://www.cnblogs.com/huanzi-qch/p/10523912.html>
效果
?
?
火箭返回頂部
css
/*回到頂部*/ #rocket-to-top div { left: 0; margin: 0; overflow: hidden; padding: 0;
position: absolute; top: 0; width: 149px; } #rocket-to-top .level-2 {
background:
url("http://images.cnblogs.com/cnblogs_com/mq0036/508398/o_rocket_button_up.png")
no-repeat scroll -149px 0 transparent; display: none; height: 250px; opacity: 0;
z-index: 1; } #rocket-to-top .level-3 { background: none repeat scroll 0 0
transparent; cursor: pointer; display: block; height: 150px; z-index: 2; }
#rocket-to-top{ background:
url(http://images.cnblogs.com/cnblogs_com/mq0036/508398/o_rocket_button_up.png)
no-repeat scroll 0 0 transparent; height: 250px; margin: -125px 0 0; overflow:
hidden; padding: 0; position: fixed; right: 0%; top: 97%; width: 145px; z-index:
11; display: none; } View Code
?
js
<script type="text/javascript"> // jQuery火箭圖標返回頂部代碼 $(function() { var e =
$("#rocket-to-top"), t = $(document).scrollTop(), n, r, i = !0;
$(window).scroll(function() { //只監(jiān)聽博客詳情頁面 if($("#post_detail").length == 0 ){
return ; } var t = $(document).scrollTop(); t == 0 ?
e.css("background-position") == "0px 0px" ? e.fadeOut("slow") : i && (i = !1,
$(".level-2").css("opacity", 1), e.delay(100).animate({ marginTop: "-1000px" },
"normal", function() { e.css({ "margin-top": "-125px", display: "none" }), i =
!0 })) : e.fadeIn("slow") }), e.hover(function() { $(".level-2").stop(!0
).animate({ opacity:1 }) }, function() { $(".level-2").stop(!0).animate({
opacity:0 }) }), $(".level-3").click(function() { tip.msg("火箭發(fā)射~~"); function
t() {var t = e.css("background-position"); if (e.css("display") == "none" || i
== 0) { clearInterval(n), e.css("background-position", "0px 0px"); return }
switch (t){ case "0px 0px": e.css("background-position", "-298px 0px"); break;
case "-298px 0px": e.css("background-position", "-447px 0px"); break; case
"-447px 0px": e.css("background-position", "-596px 0px"); break; case "-596px
0px": e.css("background-position", "-745px 0px"); break; case "-745px 0px":
e.css("background-position", "-298px 0px"); } } if (!i) return; n =
setInterval(t, 50), $("html,body").animate({scrollTop: 0},"slow"); }); });
</script> View Code
?
html
<!-- 火箭 --> <div style="display: none;" id="rocket-to-top"> <div style
="opacity:0;display: block;" class="level-2"></div> <div class="level-3"></div>
</div> View Code
? 效果
??
?
?
?
特效愛心
js
// 鼠標特效，心 window.onclick = function(event) { var heart =
document.createElement("b"); heart.onselectstart = new Function('
event.returnValue=false'); document.body.appendChild(heart).innerHTML = "?";
heart.style.cssText= "position: fixed;left:-100%;"; var f = 16, // 字體大小 x =
event.clientX - f /2, // 橫坐標 y = event.clientY - f, // 縱坐標 c = randomColor(), //
隨機顏色 a= 1, // 透明度 s = 1.2; // 放大縮小 var timer = setInterval(function() { if (a
<=0) { document.body.removeChild(heart); clearInterval(timer); } else {
heart.style.cssText= "font-size:16px;cursor: default;position: fixed;color:" +
c +";left:" + x + "px;top:" + y + "px;opacity:" + a + ";transform:scale(" + s +
");"; y--; a -= 0.016; s += 0.002; } }, 12) } // 隨機顏色 function randomColor() {
return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + ",
" + (~~(Math.random() * 255)) + ")"; } View Code
? 效果，單擊鼠標左鍵
?
背景線條
引入這個js
<!--網頁動態(tài)背景——隨鼠標變換的動態(tài)線條--> <script type="text/javascript" src
="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>
效果?
?
求打賞插件
引入這個js
<!--引入求打賞插件--> <script src="https://static.tctip.com/tctip-1.0.0.min.js"></
script>
然后初始化
//求打賞 new tctip({ top: '20%', button: { id: 9, type: 'dashang', }, list: [ { //
支付寶收款碼圖片，先事先上傳到博客園 type: 'alipay', qrImg:
'https://files.cnblogs.com/files/huanzi-qch/1540353568326.bmp' }, { //
微信收款碼圖片，先事先上傳到博客園 type: 'wechat', qrImg:
'https://files.cnblogs.com/files/huanzi-qch/1540353592438.bmp' } ] }).init();
View Code
? 效果
?
css常規(guī)操作
/*屏蔽廣告*/ #ad_t2 { display: none; } .c_ad_block { display: none; } /* 推薦及反對 */
#div_digg{ position: fixed; bottom: 25px; right: 120px; width: 50px; border:
2px solid #CBCFD2; padding: 10px; background-color: #ffffff9e; border-radius:
5px 5px 5px 5px !important; z-index: 1; } /* 反對 */ .buryit { display: none; } /*
版權*/ #MySignature { border: #e0e0e0 1px dashed; padding: 10px; font-family:
微軟雅黑; font-size: 11px; background-color: #fcffe3; line-height: 25px; display:
block; } /*隱藏搜索*/ #sidebar_search{ display: none; } /*隱藏常用鏈接*/ #sidebar_shortcut
{ display: none; }
?
轉載說明
? 轉載說明是在博客簽名進行設置
<div>作者：<a href="https://www.cnblogs.com/huanzi-qch/" target="_blank">
huanzi-qch</a></div> <div>出處：<a href="https://www.cnblogs.com/huanzi-qch/"
target="_blank">https://www.cnblogs.com/huanzi-qch/</a></div> <div>
若標題中有“轉載”字樣，則本文版權歸原作者所有。若無轉載字樣，本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利.
</div> <div><span style="color: red">請注意：</span>作者五行缺錢，如果喜歡這篇文章，請隨意打賞！</div>
View Code
效果就是這個
?
后記
? 由于本人不是專業(yè)前端，更多騷操作都沒涉及到，之前看到有好多優(yōu)秀的博客頁面美化，更多騷操作歡迎大家評論分享
熱門工具 換一換