• 博客园—打赏功能


    转载:http://www.cnblogs.com/wuql/p/6144791.html

    最近我和朋友交流的时候,她告诉我她所使用的博客自带打赏功能。

    我仔细查看了一下,博客园好像没有自带这个功能。

    但是,我看到好多朋友的博客园都使用了“打赏”或“赞助”。所以,我迫不及待的想给自己也加上那么一个插件。

    但是,搜索了很多帖子,按照他们的步骤操作后,我的“打赏”功能依旧没有显示。

    后来,我才发现自己漏了关键的一步而博主却没说明。

    下面给需要的小伙伴分享一下,整个“打赏”功能的实现:(该方法比较方便,不用再去下载插件)

    第一步:进入“我的博客”->“管理”->“设置”,往下拉,找到“博客侧边栏公告”后面,申请“JS”使用。

    申请成功后显示为这样:

        (我的就是因为没有申请,所以一开始怎么也没有显示。低级错误)

    第二步:准备 一张【支付宝收款的二维码】  和  一张【微信收款的二维码】;且这两张图片的格式后缀改为“.bmp”。例如,我自己的支付宝图片名称为“zhifubao.bmp”。并将它们通过“管理”->“文件”,上传至博客文件夹。

    第三步:复制我下面这段代码,

     
    <script>
    window.tctipConfig = {
    staticPrefix: "http://static.tctip.com",
    cssPrefix: "http://static.tctip.com",
    buttonImageId: 5,
    buttonTip: "dashang",
    list:{
    alipay: {qrimg: "http://files.cnblogs.com/files/wuql/zhifubao.bmp"},
    weixin:{qrimg: "http://files.cnblogs.com/files/wuql/weixin.bmp"},
    }
    };
    </script>
    <script src="http://static.tctip.com/js/tctip.min.js"></script>
     

    你要修改的地方是我用红色和绿色的部分,其中,红色部分是你的博客地址名,实在不知道的话,你可以通过“我的博客”->“管理”->“设置”找到

    绿色的部分就是你刚才上传的图片的名称。请一一对应修改。

    第四步:找到“我的博客”->“管理”->“设置”,就是刚才查看博客名的页面,将页面往下拉,找到“页首Html代码”这个位置,将修改好的代码复制进去。

    保存就可以啦。

    我这种方法比较简单,不用下载插件。如果想要更深的了解,可以访问https://github.com/greedying/tctip这个网址,我就是从这里借鉴的。

    以上仅是个人实践后的分享。欢迎补充。

    ================第三步会出现(已阻止载入混合活动内容****)=======================

    解决方法在:将http改为https

    <script>
    window.tctipConfig = {
    staticPrefix: "https://static.tctip.com",
    cssPrefix: "https://static.tctip.com",
    buttonImageId: 5,
    buttonTip: "dashang",
    list:{
    alipay: {qrimg: "http://files.cnblogs.com/files/lxwphp/zhifubao2.bmp"},
    weixin:{qrimg: "http://files.cnblogs.com/files/lxwphp/weixin.bmp"},
    }
    };
    </script>
    <script src="https://static.tctip.com/js/tctip.min.js"></script>
  • 相关阅读:
    暑假集训Day1 整数划分
    暑假集训day1 水题 乘法最大
    暑假集训Day0
    【不知道什么专题】——历年几道难题的分析。
    开发语言之我见
    选择器IDEA Maven不见了
    js 里函数调用之call
    js 闭包 匿名函数 JavaScript的IIFE(即时执行方法)immediately-invoked function expression
    ideal-check项目
    浏览器内部工作原理
  • 原文地址:https://www.cnblogs.com/lxwphp/p/10238894.html
Copyright © 2020-2023  润新知