子比主题美化-文章页内容上方广告代码

图片展示

代码

可使用小工具放置 网站后台->外观->小工具->自定义HTML 至任意位置。

<div class="tuc-2ea177b2-f7dfd0-0 single-gg tuc-2ea177b2-f7dfd0-0">
    <div class="tuc-2ea177b2-f7dfd0-0 single-gg-left tuc-2ea177b2-f7dfd0-0">
        <div class="tuc-2ea177b2-f7dfd0-0 single-gg-img tuc-2ea177b2-f7dfd0-0">
            <img src="https://cdn.nuoyo.cn/zy-file/tongji/%E6%99%B4.png">
        </div>
        <div class="tuc-2ea177b2-f7dfd0-0 single-gg-desc tuc-2ea177b2-f7dfd0-0">有问题请联系站长QQ4737841</div>
    </div>
    <div class="tuc-2ea177b2-f7dfd0-0 single-gg-right tuc-2ea177b2-f7dfd0-0">
        <a href="http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=HqJVToc5sIL64EJJsGh0GWoWpxcT1SsS&authKey=h7t2TLOxbUe9zMt39KerkuAbNmGjWJaxhQQebMkLnX4nXfdmJUMTZBFsRzJL6qQN&noverify=0&group_code=4737841" target="_blank" class="tuc-2ea177b2-f7dfd0-0 single-gg-btn tuc-2ea177b2-f7dfd0-0">立即跳转</a>
    </div>
</div>

然后是CSS：后台主题设置-自定义CSS

/*文章页内容上方广告代码*/
.single-gg,.single-gg-left{display:flex;align-items:center}
.single-gg{height:50px}
.single-gg-left{flex:1;padding:10px;background-color:#40b0ff;border-radius:8px 0 0 8px}
.single-gg-img{height:30px;width:30px}
.single-gg-img img{height:100%;width:100%}
.single-gg-desc{margin-left:10px;color:#fff;font-size:16px;font-weight:600;letter-spacing: 1px;}
.single-gg-right{position:relative;display:flex;height:100%;width:100px;justify-content:center;align-items:center;background-color:#40b0ff;border-radius:0 4px 4px 0;border-left:1px dashed #fff}
.single-gg-right::after,.single-gg-right::before{content:'';position:absolute;width:10px;height:5px;left:-5px;background-color:#fff}
.single-gg-right::before{top:0;border-radius:0 0 5px 5px}
.single-gg-right::after{bottom:0;border-radius:5px 5px 0 0}
.single-gg-btn{display:block;padding:5px 5px;font-size: 14px;background-color:#fff;color:#40b0ff !important;border-radius:4px}