简单的赞赏引导按钮 - wordpress美化

只用html和css即可实现,简洁实用的功能,不影响加载速度,但足够一般情况下使用,这篇wordpress美化教程很适合哪些对插件不感兴趣的站长使用

这次分享的赞赏只用html和css即可实现,简洁实用的功能,不影响加载速度,但足够一般情况下使用,这篇wordpress美化教程很适合哪些对插件不感兴趣的站长使用。

先看看效果:

简单的赞赏引导按钮 - wordpress美化微信 - Npcink 简单的赞赏引导按钮 - wordpress美化支付宝 - Npcink

如果文章对您有帮助,欢迎打赏作者!

代码如下:

<div class="reward">
    <div class="reward-button">赏<span class="reward-code">
		<span class="wechat-code"><img class="wechat-img" src="https://n.getimg.net/www/2020/04/11fd5e7918cead.jpg" ><b>微信 - Npcink</b></span>
		<span class="alipay-code"><img class="alipay-img" src="https://n.getimg.net/www/2020/04/11fd5e7918cead.jpg"><b>支付宝 - Npcink</b></span>
		</span>
    </div>
	<p class="reward-notice"> 如果文章对您有帮助,欢迎打赏作者!</p>
</div>
<style type="text/css">
/*打赏*/
.reward {
padding: 0;
margin: -30px 0 30px 0;
}
.reward .reward-notice {
font-size: 14px;
line-height: 14px;
margin: 15px auto;
text-align: center
}
.reward .reward-button {
font-size: 33px;
line-height: 40px;
position: relative;
display: block;
width: 45px;
height: 45px;
margin: 0 auto;
padding: 0;
-webkit-user-select: none;
text-align: center;
vertical-align: middle;
color: #fff;
border: 1px solid #f1b60e;
border-radius: 50%;
background: #fccd60;
background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#fccd60),color-stop(100%,#fbae12),color-stop(100%,#2989d8),color-stop(100%,#207cca));
background: -webkit-linear-gradient(top,#fccd60 0,#fbae12 100%,#2989d8 100%,#207cca 100%);
background: linear-gradient(to bottom,#fccd60 0,#fbae12 100%,#2989d8 100%,#207cca 100%)
}
.reward .reward-code {
position: absolute;
top: -200px;
left: 50%;
display: none;
width: 326px;
height: 170px;
margin-left: -174px;
padding: 10px;
border: 1px solid #e6e6e6;
background: #05af4e;
}
.reward .reward-button:hover .reward-code {
display: block
}
.reward .reward-code span {
display: inline-block;
width: 150px;
height: 150px
}
.reward .reward-code span.alipay-code {
float: right
}
.reward .reward-code span.alipay-code a {
padding: 0
}
.reward .reward-code span.wechat-code {
float:left 
}
.reward .reward-code img {
display: inline-block;
float: left;
width: 150px;
height: auto;
margin: 0 auto;
border: 0
}
.reward .reward-code b {
font-size: 14px;
line-height: 30px;
display: block;
margin: 0;
text-align: center;
color: #fff
}
.reward .reward-code b.notice {
line-height: 2rem;
margin-top: -1rem;
color: #999
}
.reward .reward-code:after,.reward .reward-code:before {
position: absolute;
content: '';
border: 10px solid transparent
}
.reward .reward-code:after {
bottom: -19px;
left: 50%;
margin-left: -10px;
border-top-color: #fff
}
.reward .reward-code:before {
bottom: -20px;
left: 50%;
margin-left: -10px;
border-top-color: #e6e6e6
}
	
	
</style>

如何使用?

根据代码注释复制代码到自己需要的地方,例如古登堡的HTML区块或是小工具里面的“自定义HTML”,将代码中的图片和问题替换为自己需要的,另外,记得看代码注释哦(。・∀・)ノ

我想用wordpress插件:

简单的赞赏引导按钮 - wordpress美化-Npcink
简单的赞赏引导按钮 - wordpress美化-Npcink

博客社交分享组件WP插件 - 打赏/点赞/微海报/社交分享四合一

除了加一个简单的赞善功能,这篇wordpress美化教程还可以教你加一个炫酷的网站信息引导卡片,:

简单的赞赏引导按钮 - wordpress美化-Npcink
简单的赞赏引导按钮 - wordpress美化-Npcink

精彩的网站信息引导卡片 - wordpress区块

教程

RevolverMaps - 给网站添加一个小地球

2019-5-8 20:21:52

教程

Codestar Framework框架使用 - WordPress教程

2019-5-11 13:15:56

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 1355471563#qq.com 或点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索