博客园打赏设置
1、个性签名中打赏设置:
我们就来做个求打赏的签名吧,支付宝求打赏签名测试代码:
在设置页面的左边菜单“博客签名”使用的代码:
<div class="div_masklayer" id="div_masklayer"></div> <div class="div_popup" id="Div_popup"> <img class="img_zfb" id="img_zfb" src="http://images.cnblogs.com/cnblogs_com/mmzs/1152946/o_zhichi.jpg"> <p class="mid" style="color: white; font-size: 16px">您的资助是我最大的动力!<br>金额随意,欢迎来赏!</p> </div> <div class="autograph"> <p style="font-size: 16px"> <span style="display: none"> 如果,您认为阅读这篇博客让您有些收获,不妨点击一下右下角的<a id="btnRecommendMyBlog">【<strong>推荐</strong>】</a>按钮<br> </span> 如果,您希望更容易地发现我的新博客,不妨点击一下绿色通道的<a id="guanzhuwo">【<strong>关注我</strong>】</a>。</p> <div class="blogds" style="font-family: 楷体; font-size: 19px"><b>如果,想给予我更多的鼓励,</b><span class="bold">求打</span> <a class="btn_donate" style="position: absolute" id="btn_donate" title="Donate 打赏" target="_self"></a> </div> <p style="font-size: 16px">因为,我的写作热情也离不开您的肯定支持,感谢您的阅读,我是<a href="http://www.cnblogs.com/mmzs">【<strong>淼淼之森</strong>】</a>!</p> </div>
在博客园后台设置-->页面定制CSS代码:
<!-- 打赏个性签名 --> <style type="text/css"> * { margin:0; padding:0; } html { _background:url(about:blank); } /**//* 阻止闪动 in IE6 , 把空文件换成about:blank , 减少请求 */ body { background:#fff; font: 12px/1.5 Tahoma, Geneva, \\5b8b\\4f53, sans-serif; height:100%; } .custom_hide { display: none; } .mid { font-size:18px; font-weight:bold; color:#f9f; text-align:center; vertical-align:top; line-height:24px; } /**//** 遮罩层 **/ .div_masklayer { background:#000; display:none; filter:alpha(opacity = 50); opacity:0.5; top:0; left:0; height:100%; width:100%; z-index:999; position:fixed; _position:absolute; _left: expression(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth); _top: expression(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight); } /**//** 弹出层 **/ .div_popup { display:none; width:50%; z-index:1000; background:#0aa; left:30%; top:50%; position:fixed!important; margin-left:-150px !important; _position:absolute; _top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat')? documentElement.scrollTop + (document.documentElement.clientHeight - this.offsetHeight)/2: /**//*IE6*/ document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2); /**//*IE5 IE5.5*/ } /*图片样式*/ .img_zfb { width:100%; height:100%; } /*签名*/ .autograph { padding: 15px; background-color: #F0DEC5; border-radius: 6px; font-family:"Courier New", 微软雅黑, Consolas, Arial, 宋体; } .custom_hide { display: none; } .blogds { height:82px; line-height:82px; } a.btn_donate { display: inline-block; width: 82px; height: 82px; background: url("https://files.cnblogs.com/files/yanweidie/btn_reward.gif") no-repeat; _background: url("https://files.cnblogs.com/files/yanweidie/btn_reward.gif") no-repeat; -webkit-transition: background 0s; -moz-transition: background 0s; -o-transition: background 0s; -ms-transition: background 0s; transition: background 0s; } a.btn_donate:hover { cursor:pointer; background-position: 0px -82px; background-color:unset !important; } .bold { font-weight: bold; } </style>
我们在设置页面-->页脚Html代码:
<script type="text/javascript"> // 博客签名脚本 // function btn_donateClick() { var DivPopup = document.getElementById('Div_popup'); var DivMasklayer = document.getElementById('div_masklayer'); DivMasklayer.style.display = 'block'; DivPopup.style.display = 'block'; var h = Div_popup.clientHeight; with (Div_popup.style) { marginTop = -h / 2 + 'px'; } } function MasklayerClick() { var masklayer = document.getElementById('div_masklayer'); var divImg = document.getElementById("Div_popup"); masklayer.style.display = "none"; divImg.style.display = "none"; } setTimeout( function () { document.getElementById('div_masklayer').onclick = MasklayerClick; document.getElementById('btn_donate').onclick = btn_donateClick; var a_gzw = document.getElementById("guanzhuwo"); a_gzw.href = "javascript:void(0);"; $("#guanzhuwo").attr("onclick","follow('20262d02-687d-4752-11ca-08d49c352df3');"); }, 900); </script> <div style="font-size: 18px" width="350" height="300" align="center"><b> >>>转载请注明出处<<<</b></div>
好了,再看看你的每一篇博文的最后,是否已经加上了自己的签名了 ^_^
2、右侧悬飘打赏设置:
页首Html代码:(这是一个github上的开源项目)自己找找吧
<!-- 打赏插件 --> <script> window.tctipConfig = { imagePrefix: "https://files.cnblogs.com/files/kdy11/", cssPrefix: "https://files.cnblogs.com/files/kdy11", buttonImageId: 4, buttonTip: "dashang", list:{ alipay: {qrimg: "https://files.cnblogs.com/files/mmzs/zfb.bmp"}, weixin:{qrimg: "https://files.cnblogs.com/files/mmzs/weichat.bmp"}, } }; </script> <script src="https://files.cnblogs.com/files/mmzs/tctip.js"></script>
参考出处:https://www.cnblogs.com/mq0036/p/7048716.html