打赏功能的实现

github地址：https://github.com/greedying/tctip

先上传文件

css样式文件:myReward.css

支付二维码

支付方式图片

css引用的图片

打赏或者赞助按钮图片

注意把图片格式改成bmp，博客园只支持bmp格式的图片

修改js源代码并上传

为什么要修改js源代码，因为博客园的文件是不包含文件夹的，文件只有一个地址，输入文件地址即可查看文件

上面这个要把img去掉

同时如果我们要用到其中的某几个比如说支付宝和微信，我们必须把这个路径改成它们的绝对路径

上面这个得把css去掉

buttonImageId对应的是你上传的文件名称的结尾数，比如上面的是值是3，buttonTip是打赏，那么对应的你需要上传的是打赏文件夹下的tab_3.png(要改成bmp)

当然，我们不需要在js改这个参数配置，因为这些都是可以配置的。只需要把css去掉就同时css改成绝对路径。

由于我们使用固定的打赏样式，所以，这里直接改成我们选中的那个样式

?


1

2

3

4

buttonImageUrl: function(){

var id = tctip.myConfig.buttonImageId;

var tip = tctip.myConfig.buttonTip;

return tctip.imageUrl("http://files.cnblogs.com/files/JAYIT/tab_3.bmp");//我选的是这个样式，注意 要用文件的绝对地址

?


1 		 

　

上传文件　

最后，把修改好的js上传上去

引用js，添加配置文件

?


1

2

3

4

5

6

7

8

9

10

11

12

<script>

window.tctipConfig = {

imagePrefix: "图片文件的相对路径", //这个可以为空

cssPrefix: "样式文件的相对路径",//这个也可以为空

//staticPrefix: "http://static.tctip.com",

buttonImageId: 4,

buttonTip: "dashang",

list:{

alipay: { qrimg: "支付宝二维码绝对路径"},

weixin: { qrimg: "微信二维码绝对路径"},

}};

</script>

?


1

<script type="text/javascript" src="http://files.cnblogs.com/files/JAYIT/tctip.js"></script>

?


1

<script type="text/javascript" src="http://files.cnblogs.com/files/JAYIT/qrcode.js"></script>

不引用它的压缩版就需要引用上面两个js

最后记得把css的样式改下，里面引用了三个图片，有两个我找到了要传到博客园里面，然后在css文件里面引用图片绝对路径，然后把css上传上去然后引用css即可

http://www.cnblogs.com/JAYIT/p/5475097.html

时间： 2024-10-07 11:00:41

打赏功能的实现的相关文章

博客园 打赏功能设置，友言，友荐，分享功能设置

一.jiaThis 分享到设置 <!-- JiaThis Button BEGIN --><script type="text/javascript" src="http://v3.jiathis.com/code/jiathis_r.js?move=0&btn=r5.gif" charset="utf-8"></script><!-- JiaThis Button END --> 二.友荐

自己制作博客园打赏功能

功能:给自己博客园添加支付宝.微信(后续)打赏功能(用javascript) 效果图:主要是侧边栏打赏 原文地址:https://www.cnblogs.com/lwbjyp/p/8474570.html

#WordPress小技巧#纯代码为自己博客添加支付宝/微信打赏功能

原文:https://www.wn789.com/13323.html 很多人的WordPress博客在文章尾部都有打赏功能,让读者可以直接通过扫描微信.支付宝二维码进行赞助,毕竟维护博客,编写博文需要花费不少的精力,大多数朋友和蜗牛一样都是利用自己业余时间对博客进行管理与维护(如果大家觉得蜗牛789文章能起到一定帮助作用,也欢迎对蜗牛进行打赏,目前大家可以通过支付宝扫红包活动对蜗牛进行打赏,无需自己掏腰包#每日#支付宝扫码最高领取99元红包 可用于店面消费或捐赠蜗牛). 在此文章中蜗牛为大家分

博客园个人博客增加打赏功能心得

1.收款码1.1 保存把自己的支付宝和微信二维码收款码(注意是收款码而不是付款码,别搞错)两个图片保存到电脑,并使用图片编辑工具(Windows自带画图软件,或者QQ等其他截图工具都可以)只截取二维码部分即可. 1.2 上传进入个人博客,点“管理”,再点“相册”,添加好相册名称(类似文件夹名称),并上传这两个收款二维码,然后可以在图片上面右击鼠标查看或复制图片网址. 2.JS2.1 开通博客JS权限点“设置”,找到“博客侧边栏公告(支持HTML代码)”,点击[申请JS权限],这里需要填写理由,一

设计模式实例:中介模式实现打赏功能

实现功能: 1.用户A向用户B打赏金币 2.减少用户A的金币,并写入金币明细表 3.增加用户B的金币,并写入金币明细表 4.给用户B发送一个打赏通知 ps:本文中的同事,并非是指该类为同事,而是沿用中介者模式中的称呼.与中介者打交道的各个类. 一.虚拟同事类: /** * Class Colleague */ abstract class Colleague { protected $mediator; public function setMediator(Mediator $mediator

教你一招：网站增加打赏功能

1.前提条件: 设置——博客设置——博客侧边栏公告(支持HTML代码)后面的如果是“申请开通”,必须先申请开通:如果是“支持js代码”,那就代表你已经开通过了,有写js代码的权限了 2.准备材料: 微信收款二维码图片,支付宝收款二维码图片等(图片建议尺寸244*227) 3.步骤: (1)将微信和支付宝的图片放在一个外网可以访问的地方(下面需要使用图片的链接,推荐放到博客园的文件中.可以在文件,上传文件中操作,博客园上传的文件由大小限制,图片不要太大了) (2)模板代码 <!DOCTYPE ht

自制简易打赏功能

1.申请开通cnblogs的JS代码支持 2.将微信收款码图片上传到cnblogs 3.将如下代码中的http://files.cnblogs.com/files/eritpang/weixin.bmp替换为刚刚上传的收款码图片的链接地址,然后将代码添加到设置->博客侧边栏公告(支持HTML代码)(支持JS代码)里面,再点击“保存”即可. 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu

推荐实用的公众号（一）--微信文章打赏功能

在这家公众号里,可以使用文章打赏工具. 风信子同学录的小伙伴们也有一份九月的惊喜——风信子的后台工作团队,为你的美文点赞!点赞还不足以表达我们的态度,真金白银献给你! 活动规则 ☆ 凡在10月份发布的文章,如果通过了风信子主编的认可,列入了“推荐”,风信子客服小开会立即打赏 5 元! 注意: 1 主编喜欢优美.正能量.原创的文章 2 文章被推荐后人人都可打赏 3 计算“打赏人次”时,重复的打赏人不算 怎样才能被推荐? 1 文章写得好 2 发布文章时,不要去掉“允许风信子同学录推荐”的勾选 3 在

打赏：关于博客园打赏的功能

今天在网上浏览资料的时候,发现别的博主都有打赏功能了,感觉很好奇,试了试几种方法,最后也把这个博客园的打赏功能弄出来了.大家好奇么,想知道怎么做到的朋友,请留言~~~ 欧耶欧耶~~~