1. 程式人生 > >博客園如何自定義主題背景

博客園如何自定義主題背景

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"

博客園如何自定義主題背景