自定義美化博客園

  最近發現,好多排名靠前的技術博客,首先是排版特別美觀,而後博客CSS佈局也是自定義設置的,故在網上找了些例子,對本身博客進行了小小改動,將部分代碼及連接分享給你們!css

美化博客內容

 1 /* 設置博客正文一二三級標題格式 */
 2 /* 一級標題 */
 3 #cnblogs_post_body h1 {
 4  font-size: 28px;
 5  font-weight: bold;
 6  line-height: 1.5;
 7  color: black;
 8  margin: 10px 0;
 9 }
10 /* 二級標題 */
11 #cnblogs_post_body h2 {
12  font-size: 24px;
13  font-weight: bold;
14  line-height: 1.5;
15  color: whitesmoke;
16  background-color: royalblue;
17  margin: 10px 0;
18 }
19 /* 三級標題 */
20 #cnblogs_post_body h3 {
21  font-size: 20px;
22  font-weight: bold;
23  line-height: 1.5;
24  color: whitesmoke;
25  background-color: dimgrey;
26 }
27 /* 正文 */
28 #cnblogs_post_body p {
29  font-size: 12pt;
30 }

美化簽名

/* 設置簽名格式 */ #MySignature { display: none; background-color: #B2E866; border-radius: 10px; box-shadow: 1px 1px 1px #6B6B6B; padding: 10px; line-height: 1.5; text-shadow: 1px 1px 1px #FFF; font-size: 16px; font-family: 'Microsoft Yahei';
}

美化推薦及反對

設置推薦及反對按鈕在頁面右下角浮動顯示,屏蔽反對按鈕。html

/* 推薦及反對 */ #div_digg { padding: 5px; position: fixed; z-index: 1000; bottom: 0px; right: 0; border: 0px solid #D9DBE1; background-color: #FFFFFF; opacity: 0.8; width: 46px; float: right; margin-bottom: 10px; margin-right: 10px; font-size: 12px; text-align: center; margin-top: 10px; border: 2px solid red;
}
/* ignore反對 */ .buryit { display: none;
}
/*推薦框 懸浮 */ #div_digg { position: fixed; bottom: 5px; width: 140px; right: 300px; border: 2px solid #edd7b2; padding: 10px; background-color: #fff; border-radius: 5px 5px 5px 5px !important; box-shadow: 0 0 0 1px #ecd7b1, 1px 1px 6px 1px rgba(10, 10, 0, 0.5); }

屏蔽廣告

/* adblock */ #ad_t2 { display: none;
} .c_ad_block { display: none;
}

美化博客側邊欄公告

插入時鐘: 
http://www.blogclock.cn/ 
插入訪客來源: 
http://s11.flagcounter.com/more/Fe64/ 
插入總訪客數: 
http://www.amazingcounters.com/ 
插入QQ通信組件: 
https://connect.qq.com/intro/wpaweb

生成後的代碼放在【博客側邊欄公告(支持HTML代碼)(支持JS代碼)】中。app

增長打賞功能:

請參考:http://www.cnblogs.com/greedying/p/6483222.html編輯器

添加目錄/制定功能:

請參考:https://www.cnblogs.com/miangao/p/6846916.html工具

頁首自動生成目錄功能:

請參考:https://www.cnblogs.com/chinas/p/6088341.html佈局

程序演示效果GIF圖錄制:

請參考:http://blog.bahraniapps.com/gifcam/#downloadpost

Typora 高效編寫,並快捷同步到博客園

Typora 是一款跨平臺(Windows/Mac/Linux)的功能強大的MarkDown編輯器,實用性很是高。學習

並使用博主本身開發的.NET Core開發的工具快速將博客同步到博客園。區塊鏈

請參考:https://www.cnblogs.com/stulzq/p/9043632.html

設置頁面禁止複製功能:

  一、經過css的方式,添加CSS代碼:

/* 禁止頁面,選中 複製 */ html,body{ moz-user-select: -moz-none; -moz-user-select: none; -o-user-select:none; -khtml-user-select:none; -webkit-user-select:none; -ms-user-select:none; user-select:none;
}

除了」none」還支持如下值:

auto——默認值,用戶能夠選中元素中的內容
text——用戶能夠選擇元素中的文本
element——文本可選,但僅限元素的邊界內(只有IE和FF支持)
all——在編輯器內,若是雙擊或上下文點擊發生在子元素上,該值的最高級祖先元素將被選中。

二、經過在body標籤中添加以下屬性:
<body oncontextmenu="return false;" onselectstart="return false">
前面一句是禁止右鍵的,後面一句是禁止複製的。
 
三、在js中添加以下兩行語句:
//禁止頁面選擇以及鼠標右鍵
document.oncontextmenu=function(){return false;}; 
document.onselectstart=function(){return false;};

其餘美化功能(推薦博客):

請參考:https://www.cnblogs.com/voidsky/p/5490220.html?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io

    https://blog.csdn.net/siwuxie095/article/details/80151468

              https://blog.csdn.net/qq_22186119/article/details/78369855

    https://www.cnblogs.com/liuyishi/p/9190459.html#_label2

    https://www.cnblogs.com/hafiz/p/7573464.html

    https://www.cnblogs.com/shwee/p/9060226.html

 


【時間倉促,若有錯誤,歡迎指正! ||   歡迎留下您的評語!  你們一塊兒探討、學習區塊鏈!】

【轉載請註明出處!http://www.cnblogs.com/X-knight/ 

相關文章
相關標籤/搜索