登录博客园个人博客, 然后点击主界面上的“管理”, 进入博客后台管理界面。
点击“设置”
浏览到“页面定制CSS代码”, 将下面代码贴入并保存即可将个人博客页面广告隐藏。#site_nav_under, #ad_under_post_holder, #comment_form_container,blog_news_kb,google_ad_c2, #comment_nav{ display:none !important;}
术语讲就是要博客支持RESS(响应式设计),通俗点就是让页面能够在不同尺寸设备(包括浏览器缩放)上达到最佳显示效果。这个也很简单,根据自己需要定义media query 然后贴到"设置"->"页面定制CSS代码"中 即可,参考我的:#home{min-width:320px; !important;}#main{padding:10px !important; box-shadow:0 0 10px rgba(189, 189, 189, 0.4); max-width:960px !important; margin:auto !important;}#Header1_HeaderTitle{color:#e4f3f9;text-shadow:0 1px 1px rgba(255,255,255,.5);}.day{box-shadow:0 0 10px rgba(189, 189, 189, 0.4); padding:10px;}#header{background-color: #3f9fd9;border-radius:0 0 10px 10px;-webkit-border-radius:0 0 10px 10px; font-family:Arial;-moz-border-radius:0 0 10px 10px;}#navList li a{font-size:14px; color:White !important;; font-weight:blod; line-height:14px; padding:10px 10px 8px !important; border-bottom:2px transparent solid;}#navList li a:hover{border-bottom:2px yellow solid; color:black !important;}.blogStats{color:inherit !important;}.postDesc{padding-bottom:2px; }#sideBar{background:none; border:none; border-right:1px solid rgba(0, 0, 0, 0.05);box-shadow:none; border-radius:0px;}#sideBarMain ul{margin-left:2px;}#leftcontentcontainer .catListPostCategory li, #leftcontentcontainer catListTag li{color:#3f9fd9; list-style: circle; margin-left:20px;}.sp{background:url(http://img02.taobaocdn.com/tps/i2/T1NCumXtFfXXcFhpDa-17-14.png) no-repeat 100%;padding-right:20px; font-size:16px; color:red; font-weight:bold;}#footer{display:none;}@media (max-width: 950px){#home{max-width:inherit;}#main{min-width:inherit;max-width:inherit;}#mainContent, #mainContent .forFlow{ margin:auto;}#sideBar{display:none;}#mainContent{float:none;}}@media (max-width: 662px){#main{margin-top:20px !important;}}@media (max-width: 520px){#main{margin-top:50px !important;}}@media (max-width: 380px){#MyLinks1_MyHomeLink, #MyLinks1_Syndication{display:none !important;}}.post{background-color:White !important;}.c_b_p_desc_readmore{float:right !important;}
保存后刷新个人博客页面,然后用手机、平板、电脑分别访问查看样式,也可以用Chrome缩放来查看不同设备下显示的效果。下面是我在Chrome里通过改变浏览器大小显示的样式。