博客園文章個性簽名

 在網上看到博客園裏的不少園友都在本身每篇文章以後，增長了本身的個性的簽名，而且不少支持自定義的js和自定義的css代碼，我懷着好奇也去網上搜了一圈，沒有找到我想要的結果，(也許是我搜索的不對  ^_^)， 那我就拼接一個想要的簽名吧，因而從網上找來零碎的代碼並組合，因而就獲得了本身想要的簽名了。

咱們就來作個求打賞的簽名吧，支付寶求打賞簽名測試代碼：

在設置頁面的左邊菜單「博客簽名」使用的代碼：

<!-- 支付寶遮罩 -->
<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代碼

<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代碼

<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>

 

 

 

好了，在看看你的每一篇博文的最後，是否已經加上了本身的簽名了 ^_^

 

參考出處：http://www.cnblogs.com/allanbolt/archive/2009/12/30/1635665.html

http://www.jb51.net/article/44354.htm