?

博客園美化相關(guān)文章目錄：

【博客美化】01.推薦和反對炫酷樣式

【博客美化】02.公告欄顯示個性化時間

【博客美化】03.分享按鈕

【博客美化】04.自定義地址欄logo

【博客美化】05.添加GitHub鏈接

【博客美化】06.添加QQ交談鏈接

【博客美化】07.添加打賞按鈕

【博客美化】08.添加"擴大/縮小瀏覽區(qū)域大小" 按鈕

【博客美化】09.評論帶頭像，且支持旋轉(zhuǎn)

?

1.頁首添加HTML代碼

進入自己的博客園->設(shè)置，將以下html代碼添加到“頁首Html代碼”

<div id="divExpandViewArea" οnclick="$('#mainContent').css({'margin-left':'0'});$('#sideBar').css({'display':'none'});">擴大</div><div id="divCollapseViewArea" οnclick="$('#mainContent').css({'margin-left':'300px'});$('#sideBar').css({'display':'block'});">縮小</div>

2.添加定制CSS

#divExpandViewArea{position: fixed;color: white;/* border-radius: 10px; */padding: 2.5px 10px;right: 5px;top: 390px;cursor: pointer;opacity: 0.9;background-color: gray; }#divCollapseViewArea{position: fixed;color: white;/* border-radius: 10px; */padding: 2.5px 10px;right: 5px;top: 420px;cursor: pointer;opacity: 0.9;background-color: gray; }

3.效果

?

作　　者： Jackson0714
出　　處：http://www.cnblogs.com/jackson0714/
關(guān)于作者：專注于微軟平臺的項目開發(fā)。如有問題或建議，請多多賜教！
版權(quán)聲明：本文版權(quán)歸作者和博客園共有，歡迎轉(zhuǎn)載，但未經(jīng)作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接。
特此聲明：所有評論和私信都會在第一時間回復(fù)。也歡迎園子的大大們指正錯誤，共同進步。或者直接私信我
聲援博主：如果您覺得文章對您有幫助，可以點擊文章右下角【推薦】一下。您的鼓勵是作者堅持原創(chuàng)和持續(xù)寫作的最大動力！

轉(zhuǎn)載于:https://www.cnblogs.com/jackson0714/p/BeautifyBlog_08.html

總結(jié)

以上是生活随笔為你收集整理的【博客美化】08.添加扩大/缩小浏览区域大小 按钮的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。