博客園樣式美化

　　前言

　　博客園有着豐富的博客皮膚（目前有124個），博客樣式按說應該足夠豐富了，總有一款適合咱們吧？但做爲一名專業的程序員，有時候咱們想要有本身的一些自定義操做

　　一、帳號設置 -> 博客設置

　　二、向博客園申請js權限

　　三、在如下位置定製代碼

　　有了HTML、CSS、JS代碼權限，就能夠愉快的美化本身的博客樣式啦 

 

　　如何「剽

　　竊」他人的智慧？...

 

　　若是本身不擅長前端操做，能夠本身喜歡的一些大佬的頁面美化效果「偷」過來，教你們一招如何「偷」別人的代碼，打開具體博客，打開F12，就能夠看到該博客對博客園頁面美化的代碼了，通常在頁首、頁尾（手動滑稽臉...）

 

　　拿我本身的博客爲例，

　　我的定製的CSS代碼

 　　我的定製的HTML、JS代碼

　　

 

 

　　個人樣式

　　個人博客園皮膚選的是

 　　全部的優化具體效果直接看我當前博客頁面

 

　　目錄彈窗

　　請看我以前的博客：自定義web彈窗/層：簡易風格的msg與可拖放的dialog，生成博客園文章目錄彈窗

　　效果

 

 

　　統計閱讀總數

　　請看我以前的博客：Web Worker——js的多線程，實現統計博客園總閱讀量

　　效果

 

 

　　火箭返回頂部

　　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() { //只監聽博客詳情頁面
            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("火箭發射~~"); 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

<!--網頁動態背景——隨鼠標變換的動態線條-->
<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

 　　效果

 

　　2020-01-08更新：這個打賞插件時不時會莫名報錯，如今我已經註釋起來，不用它了，改爲直接在版權聲明下面貼出二維碼

 

 

 

　　css常規操做

/*屏蔽廣告*/ #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

　　效果就是這個

 

　　後記

 　　因爲本人不是專業前端，更多騷操做都沒涉及到，以前看到有好多優秀的博客頁面美化，更多騷操做歡迎你們評論分享

原文出處：https://www.cnblogs.com/huanzi-qch/p/11313934.html