部落格園樣式美化
阿新 • • 發佈：2019-08-07
前言
部落格園有著豐富的部落格面板（目前有124個），部落格樣式按說應該足夠豐富了，總有一款適合我們吧？但作為一名專業的程式設計師，有時候我們想要有自己的一些自定義操作
1、賬號設定 -> 部落格設定
2、向部落格園申請js許可權
3、在以下位置定製程式碼
有了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;
}
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
效果
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
效果就是這個
後記
由於本人不是專業前端，更多騷操作都沒涉及到，之前看到有好多優秀的部落格頁面美化，更多騷操作歡迎大家評論