怎样使用两行代码实现博客园打赏功能

更新时间:2023-04-07 07:14:51 阅读：评论：0

一、背景

　　前段时间，写的，一经发出便受到了极大的热捧，后来很多网友留言说，想要让我分享现在的模板，毕竟现在这个模板已经比之前分享的那个多经历了n多个版本的改进和优化。那本文我就来分享我博客园中的所有的特性，以供大家直接开箱即用。废话不多说，直接开搞~

二、最新版css代码

需要copy下面的最新版css代码到页面定制css代码区中

@font-face {font-family: 'fontawesome';font-style: normal;font-weight: normal;src: url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.eot?#iefix") format('embedded-opentype'), url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.woff") format('woff'), url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.ttf") format('truetype'), url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.svg#fontawesomeregular") format('svg');}* {margi粥的种类n: 0;padding: 0;}body {background: #eee;color: #444;font-family: "lucida grande", "lucida sans unicode", helvetica, arial, verdana, sans-rif;font-size: 14px;text-shadow: 0 0 1px transparent;color:#505050;}@media screen and (max-width: 1260px) {body {margin: 0px;}}@media screen and (max-width: 600px) {body {font-size: 13px;}}h1,h2,h3,h4,h5,h6 {font-family: "lucida grande", "lucida sans unicode", helvetica, arial, verdana, sans-rif;}h1 {font-size: 1.8em;}h2 {font-size: 1.5em;}h3 {font-size: 1.3em;}a {text-decoration: none;color: #258fb8;}a:hover {text-decoration: underline;}#home{margin: 0 auto;width: 85%;background-color: #fff;padding: 30px;margin-top: 50px;margin-bottom: 50px;box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);border-radius: 20px;}#tbcommentbody {width: 100%;}#blogtitle {width:23%;margin-top: -10px;text-align: center;}.alignright {float: right;}#header, #main, #footer {width: 100%;margin: 0 auto;}@media screen and (max-width: 1260px) {#main {width: 95%;}}#maincontent {width: 75%;float: left;margin-left: 10px;}@media screen and (max-width: 1260px) {#main-col {width: 100%;margin-right: -300px;}}@media screen and (max-width: 900px) {#main-col {margin-right: 0;float: none;}}@media screen and (max-width: 1260px) {#wrapper {margin-right: 300px;}}@media screen and (max-width: 900px) {#wrapper {margin-right: 0;}}#header {text-shadow: 0 0 1px #fff;margin: 20px auto 30px;position: relative;height: 60px;color: #999;}#header a {color: #999;}#header a:hover {color: #258fb8;text-decoration: none;}#header h1 {font-weight: normal;font-size: 30px;}#header h2 {font-weight: normal;font-size: 0.9em;margin-top: 10px;margin-left: 30px;}#header #navigator {font-family: "lato", helvetica neue, helvetica, arial, sans-rif;width: 100%;font-size: 16px;border-结束战争bottom: 1px solid #ededed;border-top: 1px solid #ededed;height: 50px;line-height: 50px;clear: both;margin-top: 25px;}#header #navigator ul {list-style: none;}#header #navigator ul li {float: left;width: 10%;text-align: center;margin-right: 15px;}#header .blogstats {float: right;font-size: 13px;}.topiclistfooter {margin-top:30px;margin-bottom: 30px;margin-right: 0 !important;}.topiclistfooter a {display: inline !important;padding: 10px 20px;background: #ddd;color: #999;font-family: "lato", helvetica neue, helvetica, arial, sans-rif;text-shadow: 0 0 1px #fff;border-radius: 5px;}.topiclistfooter a:hover {background: #258fb8;color: #fff;text-decoration: none;text-shadow: none;}.topiclistfooter .prev:before {content: '\f053';padding-right: 10px;font-family: fontawesome;}.topiclistfooter .next:after {content: '\f054';padding-left: 10px;font-family: fontawesome;}article {-webkit-box-shadow: 1px 2px 3px #ddd;box-shadow: 1px 2px 3px #ddd;background: #fff;}article.page {padding-left: 20px;}article.page .icon {display: none;}.posticon:before {content: '\f016';}article.photo .icon:before {content: '\f030';}article.link .icon:before {content: '\f0c1';}article.link .title a:after {content: '\f08e';color: #999;font: 12px fontawesome;padding-left: 10px;vertical-align: super;}/******************************************以下自定义样式***********************************************/#mysignature{border-top: 2px solid #ccc;padding-top: 20px;}.pager{border-bottom: 1px dashed #ddd;padding-bottom: 30px;margin-bottom: -10px;}#blog-calendar{width:0px;height:0px;display: none !important;}#topviewpostsblock ul li{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 100%;display: inline-block;height: 30px;line-height: 30px;}.day .daytit高适的诗le{display: none !important;}/* 去掉广告 */#ad_t2,#opt_under_post,.c_ad_block,#under_post_news,#under_post_kb{display: none !important;}/******************************************以上自定义样式***********************************************/.posttitle, .entrylistposttitle {font-family: "lato", helvetica neue, helvetica, arial, sans-rif;font-size: 1.8em;padding: 20px 20px 15px 0px;background: #fff;border-radius: 10px 10px 0px 0px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}.entrylistpostsummary, .postcon, .postbody {padding: 0 20px 15px 0px;-webkit-box-shadow: 1px 2px 3px #ddd;box-shadow: 0 2px 0 #ddd;background: #fff;position: relative;}.postdesc, .entrylistitempostdesc {padding: 0px 20px 15px 0px;color: #999;font-size: 0.9em;line-height: 16px;position: relative;min-height: 16px;background: #fff;border-bottom: 1px dashed #ccc;}/* 去掉博客园自带日历控件 */#blog-calendar {display: none;}@media screen and (max-width: 600px) {.postcon {padding-left: 0px;}}.posticon {height: 0px;margin-right: 25px;position: relative;top: 25px;left: 25px;color: #258fb8;}@media screen and (max-width: 600px) {article header .icon {display: none;}}.posticon:before {position: absolute;font: 32px fontawesome;top: 0;left: 0;width: 32px;text-align: center;}article header time {color: #999;font: 0.9em "lato", helvetica neue, helvetica, arial, sans-rif;margin-bottom: 5px;display: block;line-height: 1;}article header .title {font-weight: normal;}article header .title a {color: #444;}article header .title a:hover {color: #258fb8;text-decoration: none;}#cnblogs_post_body {text-align: justify;line-height: 1.6;}#cnblogs_post_body p,#cnblogs_post_body blockquote,#cnblogs_post_body ul,#cnblogs_post_body ol,#cnblogs_post_body dl,#cnblogs_post_body table,#cnblogs_post_body iframe,#cnblogs_post_body h3,#cnblogs_post_body h4,#cnblogs_post_body h5,#cnblogs_post_body h6,#cnblogs_post_body .video-container {margin-top: 15px;}#cnblogs_post_body blockquote {border-top: 1px solid #ddd;border-bottom: 1px solid #ddd;font-style: italic;font-family: "georgia", rif;font-size: 1.2em;padding: 0 30px 15px;}#cnblogs_post_body blockquote footer {border-top: none;font-size: 0.8em;line-height: 1;margin: 20px 0 0;padding-top: 0;}#cnblogs_post_body blockquote footer cite:before {content: '—';color: #ccc;padding: 0 0.5em;}#cnblogs_post_body code,#cnblogs_post_body pre {font-family: monaco, menlo, consolas, courier new, monospace;}#cnblogs_post_body code {background: #eee;color: #666;padding: 0 5px;margin: 0 2px;font-size: 0.9em;border: 1px solid #ddd;-webkit-border-radius: 3px;border-radius: 3px;}#cnblogs_post_body pre {background: #eee;overflow: auto;padding: 7px 15px;-webkit-border-radius: 2px;border-radius: 2px;}#cnblogs_post_body pre code {background: none;padding: 0;margin: 0;border: none;-webkit-border-radius: 0;border-radius: 0;}#cnblogs_post_body ul ul,#cnblogs_post_body ol ul,#cnblogs_post_body dl ul,#cnblogs_post_body ul ol,#cnblogs_post_body ol ol,#cnblogs_post_body dl ol,#cnblogs_post_body ul dl,#cnblogs_post_body ol dl,#cnblogs_post_body dl dl {margin-top: 0;}#cnblogs_post_body h1,#cnblogs_post_body h2 {font-weight: bold;border-bottom: 1px solid #ddd;padding-bottom: 10px;margin-top: 20px;}#cnblogs_post_body h3,#cnblogs_post_body h4,#cnblogs_post_body h5,#cnblogs_post_body h6 {font-weight: normal;background: #eee;border-radius: 6px;color: red;font-family: "微软雅黑" , "宋体" , "黑体" ,arial;min-height: 25px;line-height: 25px;margin: 18px 5px !important;padding: 8px;opacity: 0.8;border: 1px dashed #aaa;}#cnblogs_post_body h4 {padding-left:20px !important;color:green !important;}.postbody img,.entrylistpostsummary img, .postcon img,.postbody video {max-width: 100%;height: auto;border: none;}#cnblogs_post_body iframe {border: none;}#cnblogs_post_body .caption {display: block;margin-top: 5px;color: #999;position: relative;font-size: 0.9em;padding-left: 25px;}#cnblogs_post_body .caption:before {content: '\f040';position: absolute;font: 1.3em fontawesome;position: absolute;left: 0;top: 3px;}#cnblogs_post_body .video-container {position: relative;padding-bottom: 56.25%;padding-top: 30px;height: 0;overflow: hidden;}#cnblogs_post_body .video-container iframe,#cnblogs_post_body .video-container object,#cnblogs_post_body .video-container embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;margin-top: 0;}#cnblogs_post_body .pullq包文倩uote {float: right;border: none;padding: 0;margin: 1em 0 0.5em 1.5em;text-align: left;width: 45%;font-size: 1.5em;}#blog-comments-placeholder, #comment_form {padding: 20px;background: #fff;-webkit-box-shadow: 1px 10px 10px #ddd;box-shadow: 10px 10px 10px #ddd;margin-bottom: 50px;border: 1px solid #ccc;padding-top:0;}.feedback_area_title {margin-bottom: 15px;font-size: 1.8em;}.feedbackitem {border-bottom: 1px dashed #ccc;margin-bottom: 10px;padding: 5px;}.color_shine {background: rgb(226, 242, 255);}.feedbackitem:hover {-webkit-animation-name: color_shine;-webkit-animation-duration: 2s;-webkit-animation-iteration-count: infinite;}#comment_form .title {font-weight: normal;margin-bottom: 15px;}#ad_under_post_holder {display: none;}.entrylisttitle {color: #999;font-weight: normal;margin-bottom: 30px;text-shadow: 0 0 1px #fff;}.entrylisttitle:before {font-family: fontawesome;content: '\f07b';padding-right: 15px;}.archive {-webkit-box-shadow: 1px 2px 3px #ddd;box-shadow: 1px 2px 3px #ddd;border-bottom: 1px solid #ddd;margin-bottom: 50px;}.archive article {-webkit-box-shadow: none;box-shadow: none;}.archive article .post-content {margin-bottom: 0;}#sidebar{width: 22%;line-height: 1.8em;float: right;}@media screen and (max-width: 900px) {#sidebar {float: none;width: 100%;}}.catlistlink,.catlistmyteams,.catlistcomment,双曲线的定义.catlistfeedback {display: none;}.arch,.newsitem,.catlistpostcategory,.catlistpostarchive,.catlisttag,.catlistview,.catlistblogrank {background: #fff;-webkit-box-shadow: 1px 2px 3px #ddd;box-shadow: 10px 10px 10px #ddd;margin-bottom: 30px;word-wrap: break-word;border-radius: 10px;margin-top: 10px;border: 1px solid #ddd;}#blog-sidecolumn h3, .newsitem h3 {padding: 15px 20px;font-size: 1em;border-bottom: 1px solid #ddd;font-weight: normal;}#blog-sidecolumn ul, .newsitem #blog-news {font-size: 0.9em;padding: 15px 20px;}#blog-sidecolumn ul,#blog-sidecolumn ol,#blog-sidecolumn dl {list-style: none;}#blog-sidecolumn ul ul,#blog-sidecolumn ol ul,#blog-sidecolumn dl ul,#blog-sidecolumn ul ol,#blog-sidecolumn ol ol,#blog-sidecolumn dl ol,#blog-sidecolumn ul dl,#blog-sidecolumn ol dl,#blog-sidecolumn dl dl {list-style: disc;margin-left: 20px;}#q {background: #fff;font-family: "lato", helvetica neue, helvetica, arial, sans-rif;font-style: italic;font-size: 1em;padding: 10px 15px;border: 1px solid #ddd;width: 100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;color: #999;height: 100%;}#q:focus {color: #444;}/*隐藏搜索框中的无用组件*/.myarch {display: none;}#sidebar .tag small {margin-left: 15px;color: #999;}#sidebar .tag small:before {content: '(';}#sidebar .tag small:after {content: ')';}#sidebar .twitter li {border-bottom: 1px solid #ddd;padding: 15px 20px;font-size: 0.9em;}#sidebar .twitter li:last-of-type {border-bottom: none;}#sidebar .twitter small {display: block;margin-top: 10px;color: #999;line-height: 1;}#sidebar .tagcloud .entry {padding-right: 5px;}#sidebar .tagcloud a {margin-right: 10px;display: inline-block;}#footer {color: #999;margin-bottom: 50px;font: 0.9em/1.6 "lato", helvetica neue, helvetica, arial, sans-rif;text-shadow: 0 0 1px #fff;text-align:center;margin: 30px 0px 50px;}.entry .gist {background: #eee;border: 1px solid #ddd;margin-top: 15px;padding: 7px 15px;-webkit-border-radius: 2px;border-radius: 2px;text-shadow: 0 0 1px #fff;line-height: 1.6;overflow: auto;color: #666;}.entry .gist .gist-file {border: none;font-family: inherit;margin: 0;font-size: 0.9em;}.entry .gist .gist-file .gist-data {background: none;border-bottom: none;}.entry .gist .gist-file .gist-data pre {padding: 0 !important;font-family: monaco, menlo, consolas, courier new, monospace;}.entry .gist .gist-file .gist-meta {background: none;color: #999;margin-top: 5px;padding: 0;text-shadow: 0 0 1px #fff;font-size: 100%;}.entry .gist .gist-file .gist-meta a {color: #258fb8;}.entry .gist .gist-file .gist-meta a:visited {color: #258fb8;}figure.highlight {background: #eee;border: 1px solid #ddd;margin-top: 15px;padding: 7px 15px;-webkit-border-radius: 2px;border-radius: 2px;text-shadow: 0 0 1px #fff;line-height: 1.6;overflow: auto;position: relative;font-size: 0.9em;}figure.highlight figcaption {color: #999;margin-bottom: 5px;text-shadow: 0 0 1px #fff;}figure.highlight figcaption a {position: absolute;right: 15px;}figure.highlight pre {border: none;padding: 0;margin: 0;}figure.highlight table {margin-top: 0;border-spacing: 0;}figure.highlight .gutter {color: #999;padding: 7px 10px 7px 5px !important;border-right: 1px solid #ddd;text-align: right;}figure.highlight .code {padding: 7px 7px 7px 10px !important;border-left: 1px solid #fff;color: #666;}pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc {color: #93a1a1;font-style: italic;}pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title {color: #859900;}pre .number,pre .command,pre .string,pre .tag .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor {color: #2aa198;}pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl,pre .literal,pre .id {color: #268bd2;}pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type {color: #b58900;}pre .preprocessor,pre .preprocessor .keyword,pre .shebang,pre .symbol,pre .symbol .string,pre .diff .change,pre .special,pre .attr_lector,pre .important,pre .subst,pre .cdata,pre .clojure .title {color: #cb4b16;}pre .deletion {color: #dc322f;}.feedbackmanage {width: 160px;position: absolute;right: 0;text-align: right;}.cnblogs_code_toolbar {display: none;}#cnblogs_post_body {overflow: hidden;}#cnblogs_post_body ol {padding-left: 40px;}#cnblogs_post_body ul {margin-left: 35px;}.fixedreadrank {position: fixed;top: 20px;width: 270px;}.fixedrecrank {position: fixed;top: 360px;width: 270px;}figure.highlight {margin-top: 0;padding: 0;}figure table {width: 100%;margin: 0 !important;}#cnblogs_post_body pre {padding: 0;}#cnblogs_post_body th,#cnblogs_post_body td {padding: 0;}.cnblogs_code pre {padding: 7px 15px !important;background: #f5f5f5;border: 0;margin-top: 0;}.cnblogs_code th {border: 1px solid silver;padding: 3px;}.cnblogs_code {padding: 0;}/*评论标题*/.feedback_area_title {padding:10px;font-size:24px;font-weight:bold;color:#aaa;border-bottom:1px dashed #ccc;}.feedbacklistsubtitle {font-size:12px;color:#888;}.feedbacklistsubtitle a {color:#888;}.comment_quote {background: #eee;padding: 15px;border: 1px dashed #aaa;border-radius: 5px;}#commentform_title {color:#aaa;background-image:none;background-repeat:no-repeat;margin-bottom:10px;padding:10px 20px 10px 10px;font-size:24px;font-weight:bold;border-bottom:1px dashed #ccc;}/*评论框*/#comment_form {margin:10px 0;padding:25px;border-radius: 10px;height: 343px;overflow: hidden;}.commentform {margin:10px 0;padding:10px 20px;background:#fff;}/*评论输入域*/#tbcommentbody {font-family:'microsoft yahei';margin-top:10px;background:white;color:#333;border:2px solid #fff;box-shadow:int 0 0 8px #aaa;height:120px;font-size:14px;min-height:120px;border-radius: 10px;}/*评论条目*/.feedbackitem {font-size:14px;line-height:24px;margin:10px 0;padding:20px;padding-top:5px;}.feedbacklistsubtitle {font-weight:normal;}/*green_channel*/#green_channel {text:align:right;padding-left:0px;font-weight:normal;font-size:13px;width:100%;border:1px dashed #ccc;color:#fff;border-radius:4px;margin:5px auto;}@media screen and (max-width: 768px) {body {font-size: 13px;}#main{padding:0px !important;}#maincontent{width: 96%;float: left;margin: 0px 2%;}#sidebar {display: none;}#blogtitle {width: 100%;float:none;margin: 20px auto 0 !important;}#header {height:auto !important;margin: 20px auto 5px;}#header #navigator {width: 100%;text-align: center;float:none;}#header #navigator ul {width: 100%;margin-left: 6%;}#header #navigator ul li {float: left;width: 25%;text-align: center;margin-right:0px;}.posttitle, .entrylistposttitle {font-size:14px;padding: 20px 20px 15px 0px;}.postdesc, .entrylistitempostdesc {padding: 0px 20px 15px 0px;}#green_channel {padding:0px !important;}#blog_stats {display: none;}}#blog-news label {box-shadow:5px 5px 5px #cccccc;text-shadow:5px 5px 5px #cccccc;border-radius:5px;}div.commentform textarea.comment_textarea {padding: 10px;}#tbcommentbody{width:98%;}#cnblogs_post_body h3:hover {color: green;font-size: large;font-weight: bold;}

之后的设置以及操作步骤可见上篇文章：一套简约漂亮的响应式博客园主题皮肤分享给你们

三、文章列表页添加动态效果

1. 首先copy如下的css，然后追加在上一步css的后面。

/* 文章title自定义带动画样式 */.posttitle {font-family: "lato", helvetica neue, helvetica, arial, sans-rif;clear: both;background-color: #fbf9f9;margin-bottom: 8px;padding-top: 5px;padding-bottom: 5px;margin-top: 20px;border-left: 3px solid #21759b;padding-left: 20px;font-size: 20px;border-radius:0px;}.posttitle a:hover {text-decoration: none;margin-left: 20px;color: #e00000;}.posttitle a:link,.posttitle a:visited,.posttitle a:active {transition: all 0.4s linear 0s;}

2. 效果如下：

四、添加自定义时钟

1. 首先在侧边栏公告的代码区添加如下html+jss代码

<!-- 添加公告栏时钟 --><div style="border-top: 1px dashed #ccc;padding: 5px;border-bottom: 1px dashed #ccc;height: 120px;"><div id="clockdiv"><canvas id="dom" width="120" height="120">时钟canvas</canvas></div></div><script type="text/javascript" src="https://files.cnblogs.com/files/shwee/clock.js"></script>

侧边栏公告的代码区如下：

2. 然后copy如下的css，然后添加在上一步css的后面

/* 定制公告栏时钟位置 */#clockdiv {text-align: center;}

3.效果如下：

五、添加打赏插件

1. 在后台管理的文件选项下上传自己的微信和支付宝收款二维码

上传成功后，右键拷贝文件地址备用。文件不能上传的话请使用相册上传，或者引用外部链接

2.在页首html代码区中添加如下代码：

<script>window.tctipconfig = {staticprefix: "http://static.tctip.com",buttonimageid: 7,buttontip: "dashang",list:{alipay: {qrimg: "/d/file/titlepic/zfb_receivemoney.bmp"},weixin:{qrimg: "/d/file/titlepic/sorry.cnblogs.com src="/d/file/titlepic/sorry.cnblogs.com type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/hafiz/myrewards.css">

注意：上面alipay后面填自己支付宝收款二维码链接、weixin后面填自己微信收款二维码链接。

3.设置完成并保存成功以后，你就可以看到如下图所示的打赏插件了：

新版本的打赏插件的教程传送门：怎样使用两行代码实现博客园打赏功能

六、漂亮的评论列表

1. 在页首html代码区中添加如下代码：

<link  type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/hafiz/feedback.css">

2. 在页脚html代码中添加如下js代码：

<script type="text/javascript">$(function(){$('#blogtitle h1').addclass('bounceinleft animated');$('#blogtitle h2').addclass('bounceinright animated');// 删除反对按钮$('.buryit').remove();initcommentdata();});function initcommentdata() {$('.feedbackitem').each(function() {var text = $(this).find('.feedbacklistsubtitle .layer').text();// 将楼层信息放到data里面// $(this).find('.blog_comment_body').attr('data-louceng', text.replace(/^#/g, ''));if($(this).find('.feedbacklistsubtitle .louzhu').length>0) $(this).addclass('mylf');var avatar = $(this).find('> .feedbackcon > span').html() || '/d/file/titlepic/sample_face.gif';$(this).find('> .feedbackcon > .blog_comment_body').append('<img class="ur-avatar" src="'+avatar+'"/>')});}$(document).ajaxcomplete(function(event, xhr, ttings) {// 监听获取评论ajax事件if(ttings.url.indexof('/mvc/blog/getcomments.aspx') >= 0) {initcommentdata();}});</script>

3. 那就能看到仿微信聊天对话样式的评论区了，而且还有一个彩蛋是：鼠标经过评论区头像时，头像旋转。

是不是很清新？感觉成了博客园的一股清流。哈哈：）

七、添加带火箭飞天效果的返回顶部

1. 在页脚html代码区中添加如下代码：

<script src="/d/file/titlepic/sorry.cnblogs.com id="scrolltop" style="display:none;"><div class="level-2"></div><div class="level-3"></div></div><script src="/d/file/titlepic/sorry.cnblogs.com type="text/javascript">ui.global_arch();var uvoptions = {};// !important(function() {initscrolltop();})();</script>

注意：其中jquery-migrate-1.2.1.js是为了解决scroll2top.js中使用了低版本jquery的已过时方法的错误。

2. 在页面定制css代码区中添加如下css代码：

/*scroll to top*/#scrolltop div{left:0;overflow:hidden;position:absolute;top:0;width:149px;margin:0;padding:0}#scrolltop .level-2{background:url(http://images2015.cnblogs.com/blog/894443/201707/894443-20170716165243785-2122236756.png) no-repeat scroll -149px 0 transparent;display:none;height:250px;opacity:0;z-index:1}#scrolltop .level-3{background:none repeat scroll 0 0 transparent;cursor:pointer;display:block;height:150px;z-index:2}#scrolltop{background:url(http://images2015.cnblogs.com/blog/894443/201707/894443-20170716165243785-2122236756.png) no-repeat scroll 0 0 transparent;cursor:default;display:block;height:180px;overflow:hidden;position:fixed;right:0;top:90%;width:149px;z-index:11;margin:-125px 0 0;padding:0}

3. 保存以后你就能看到如下效果的返回顶部

然后尝试着点击一下，你会神奇的发现：火箭竟然被点火然后升天了，页面也返回到了顶部，是不是很厉害的样子？哈哈，我自己都佩服我自己。：）

八、自定生成文章目录

1.在页面定制css代码区中添加如下css代码：

/*目录样式*/#sidecatalog a{font-size:12px;font-weight:normal !important;}

2. 在博客侧边栏公告区中添加如下js代码：

<script type="text/javascript">//以下是锚点js，自动生成目录var a = $(document);a.ready(function() {var commentdiv = $("#blog-comments-placeholder");if (commentdiv.length <= 0) {return;}var b = $('body'),d = 'sidetoolbar',e = 'sidecatalog',f = 'sidecatalog-catalog',g = 'sidecatalogbtn',h = 'sidetoolbar-up',i = '<div id="sidetoolbar"style="display:none;bottom:150px;">\<div class="sidecatalogbg"id="sidecatalog">\<div id="sidecatalog-sidebar">\<div class="sidecatalog-sidebar-top"></div>\<div class="sidecatalog-sidebar-bottom"></div>\</div>\<div id="sidecatalog-catalog">\<ul class="nav"style="width:225px;zoom:1;list-style: none;">\</ul>\</div>\</div>\<a href="javascript:void(0);"id="sidecatalogbtn"class="sidecatalogbtndisable" style="position:absolute;bottom:10px;"></a>\</div>',j = '',k = 500,l = 0,m = 0,n = 0,//限制存在个数，如数量过多，则只显示h2，不显示h3//o, p = 13,o, p = 100,q = true,r = true,s = b;if(s.length === 0) {return};b.append(i);//指定获取目录的范围-------------这一点非常重要，因为每个人指定的范围都不一样，所以这是要修改的地方//o = s.find(':header');o = $('#cnblogs_post_body').find(':header');if(o.length > p) {r = fal;var t = s.find('h3');var u = s.find('h4');if(t.length + u.length > p) {q = fal}};o.each(function(t) {var u = $(this),v = u[0];var title = u.text();var text = u.text();u.attr('id', 'autoid-' + l + '-' + m + '-' + n)//if (!u.attr('id')) {//    u.attr('id', 'autoid-' + l + '-' + m + '-' + n)//};if(text.length > 12) text = text.substr(0, 12) + "...";if(v.localname === 'h3') {l++;m = 0;//if(text.length > 12) text = text.substr(0, 12) + "...";j += '<li><a href="#' + u.attr('id') + '" title="' + title + '">' + text + '</a><span class="sidecatalog-dot" style="top:8px;"></span></li>';} el if(v.localname === 'h4') {m++;n = 0;if(q) {//if(text.length > 12) text = text.substr(0, 12) + "...";j += '<li class="h2offt"><a href="#' + u.attr('id') + '" title="' + title + '">' + text + '</a></li>';}} el if(v.localname === 'h5') {n++;if(r) {j += '<li class="h3offt"><a href="#' + u.attr('id') + '" title="' + title + '">' + u.text() + '</a></li>';}}});$('#' + f + '>ul').html(j);b.data('spy', 'scroll');b.data('target', '.sidecatalogbg');$('body').scrollspy({target: '.sidecatalogbg'});$sidecatelog = $('#' + e);$sidetoolbar = $('#' + d);$('#sidecatalogbtn').hover(function () {$sidecatelog.css('display', 'block');});$sidetoolbar.hover(function(){}, function(){$sidecatelog.css('display', 'none');});$('#' + h).on('click', function() {$("html,body").animate({scrolltop: 0}, 500)});a.on('scroll', function() {var t = a.scrolltop();if(t > k) {$sidetoolbar.css('display', 'block');$('#gotop').show()} el {$sidetoolbar.css('display', 'none')$('#gotop').hide()}})});//以上是锚点js</script>

注意，这段代码不是很难理解，原版的教程，我是在原版的基础上根据自己写文章的喜好修改的(包括我写文章比较喜欢用h3、h4，还有显示样式以及鼠标移入移除的效果等)。

3.在页首html代码中加入如下css引用：

<link  type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/miangao/maodian.css">

4. 在页脚html代码中添加如下js引用：

<script src="https://files.cnblogs.com/files/miangao/bootstrap.min.js"></script>

5.设置好并保存后，效果如下：

每当我们写好文章发布后，就会根据文章内容自动生成对应的目录，对于读者或者我们自己都会方便很多。

九、设置好看的滚动条样式

在页面定制css代码区中添加如下css代码：

/*好看的滚动条*/::-webkit-scrollbar{width:10px!important;height:10px!important;-webkit-appearance:none;}::-webkit-scrollbar-thumb{height:5px;border:1px solid transparent;border-top:none;border-bottom:none;-webkit-border-radius:6px;background-color:rgba(0,0,0,.3);background-clip:padding-box;}

这样我们就看到了很漂亮的滚动条样式了，再也不用忍受浏览器自带的那么丑的滚动条了。

十、好看点赞按钮

1.在页面定制css代码区中添加如下css代码：

#div_digg{padding: 5px;border-radius: 5px;position: fixed;left: 0;bottom: 80px;width:80px;z-index:100;}.diggit{background: url(http://images2017.cnblogs.com/blog/894443/201709/894443-20170920105433618-867225449.png) no-repeat;width: 60px;height: 60px;}#div_digg .diggnum{position: absolute;bottom: -20px;left: 6px;background: #d0d0d0;padding: 2px 0;display: block;color: #555;font-size: 12px;text-align: center;width: 60px;-moz-border-radius: 4px;-webkit-border-radius: 4px;font-weight: bold;}/* 删除反对按钮,有点邪恶了 */.buryit{display: none;}

这样我们就可以看到如下效果的点赞按钮了~

有木有很棒棒~