自定義美化博客園
阿新 • • 發佈:2018-06-09
In 自己 nor one 簽名 get code style connect
最近發現,好多排名靠前的技術博客,首先是排版特別美觀,然後博客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‘; }
美化推薦及反對
設置推薦及反對按鈕在頁面右下角浮動顯示,屏蔽反對按鈕。
/* 推薦及反對 */ #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; }
屏蔽廣告
/* 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/wpa
生成後的代碼放在【博客側邊欄公告(支持HTML代碼)(支持JS代碼)】中。
增加打賞功能:
請參考:http://www.cnblogs.com/greedying/p/6483222.html
其他主題美化:
請參考: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
自定義美化博客園