在网上看到博客园里的不少园友都在本身每篇文章以后,增长了本身的个性的签名,而且不少支持自定义的js和自定义的css代码,我怀着好奇也去网上搜了一圈,没有找到我想要的结果,(也许是我搜索的不对 ^_^), 那我就拼接一个想要的签名吧,因而从网上找来零碎的代码并组合,因而就获得了本身想要的签名了。javascript
咱们就来作个求打赏的签名吧,支付宝求打赏签名测试代码:css
在设置页面的左边菜单“博客签名”使用的代码:html
<!-- 支付宝遮罩 --> <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/mq0036/508398/o_12.png"> <p class="mid">您的资助是我最大的动力!<br>金额随意,欢迎来赏!</p> <!-- 欢迎资助我持续写做,金额随意,欢迎来赏! --> </div> <!-- 签名 --> <div class="autograph"> <p> <span style="display: none"> 若是,您认为阅读这篇博客让您有些收获,不妨点击一下右下角的<a id="btnRecommendMyBlog">【<strong>推荐</strong>】</a>按钮。<br> </span> 若是,您但愿更容易地发现个人新博客,不妨点击一下绿色通道的<a id="guanzhuwo">【<strong>关注我</strong>】</a>。</p> <div class="blogds">若是,想给予我更多的鼓励,<span class="bold">求打</span> <a class="btn_donate" style="position: absolute" id="btn_donate" title="Donate 打赏" target="_self"></a> </div> <p>由于,个人写做热情也离不开您的确定支持,感谢您的阅读,我是【<strong>Jack_孟</strong>】!</p> </div>
在博客园后台设置-->页面定制CSS代码java
<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:300px; z-index:1000; background:#0aa; left:50%; 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: #FFF7DC; border: 2px solid #FFBFBF; 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("http://files.cnblogs.com/files/yanweidie/btn_reward.gif") no-repeat; _background: url("http://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代码web
<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('33513f9f-ba13-e011-ac81-842b2b196315');"); }, 900); </script>
好了,在看看你的每一篇博文的最后,是否已经加上了本身的签名了 ^_^express
参考出处:http://www.cnblogs.com/allanbolt/archive/2009/12/30/1635665.htmlide
http://www.jb51.net/article/44354.htm测试