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

博客园美化相关文章目录:

【博客美化】01.推荐和反对炫酷样式

【博客美化】02.公告栏显示个性化时间

【博客美化】03.分享按钮

【博客美化】04.自定义地址栏logo

【博客美化】05.添加GitHub链接

【博客美化】06.添加QQ交谈链接

【博客美化】07.添加打赏按钮

【博客美化】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/

关于作者:专注于微软平台的项目开发。如有问题或建议,请多多赐教!

版权声明:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接。

特此声明:所有评论和私信都会在第一时间回复。也欢迎园子的大大们指正错误,共同进步。或者直接私信

声援博主:如果您觉得文章对您有帮助,可以点击文章右下角【推荐】一下。您的鼓励是作者坚持原创和持续写作的最大动力!

时间: 2024-11-03 21:48:38

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

【博客美化】09.评论带头像,且支持旋转

博客园美化相关文章目录: [博客美化]01.推荐和反对炫酷样式 [博客美化]02.公告栏显示个性化时间 [博客美化]03.分享按钮 [博客美化]04.自定义地址栏logo [博客美化]05.添加GitHub链接 [博客美化]06.添加QQ交谈链接 [博客美化]07.添加打赏按钮 [博客美化]08.添加"扩大/缩小浏览区域大小" 按钮 [博客美化]09.评论带头像,且支持旋转 1.效果图 2.上传JavaScript文件 文件地址:http://files.cnblogs.com/fil

【全网最全的博客美化系列教程】07.添加一个分享的按钮吧

全网最全的博客美化系列教程相关文章目录 [全网最全的博客美化系列教程]01.添加Github项目链接 [全网最全的博客美化系列教程]02.添加QQ交谈链接 [全网最全的博客美化系列教程]03.给博客添加一只萌萌哒的小仓鼠 [全网最全的博客美化系列教程]04.访客量统计的实现 [全网最全的博客美化系列教程]05.公告栏个性时间显示的实现 [全网最全的博客美化系列教程]06.推荐和反对炫酷样式的实现 [全网最全的博客美化系列教程]07.添加一个分享的按钮吧 [全网最全的博客美化系列教程]08.自定义

【全网最全的博客美化系列教程】文章总目录

前言 很多热心的园友叫我出一部博客美化系列的教程,都觉得我博客做的很漂亮?之前我也有写过博客美化教程,不过好像一篇文章的篇幅有点过长了,为了方便园友的查看,我决定重新出一套博客美化教程,把原有的功能进行细化,每种功能单独以一篇文章的形式发表,在保留原有功能的基础上,会持续更新探索一些好玩好看的新功能,供园友们学习.既然是园友们提出的想法,我也不能辜负你们的期望啊,喜欢的园友记得点赞收藏加关注哦~~~ 一枚即将步入大三的学生党也是时候需要考虑一下自己的未来了,毕竟学习的时间不多了.我也很久没有更新

【全网最全的博客美化系列教程】05.公告栏个性时间显示的实现

全网最全的博客美化系列教程相关文章目录 [全网最全的博客美化系列教程]01.添加Github项目链接 [全网最全的博客美化系列教程]02.添加QQ交谈链接 [全网最全的博客美化系列教程]03.给博客添加一只萌萌哒的小仓鼠 [全网最全的博客美化系列教程]04.访客量统计的实现 [全网最全的博客美化系列教程]05.公告栏个性时间显示的实现 [全网最全的博客美化系列教程]06.推荐和反对炫酷样式的实现 [全网最全的博客美化系列教程]07.添加一个分享的按钮吧 [全网最全的博客美化系列教程]08.自定义

【全网最全的博客美化系列教程】06.推荐和反对炫酷样式的实现

全网最全的博客美化系列教程相关文章目录 [全网最全的博客美化系列教程]01.添加Github项目链接 [全网最全的博客美化系列教程]02.添加QQ交谈链接 [全网最全的博客美化系列教程]03.给博客添加一只萌萌哒的小仓鼠 [全网最全的博客美化系列教程]04.访客量统计的实现 [全网最全的博客美化系列教程]05.公告栏个性时间显示的实现 [全网最全的博客美化系列教程]06.推荐和反对炫酷样式的实现 [全网最全的博客美化系列教程]07.添加一个分享的按钮吧 [全网最全的博客美化系列教程]08.自定义

【博客美化】07.添加打赏按钮

博客园美化相关文章目录: [博客美化]01.推荐和反对炫酷样式 [博客美化]02.公告栏显示个性化时间 [博客美化]03.分享按钮 [博客美化]04.自定义地址栏logo [博客美化]05.添加GitHub链接 [博客美化]06.添加QQ交谈链接 [博客美化]07.添加打赏按钮 1.添加打赏按钮 进入自己的博客园->设置,将以下html代码添加到“页首Html代码” <!--打赏 Start--> <script> window.tctipConfig = { staticP

【博客美化】06.添加QQ联系链接

博客园美化相关文章目录: [博客美化]01.推荐和反对炫酷样式 [博客美化]02.公告栏显示个性化时间 [博客美化]03.分享按钮 [博客美化]04.自定义地址栏logo [博客美化]05.添加GitHub链接 [博客美化]06.添加QQ交谈链接 1.添加GitHub链接 进入自己的博客园->设置,将以下html代码添加到“页首Html代码” <a href="https://github.com/Jackson0714" target="_blank"

【博客美化】06.添加QQ交谈链接

博客园美化相关文章目录: [博客美化]01.推荐和反对炫酷样式 [博客美化]02.公告栏显示个性化时间 [博客美化]03.分享按钮 [博客美化]04.自定义地址栏logo [博客美化]05.添加GitHub链接 [博客美化]06.添加QQ交谈链接 1.添加QQ交谈链接 进入自己的博客园->设置,将以下html代码添加到“博客侧边栏公告” <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=343

【转】博客美化(6)为你的博文自动添加目录

[分享]博客美化(6)为你的博文自动添加目录 阅读目录 1.目录样式文件 2.为文章添加固定的信息 3.自动生成目录代码 博客园美化相关文章目录:博客园博客美化相关文章目录 这篇文章使用的代码来自于博客园的marvin,非常感谢.在他的文章:如何给你的为知笔记添加一个漂亮的导航目录中,介绍了给文章自动添加目录的过程,我当时就非常兴奋,一直想要个类似的插件,就是不会写.所以当天就咨询了marvin,在他的提示下,我把他博客的CSS和js文件扒下来了,经过一番改进,成为了我博客目前使用的,所以分享出