zoukankan      html  css  js  c++  java
  • 博客园打赏设置

    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%;
        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;
        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 {
        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;
         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('20262d02-687d-4752-11ca-08d49c352df3');");
            }, 900);
    </script>
    
    
    <div style="font-size: 18px" width="350" height="300" align="center"><b>&nbsp;&gt;&gt;&gt;转载请注明出处&lt;&lt;&lt;</b></div>

    好了,再看看你的每一篇博文的最后,是否已经加上了自己的签名了 ^_^

    2、右侧悬飘打赏设置: 

    页首Html代码:(这是一个github上的开源项目)自己找找吧

    <!-- 打赏插件 -->
    <script>
    window.tctipConfig = {
            imagePrefix: "http://files.cnblogs.com/files/kdy11/",
            cssPrefix:     "http://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

  • 相关阅读:
    山屋惊魂 · 大模拟 · 码长破千 · 祭
    CSP-S 模拟92
    CSP-S 模拟91
    关于我
    CSP-S 模拟76
    [2020 年联考 A 卷] HEOI 2020 退役记
    csp-s 2019 退役记
    论人贵有自知之明的重要性
    [NOI2018] 你的名字
    HDU 3446 daizhenyang's chess
  • 原文地址:https://www.cnblogs.com/mmzs/p/8404274.html
Copyright © 2011-2022 走看看