给博客园添加几个小功能

r囧r小猫 2021-09-20 08:42 369阅读 0赞

## 代码块复制 ##

![1472533-20190522113408563-1770051902.png][]

### 页面定制CSS代码 ###

复制按钮的样式，可以根据自己的喜好设定。以下是我的样式

.copybutton { font-size: 12px; cursor: pointer; position: absolute; right: 6px; top: 6px; box-shadow: 0 0 15px 0 rgba(0,0,0,.1); color: #5e6687; padding: 0 6px; border-radius: 5px; } .cnblogs-markdown pre { margin-top: 10px; margin-bottom: 10px; position: relative !important; }

### 页脚Html代码（需要支持JS代码） ###

在页脚Html代码里添加以下代码

## 右侧目录 ##

![1472533-20190522113402110-924958910.png][]

### 页面定制CSS代码 ###

目录的样式，可以根据自己的喜好设定。以下是我的样式

#uprightsideBar { font-size: 12px; font-family: Arial, Helvetica, sans-serif; text-align: left; position: fixed; /*将div的位置固定到距离top:50px，right:0px的位置，这样div就会处在最右边的位置，距离顶部100px*/ top: 100px; right: 0px; width: auto; height: auto; } #sideBarTab { display: block; float: left; width: 40px; border: 1px solid #F58EA8; color: #F58EA8; border-right: none; text-align: left; padding-left: 20px; background: #ffffff; } #sideBarContents { display: block; float: left; overflow: auto; overflow-x: hidden; /* !important; */ font-weight: bold; width: 300px; min-height: 108px; max-height: 460px; border: 1px solid #e5e5e5; border-right: none; background: #ffffff; } #sideBarContents dl { margin: 0; padding: 0; padding-left: 20px; } #sideBarContents dt { margin-top: 5px; margin-left: 5px; } #sideBarContents dd, dt { cursor: pointer; } #sideBarContents dd:hover, dt:hover { color: #F58EA8; } #sideBarContents dd { margin-left: 20px; }

### 博客侧边栏公告代码（需要支持JS代码） ###

在博客侧边栏公告代码里添加以下代码

## 图片点击放大 ##

下载[代码包][Link 1]，解压缩

### 1. 上传 images 中的四张图片 ###

![1472533-20190522113348056-409366238.png][]

### 2. 修改 lightbox.css 中的四处 background: url 属性 ###

将 background: url 的地址改为刚上传的四张图片的地址。

### 3. 上传 lightbox.css 和 lightbox-plus-jquery.js 文件 ###

![1472533-20190522113338755-149188608.png][]

### 4. 在页脚Html代码引用上传的css和js文件 ###

将地址改为自己上传的文件地址

## 回到顶部小火箭 ##

### 页面定制css代码 ###

#rocket-to-top div { left: 0; margin: 0; overflow: hidden; padding: 0; position: absolute; top: 0; width: 149px; } #rocket-to-top .level-2 { background: url("https://files-cdn.cnblogs.com/files/xzh0717/rocket_button_up.ico") no-repeat scroll -149px 0 transparent; display: none; height: 250px; opacity: 0; z-index: 1; } #rocket-to-top .level-3 { background: none repeat scroll 0 0 transparent; cursor: pointer; display: block; height: 150px; z-index: 2; } #rocket-to-top { background: url("https://files-cdn.cnblogs.com/files/xzh0717/rocket_button_up.ico") no-repeat scroll 0 0 transparent; cursor: default; display: block; height: 250px; margin: -125px 0 0; overflow: hidden; padding: 0; position: fixed; right: 0; top: 90%; width: 149px; z-index: 11; }

### 页脚Html代码（需要支持JS代码） ###

在页脚Html代码里添加以下代码

<div style="display: none;" id="rocket-to-top"> <div style="opacity:0;display: block;" class="level-2"></div> <div class="level-3"></div> </div> <script type="text/javascript"> // jQuery火箭图标返回顶部代码 $(function () { var e = $("#rocket-to-top"), t = $(document).scrollTop(), n, r, i = !0; $(window).scroll(function () { var t = $(document).scrollTop(); t == 0 ? e.css("background-position") == "0px 0px" ? e.fadeOut("slow") : i && (i = !1, $(".level-2").css("opacity", 1), e.delay(100).animate({ marginTop: "-1000px" }, "normal", function () { e.css({ "margin-top": "-125px", display: "none" }), i = !0 })) : e.fadeIn("slow") }), e.hover(function () { $(".level-2").stop(!0).animate({ opacity: 1 }) }, function () { $(".level-2").stop(!0).animate({ opacity: 0 }) }), $(".level-3").click(function () { function t() { var t = e.css("background-position"); if (e.css("display") == "none" || i == 0) { clearInterval(n), e.css("background-position", "0px 0px"); return } switch (t) { case "0px 0px": e.css("background-position", "-298px 0px"); break; case "-298px 0px": e.css("background-position", "-447px 0px"); break; case "-447px 0px": e.css("background-position", "-596px 0px"); break; case "-596px 0px": e.css("background-position", "-745px 0px"); break; case "-745px 0px": e.css("background-position", "-298px 0px"); } } if (!i) return; n = setInterval(t, 50), $("html,body").animate({ scrollTop: 0 }, "slow"); }); }); </script>

转载于:https://www.cnblogs.com/xzh0717/p/10904926.html

[1472533-20190522113408563-1770051902.png]: /images/20210726/564902d92d384b35bf499b4abf04e608.png
[1472533-20190522113402110-924958910.png]: /images/20210726/262f4e75f15640c89579debd9cdfbd5b.png
[Link 1]: https://www.lokeshdhakar.com/projects/lightbox2/
[1472533-20190522113348056-409366238.png]: /images/20210726/a1a12de408b94975bdf20bf32eae9583.png
[1472533-20190522113338755-149188608.png]: /images/20210726/a4c27c115b2b4c889a73e364a0666b26.png