多语言展示
当前在线:342今日阅读:103今日分享:49

博客园 个人主页去除广告并支持自适应样式

当访问技术博客-博客园时,总是被主页面的广告所骚扰,而且在平板电脑或是手机上访问博客园时,显示的博客内容还是混乱的,为了解决这两个问题特撰写此文,工博主使用,使用后能隐藏掉博客页面的广告,同时还能支持平板、手机等设备的优化显示。希望大家都能应用到自己的博客上,拒绝显示广告,在方便自己编辑的同时,也方便他人愉悦的浏览。
去广告
1

登录博客园个人博客, 然后点击主界面上的“管理”, 进入博客后台管理界面。

2

点击“设置”

3

浏览到“页面定制CSS代码”, 将下面代码贴入并保存即可将个人博客页面广告隐藏。#site_nav_under, #ad_under_post_holder, #comment_form_container,blog_news_kb,google_ad_c2, #comment_nav{ display:none !important;}

支持博客在不同设备上显示优化2
1

术语讲就是要博客支持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;}

2

保存后刷新个人博客页面,然后用手机、平板、电脑分别访问查看样式,也可以用Chrome缩放来查看不同设备下显示的效果。下面是我在Chrome里通过改变浏览器大小显示的样式。

推荐信息