【CSS教學】修改痞客邦閒置廣告，修改得更加直觀且美觀 - 維特學習筆記 Ep.5－維特數位生活

這次來介紹這個，這是在部落格放著不動3分鐘後會出現的螢幕保護程式??我們暫且簡稱他為閒置廣告好了，這麼大顆密密麻麻的閒置廣告，是不是讓人根本不想看只想點掉。除了可以將它直接關閉以外，你還可以簡單一步步將它做修改，一起來看下去吧。如果你想了結更多關於痞客邦修改樣式等CSS設定，歡迎點選這裡跳轉或是把文章看到最後喔!!也歡迎大家對於水電、DIY相關知識的話，可以到理科仔阿維痞客邦看看喔!
螢幕擷取畫面 2024-11-22 143909.png

▼ 維特為了大家方便特別整理並標示了名稱
螢幕擷取畫面 2024-11-22 135522.png

▼ 也先幫你打好放在底下了，可以自行複製過去再去做更改喔。

/* From PIXNET By witt3c */
.modal idle-pop idle-pop__big active {} /*閒置廣告*/
.modal-bg{} /*閒置廣告外圍虛化*/
.modal-dialog{} /*廣告主框*/
.modal-content{} /*廣告主內文*/
.modal-header{} /*頂部廣告說明*/
.modal-body{} /*廣告中間展示段*/
.modal-top__left{} /*廣告中間展示左側*/
.blogger-info{} /*廣告中間展示左側上方格主資訊*/
.idle-related-posts{} /*廣告中間展示左側下方文章*/
.modal-top__right{} /*廣告中間展示右側*/
.modal-footer{} /*最下方廣告*/

如果你想要完全不出現，那就在.modal idle-pop idle-pop__big active{} 加上 display:none 其他就都不需要做修改了。

.modal idle-pop idle-pop__big active{display:none}

▼ 如果你只想要移除最下方的廣告的話，你就要這樣修改。

.modal-footer{display: none}

▼ 但如果你添加上方這段的話，你會發現你的閒置廣告是靠上的。
螢幕擷取畫面 2024-11-22 153020.png

▼ 你如果想要將他更改稍微置中一點那你就需要對廣告主框也做修正，以下提供完整程式。

.modal-footer{display: none;}
.modal-dialog{top: 50% !important; margin-top: -100px !important;}

▼ 這樣修改就能夠比較置中，也比較好看了對吧。
【CSS教學】修改痞客邦閒置廣告，修改得更加直觀且美觀 -

▼ 但你如果還想要將右邊的廣告也一起刪除的話，那你可以這樣做，以下提供完整程式。

.modal-footer{display: none}
.modal-top__right{display: none}
.idle-adsense{display: none}
.modal-dialog{top: 50% !important; margin-top: -100px !important;}

【CSS教學】修改痞客邦閒置廣告，修改得更加直觀且美觀 -

▼ 你如果想要剩個人簡介的話，那你就要這樣做，以下提供完整程式。

.modal-footer{display: none}
.modal-top__right{display: none}
.idle-adsense{display: none}
.idle-related-posts{display: none}
.modal-dialog{top: 50% !important; margin-top: -100px !important;}