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