效果展示

RiproV2小工具教学-加群小工具插图

教程开始

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.刷新文章页就可以显示出来了

 

 

发表评论

后才能评论