博客园主题响应式布局

这里以主题darkgreentrip为例，其它主题类似。

响应式布局

在后台设置里页面定制CSS代码加上以下代码：

@-webkit-viewport {
   width: device-width;
}
@-moz-viewport {
   width: device-width;
}
@-ms-viewport {
   width: device-width;
}
@-o-viewport { 
   width: device-width;
}
@viewport {
   width: device-width; 
}

#main {
min-width: 0px !important; 
}

@media (max-width:990px) {
#home{ margin:0 15px; }
}
@media (max-width:640px) {
#sideBar, #mainContent{ width:100%;margin-right:0px !important;}
.post{ border-left:none; }
#mainContent .forFlow{margin-left:0em !important;}
#main { 
padding: 20px 0 0 0px;
overflow: hidden;
}
}

#navigator { height:auto; overflow:hidden; *zoom:1;}
#navList { float:left; }
#navList li { display: inline; float: none; }
}

此时还没有完成，因为少了meta里viewport的声明。

默认博客只有自定义css权限，自定义js等功能没有权限。需要发送邮件至[email protected]联系管理员开发权限，原因可以按实说明，大概1天左右可以开通。会有邮件通知。

如果权限已开通，请在页首Html代码或者页脚Html代码加上以下代码：

这样就行了。

但是发现每次打开时慢慢的才变成响应式，其实直接使用下面这句就行：

推荐、反对按钮悬浮

在页面定制CSS代码加上以下代码：

#div_digg {
  position: fixed;
  bottom: -13px;
  right: 40px;
  z-index: 9999;
}
#div_digg {
  float: right;
  margin-bottom: 10px;
  margin-right: 30px;
  font-size: 12px;
  width: 125px;
  text-align: center;
  margin-top: 10px;
}

自动生成目录

在页脚Html代码加上：

参考：
1、【写漂亮的博客】让我们的博客更加漂亮，让我们的博客支持响应式布局！ - 叶小钗 - 博客园
http://www.cnblogs.com/yexiaochai/archive/2013/05/27/3101311.html
2、自定义博客园皮肤：暗色流体响应式布局 - JiayangShen - 博客园
http://www.cnblogs.com/shn11160/archive/2013/03/23/2977123.html