博客園如何自定義主題背景
阿新 • • 發佈:2019-03-20
var top javascrip span 定義 file text otto targe
當我們對博客園默認的主題產生審美疲勞的時候,都希望自己的博客擁有一個屬於自己的主題背景,而我的自定義背景是這樣設置的:
首先在文件選項中上傳自己想要的博客圖標(有格式要求)和一個js動態壁紙文件:
然後到設置選項中添加以下代碼:
子標題中添加:
<a href="https://github.com/b4zinga" target="_blank">點我跳轉到皮皮嘉的github</a>
頁面定制CSS代碼中添加:
#home { background-color: #fff; box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3); margin: 50px auto; min-width: 950px; padding: 30px; width: 85%; } #blogTitle h1 { font-size: 40px; font-weight: bold; line-height: 1.5em; margin-top: 10px; } #navigator { border-bottom: 1px solid #ededed; border-top: 1px solid #ededed; clear: both; font-size: 16px; height: 60px; margin-top: 25px; } #blogTitle h1 a { color: #473c8b; } #blogTitle h1 a:hover{ color:#ff6347; } #blogTitle h2 { color: #4682b4; float: left; font-size: 1.2rem; font-weight: normal; line-height: 1.84615; } #blogTitle h2:hover { color: #ff6347; float: left; font-size: 1.2rem; font-weight: normal; line-height: 1.84615; } #navList a:link, #navList a:visited, #navList a:active { color: #21759b; font-weight: bold; } #navList a:hover { color: #ff6347; font-size: 17px; font-weight: bold; } .postTitle a:hover { color: #ff6347; margin-left: 30px; text-decoration: none; } body { background-color: #ddffff; color: #000; font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif; font-size: 12px; min-height: 101%; } /* canvas{ background-color: #ffffff; background-image: linear-gradient(180deg, #ffffff 6%, #f7eb54 31%, #f56c6c 49%, #f924dd 75%, #1b60fb 100%); } */
頁首Html代碼中添加:
<!-- 背景動畫 --> <canvas id="c_n9" width="1920" height="990" style="position: fixed; top: 0px; left: 0px; z-index: -1; opacity: 1;"></canvas> <script src="https://files.cnblogs.com/files/wjw2018/canvas-nest.min.js"></script>
鼠標右擊js文件的Download,選則復制鏈接地址,即可得到js文件的鏈接地址"https://files.cnblogs.com/files/wjw2018/canvas-nest.min.js"
頁腳Html代碼中添加:
<script type="text/javascript" language="javascript"> //Setting ico for cnblogs var linkObject = document.createElement(‘link‘); linkObject.rel = "shortcut icon"; linkObject.href = "https://files.cnblogs.com/files/wjw2018/icon.bmp"; document.getElementsByTagName("head")[0].appendChild(linkObject); </script>
跟之前一樣的操作,即可得到icon的鏈接地址"https://files.cnblogs.com/files/wjw2018/icon.bmp"
博客園如何自定義主題背景