（四）博客園美化（風格1）：右側側邊欄美化

空閑的時候自己根據很多大神的美化教程，把自己的博客園簡單裝修了下。

再此整理一下美化方式和步驟，如果喜歡本人博客這種風格，可以參考一下這個系列。

一、頭像

頭像圖片請換成自己的圖片外鏈地址，不會設置的看第一篇第二節

博客側邊欄公告欄追加以下代碼：

<img src="https://images.cnblogs.com/cnblogs_com/xxhxs-21/1782400/o_220718034040_%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20220620144428.jpg" 
alt="吉奧朵朵的頭像" class="img_avatar" width="250px" style="border-radius:50%">

二、頭像下方的文字列表

側邊欄允許添加自定義元素，以我自己的為例，在博客側邊欄公告欄追加以下代碼：

<!-- 外鏈 -->
<div style="text-align:center;">
    <a target="_blank" href="#"><span>QQ:1548513100</span></a><br/>
    <a target="_blank" href="#"><span>VX:LN01470</span></a><br/>
    <a target="_blank" href="http://xxhxs.ysepan.com/"><span>?點擊進入黑科技云盤大量資源?</span></a><br/>
    <a target="_blank" href="http://xxhxs.ysepan.com/"><span>?點擊進入黑科技云盤大量資源?</span></a><br/>
    <a target="_blank" href="http://xxhxs.ysepan.com/"><span>?點擊進入黑科技云盤大量資源?</span></a>
</div>

三、公告欄滾動字幕

在博客側邊欄公告欄追加以下代碼：

<!-- 滾動字幕 -->
<div>
    <marquee><a href="#"><font color="blue" size="4">You will make it!</font></a></marquee>
</div>

四、右側文章目錄

作用是為文章自動生成目錄，目錄的生成基于文章內的一級二級標題，所以寫博文的時候一定要規范格式。

實現自動生成目錄需要幾個外部文件，點擊下方鏈接，在打開頁面右擊另存到本地，然后把文件上傳到自己博客園的文件里，然后再引用文件

的鏈接，不會設置的看第一篇第二節。

1、bootstrap.min.js

2、marvin.nav.my1502.css

3、marvin.cnblogs.js

4、marvin.nav.my1502.js

在頁腳 HTML 代碼欄追加以下代碼（其中文件鏈接改成自己的）：

<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://files.cnblogs.com/files/xxhxs-21/marvin.nav.my1502.css" rel="stylesheet">
<script type="text/javascript" src="https://files.cnblogs.com/files/xxhxs-21/marvin.cnblogs.js"></script>
<script type="text/javascript" src="https://files.cnblogs.com/files/xxhxs-21/marvin.nav.my1502.js"></script>

保存查看效果

posted @ 2023-03-16 14:07 涼年技術閱讀(134) 評論(0) 收藏舉報

刷新頁面返回頂部

涼年技術

青素淡守的微涼年華

（四）博客園美化（風格1）：右側側邊欄美化

一、頭像

二、頭像下方的文字列表

三、公告欄滾動字幕

四、右側文章目錄

公告