博客園主題美化

權限申請

管理 - 設置 - 博客側邊欄公告 - 申請JS權限

資源上傳

管理 - 設置 - 文件 - 上傳資源文件

主題定制

管理 - 設置

博客側邊欄公告

<!-- 公告頭像 -->
<img src="https://pic.cnblogs.com/avatar/41703/20240823155443.png">

頁面定制 CSS 代碼

/* 隱藏頂部導航 */
#top_nav {
    display:none;
}

/* 隱藏頁腳 */
.footer {
    display: none;
}

/* 博客標題字體 */
a.headermaintitle:visited, a.headermaintitle:active, a.headermaintitle:link {
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
}

/* 菜單字體 */
.menu {
    font-size: 14px;
    font-weight: bold;
}

/* 正文字體（摘要）*/
body {
    font-size: 14px;
}

/* 段落字體 */
p {
    font-size: 14px;
}

/* 代碼字體&背景透明 */
code.hljs {
    font-size: 14px;
    background-color: transparent;
}

/* 文章標題字體&底紋 */
.postTitle {
    background-color: #EFEFEF;
    padding-left: 8px;
    padding-top: 3px;
    padding-bottom: 0px;
    border: 1px solid #ccc;
    font-size: 20px;
    font-weight: bold;
}

/* 文章H1標題字體 */
.postTitle h1 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}

/* 文章H1標題字體 去掉左側間隔 */
h3 {
    padding-left: 0px;
}

/* 博客側邊欄字體 */
li {
    font-size: 14px;
}

/* 積分與排名字體 */
.newsItem {
    font-size: 14px;
}

/* 返回頂部 */
.backToTop {
     border: 1px dashed;
     display: none;
     width: 18px;
     line-height: 1.2;
     padding: 5px 0;
     background-color: #fff;
     color: #000;
     font-size: 12px;
     text-align: center;
     position: fixed;
     _position: absolute;
     right: 10px;
     bottom: 100px;
     _bottom: "auto";
     cursor: pointer;
     opacity: .6;
     filter: Alpha(opacity=60);
}

首頁 HTML 代碼

頁腳 HTML 代碼

<!-- 設置博客Icon -->
<script type="text/javascript">
    var linkObject = document.createElement('link');
    linkObject.rel = 'icon';
    linkObject.;
    document.head.appendChild(linkObject);
</script>

<!-- 鼠標點擊效果 -->
<script type="text/javascript" src="https://files.cnblogs.com/files/blogs/45285/cursor-effects.js?t=1724857597&download=true"></script>

<!-- 返回頂部 -->
<script type="text/javascript">
(function() {
    var $backToTopTxt = "返回頂部", $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body"))
        .text($backToTopTxt).attr("title", $backToTopTxt).click(function() {
            $("html, body").animate({ scrollTop: 0 }, 120);
    }), $backToTopFun = function() {
        var st = $(document).scrollTop(), winh = $(window).height();
        (st > 0)? $backToTopEle.show(): $backToTopEle.hide();
        //IE6下的定位
        if (!window.XMLHttpRequest) {
            $backToTopEle.css("top", st + winh - 166);
        }
    };
    $(window).bind("scroll", $backToTopFun);
    $(function() { $backToTopFun(); });
})();
</script>

<!-- 圖片點擊放大 -->
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/zengcongcong/img.enlarge.js"></script>
<div id="outerdiv" style="text-align: center;position: fixed;z-index: 1000;top: 0;left: 0;
    width: 100%;height: 100%;background-color: rgba(255,255,255,.9);">
    <img id="bigimg" style="height: auto;width: 65%;border: 5px solid #7e8c8d; 
        margin: auto;position: absolute;top: 0;bottom: 0;left: 0;right: 0;" src="" />
</div>