【博客美化】08.添加"扩大/缩小浏览区域大小" 按钮

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/ 关于作者:专注于微软平台的项目开发。如有问题或建议,请多多赐教! 版权声明:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接。 特此声明:所有评论和私信都会在第一时间回复。也欢迎园子的大大们指正错误,共同进步。或者直接私信我 声援博主:您的鼓励是作者坚持原创和持续写作的最大动力!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏web编程技术分享

【精编重制版】JavaWeb 入门级项目实战 -- 文章发布系统 (第一节)

本教程是,原文章发布系统教程的精编重置版,会包含每一节的源码,以及修正之前的一些错误。因为之前的教程只做到了评论模块,很多地方还不完美,因此重制版会修复之前的一...

25330
来自专栏极客编程

Vuebnb:一个用vue.js和Laravel构建的全栈应用

今年我一直在写一本新书叫全栈Vue网站开发:Vue.js,Vuex和Laravel。它会在Packt出版社在2018年初出版。

16810
来自专栏向治洪

React Native之携程Moles框架

因为支持用javascript开发原生应用,React Native一推出就受到不少公司热捧,各家都跃跃欲试。但有一个痛点是,在移动端,我们是否有必要开发多套...

21780
来自专栏伪君子的梦呓

推荐几个油猴脚本

油猴,也就是 Tampermonkey 是我每一台电脑都会安装的东西,也是我会给熟人介绍和安装的东西。没什么好说的,就是好用。

5.3K20
来自专栏CSDN技术头条

Mark!Android最佳的开源库集锦

工欲善其事,必先利其器。一个好的开发库可以快速提高开发者的工作效率,甚至让开发工作变得简单。本文收集了大量的Android开发库,快来切磋一下,到底哪一个最适合...

29270
来自专栏携程技术中心

干货 | React Native实践之携程Moles框架

因为支持用javascript开发原生应用,React Native一推出就受到不少公司热捧,各家都跃跃欲试。但有一个痛点是,在移动端,我们是否有必要开发多套程...

23290
来自专栏Coding01

一个码字工作者的写作工具 —— MWeb

由于 Markdown 格式简单易用,而且不受限于编辑器等影响,已经是写博客、写日志、写技术文档,亦或是用来写公众号文章的必备了。

19210
来自专栏极乐技术社区

微信小程序+和风天气完成天气预报

花半天时间完成简单的小程序应用。适合小程序初学者。

1.9K70
来自专栏WeTest质量开放平台团队的专栏

如何快速优化手游性能问题?从UGUI优化说起

作者Feefi,加入腾讯多年,目前主要从事Unity项目UI开发及优化相关工作,曾获得国际软件设计大赛“成都创业金钥匙”奖。

10720
来自专栏数据小魔方

SPSS竟然都能做数据地图了~~~

数据地图SPSS篇 ▼▼▼ 最近在做数据地图专题,搜集了好多能够实现数据地图可视化的软件操作技巧,唯独漏掉了SPSS。 总觉得SPSS作为一个傻瓜式菜单操作的...

89170

扫码关注云+社区

领取腾讯云代金券