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

 

博客園美化相關文章目錄：

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

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

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

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

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

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

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

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

【博客美化】09.評論帶頭像，且支持旋轉

【博客美化】10.圖片預覽放大

 

1.頁首添加HTML代碼

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

<div id="divExpandViewArea" onclick="$('#mainContent').css({'margin-left':'0'});$('#sideBar').css({'display':'none'});">擴大</div>

<div id="divCollapseViewArea" onclick="$('#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/
關於作者：專注於微軟平台的項目開發。如有問題或建議，請多多賜教！
版權聲明：本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接。
特此聲明：所有評論和私信都會在第一時間回復。也歡迎園子的大大們指正錯誤，共同進步。或者直接私信我
聲援博主：如果您覺得文章對您有幫助，可以點擊文章右下角【推薦】一下。您的鼓勵是作者堅持原創和持續寫作的最大動力！