效果展示
教程开始
1.将以下css代码加入主题css文件中
/*加群小工具*/
.jxw-jiaqun h5 {
font-size: 16px;
line-height: 1.4;
}
.jxw-jiaqun-small {
padding: 15px;
}
.jxw-jiaqun p {
max-width: 80%;
}
.jxw-jiaqun {
letter-spacing: .5px;
}
.jxw-jiaqun .btn {
font-size: 13px;
}
.jxw-jiaqun .btn i {
margin-right: 3px;
}
.jxw-jiaqun .helper-thumb {
position: absolute;
right: 0;
bottom: 0;
}
.jxw-jiaqun-btn-on {
color: #fff;
background: #2c63ff!important;
box-shadow: 0 3px 10px -1px #2c63ff!important;
border: 0;
}
/*加群小工具*/
2.后台-外观-小工具-自定义HTML小工具,拖动到文章页侧边栏并加入以下代码
<section class="jxw-jiaqun">
<div class="jxw-jiaqun-small">
<p>RiPROv2教学网(RiProv2.com)<br> 整合全网更多优质资源分享下载<br> 共同学习,共同进步,共同成长!</p>
<a href="https://qm.qq.com/cgi-bin/qm/qr?k=huZJD9n2BkzIYv96wDshxCIlbHx2aGLS&jump_from=webapi" class="btn jxw-jiaqun-btn-on" uk-toggle=""><i class="iconfont icon-qq"></i><font
color="#FFFFFF">QQ交流群</font></a>
<div class="helper-thumb"><img src="https://z3.ax1x.com/2021/07/14/WZbbL9.png" alt="RiPROv2教学网"> </div>
</div>
</section>
3.刷新文章页就可以显示出来了
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。