博客園添加側邊欄小插件並更改css樣式

時間 2019-11-09

標籤博客添加側邊欄插件更改 css 樣式欄目 CSS 简体版

原文原文鏈接

申請開通博客園以後，系統提供的模板可能顯示效果不理想，這裏咱們能夠本身定義一下博客園的頁面風格，這裏分享一下本身的實測經驗css

1、在博客園主頁上查看元素css定義

在博客園的主頁上，右鍵鼠標，進入審查樣式，頁面會出現開發調試模塊，以下圖所示：app

注：選擇左側的放大鏡按鈕，以後鼠標移動到頁面對應的位置(也能夠選擇Elements內的元素)，右側Style欄中會顯示出對應元素的css樣式post

若是要更改頁面的寬度，這裏選擇Elenments裏的id="home"的div，在右側Style欄中，改變width選項，頁面會呈現不一樣寬度，調整到合適的效果後，複製紅框內的內容；學習

進入博客園設置頁面，把複製的內容粘貼到頁面定製CSS代碼的文本框中，點擊下方的保存按鈕，便可生效。字體

頁面中字體大小、顏色等屬性的修改都是一樣的作法，下圖紅框內的內容是我作的修改，僅供參考：spa

2、在博客園主頁側邊欄自定義js插件

今天瀏覽網頁的時候無心間看到一個小插件很好玩，如圖所示，就準備cp過來插件

第一步：查看小插件的源代碼

在審查元素的面前，一切特效都是渣渣，這項高亮的代碼想必就是小老鼠的代碼了，具體原理我不懂，可是隻要把代碼搞過來，就能夠擁有本身的小老鼠了3d

第二步：在博客園的設置欄，將小老鼠的代碼複製粘貼

若是想在側邊欄添加js內容，須要先點擊申請js的連接，申請成功後，頁面會顯示紅框的字樣，再把咱們的小老鼠代碼粘貼進去，ok，點擊保存，再次進入博客園調試

就能夠看到本身的小老鼠了，是否是有點小激動呢？cdn

小老鼠實際顯示效果，以下圖所示：

能夠根據本身的須要在不一樣的模板上定義本身的樣式，歡迎你們多學習交流！

css樣式代碼：

#home {
margin: 0 auto;
width: 90%;
margin-top: 20px;
margin-bottom: 20px;
}
#blogTitle h1 a {
font-family: 微軟雅黑;
}
#blogTitle h2 {
font-family: 微軟雅黑;
}
#navList {
font-size: 14px;
font-family: 微軟雅黑;
}
.postTitle a:link, .postTitle a:visited, .postTitle a:active {
font-family: 微軟雅黑;
color: #3167FF;
}
.c_b_p_desc {
font-family: 微軟雅黑;
}
.postTitle {
border-left: 3px solid #0339FD;
}
.catListTitle {
font-weight: bold;
line-height: 1.2;
margin-top: 21px;
margin-bottom: 10.5px;
border-left:10px solid #FFB04F;
padding: 10px 0 10px 14px;
text-align: left;
font-family: 微軟雅黑;
}
#profile_block {
font-family: 微軟雅黑;
}
#navigator {
font-family: 微軟雅黑;
}
* {
font-family: 微軟雅黑;
}