导航菜单
首页 >  » 正文

mipcms给文章末尾增加收款码,让你轻松赚钱

一、制作支付宝和微信的收款码,并上传网站。

1.1、把支付宝和微信的收款码图片,进行剪切,只要中间的二维码内容即可。

1.2、使用美图秀秀新建一个200*200的白色的空白图片,把支付宝截图下来的图片,以添加饰品的方式,添加到这个空白的图片上面,并且打上支付宝支付,同样的微信收款码也打上微信支付的的字样,方便用户知道,哪一张图片是哪一个支付。

1.3、把制作好的支付宝的收款码的图片重命名为alipay200.jpg,代表是支付宝200*200大小的收款码图片。微信收款码的图片重命名为weixinpay200.jpg代表是200*200大小的微信收款码,使用ftp上传到网站根目录的img文件夹里面。(为什么不叫alipay.jpg和weixinpay.jpg呢?因为我是把完整的支付宝收款码才叫alipay.jpg,完整的微信收款码才叫weixinpay.jpg,在专用的独立支付页面才使用)


二、添加一个叫做在线支付的广告代码

2.1、后台--插件--插件管理--广告管理--管理--添加广告

2.2、广告名称:在线支付

2.3、广告别名:pay

2.4、广告代码:

<div align="center">
<div class="pay" align="center">通过支付宝或者微信进行在线支付
<div class="alipay"><mip-img src="https://www.kcs2.top/img/alipay200.jpg" alt="支付宝支付"></mip-img></div>
<div class="weixinpay"><mip-img src="https://www.kcs2.top/img/weixinpay200.jpg" alt="微信支付"></mip-img></div>
</div>
</div>

2.5、提交以后,得到广告调用代码{:hook('adHook','pay')}


三、把广告代码添加到网站模板里面去。

3.1、如果你想全站调用这个收款码的话,就在文章详情页模板template\default\article\articleDetail.html里面的猜你喜欢的上方添加广告调用代码{:hook('adHook','pay')}即可。

3.2、如果你只是想在某一个栏目里面调用的话,就复制这个详情页模板重命名为自己栏目的名字,如本站是在线商城shop这个栏目,我自定义为articleDetail-shop.html。

3.3、在后台栏目管理,把这个栏目的模板页选择里面的详情页把默认的articleDetail.html改成articleDetail-shop.html即可。

图也上传了,代码添加了,模板也修改了,网站显示的可不是我们要的效果哦,他不是一行排列两个图片,而是一行一个,上下排列的,还需要增加css样式才行。


四、添加css样式

在默认的css样式表(public/assets/default/css/mipcms.css)最后面添加下面代码即可:

(图片大小是200*200的,让css控制成150*150了,这样两个二维码并排显示在一行里面,手机上面也是居中显示一排,看起来就美观一点了)

.pay {width:300px; height: 150px;}

.alipay {width:150px; height: 150px; float:left;clear:left;}

.weixinpay {width:150px; height: 150px; float:right;clear:right;}

结合上面的代码和css样式,一个大div,这个div命名为pay,左边一个小的div,命名为alipay,右边是小的div命名是weixinpay,因为我的图片的宽和高都是200px的,所以我的小div是150px,最上面的大div是300px,刚好容纳下面的两个小div,然后左边的居左,右边的居右。

0.195966s