网站底部添加跟随广告栏代码

有一位博友看上了别人的前端主题美化代码。嘻嘻，没错就是跟随广告栏代码，于是就扒了，现在分享给大家！

首先，在WordPress的后台，转到主题设置。然后，在主题设置中，找到添加自定义HTML代码的页头或者页尾，添加以下代码。如主题没有这两项，转到服务器找到主题首页文件添加既可！

<style>
    .yxzhi-union-tip {
        position: absolute;
        bottom: 35px;
        right: 50%;
        animation: slideUpDown 2s infinite;
        pointer-events: none;
    }

    .yxzhi-union-tip-content {
        position: relative;
        color: #FFFFFF;
        padding: 5px 8px;
        border-radius: 4px;
        margin-bottom: 5px;
        background: var(--theme-color);
        white-space: nowrap;
    }

    .yxzhi-union-tip-content::before {
        content: '';
        border-width: 8px 8px 8px 8px;
        border-style: solid;
        border-color: var(--theme-color) transparent transparent;
        position: absolute;
        left: 50%;
        bottom: -15px;
        margin-left: -8px;
    }

    @keyframes slideUpDown {
        0% {
            transform: translate(50% , 0);
        }

        50% {
            transform: translate(50% , -10px);
        }

        100% {
            transform: translate(50% , 0);
        }
    }
</style>
<div class="yxzhi-union-wrap">
    <div class="yxzhi-union-main">
        <div class="yxzhi-union-content">
            <div class="yxzhi-union-item" data-union="union-999" style="position: relative;">
                <div class="yxzhi-union-tip">
                    <div class="yxzhi-union-tip-content">云亿吧官方APP下载
                    </div>
                </div>
                <a href="javascript:">
                    <img src="http://www.yunyi2.com/wp-content/uploads/2024/11/logo1.png">
                </a>
            </div>
            <div class="yxzhi-union-item" data-union="union-1">
                <a href="javascript:">
                    <img src="https://img.alicdn.com/imgextra/i1/2904919345/O1CN01OiZxNR2Iu4FGIS210_!!2904919345.png">
                </a>
            </div>
            <div class="yxzhi-union-item" data-union="union-2">
                <a href="javascript:">
                    <img src="https://img.alicdn.com/imgextra/i3/2904919345/O1CN01bMe0YE2Iu4FI1EWEO_!!2904919345.png">
                </a>
            </div>
            <div class="yxzhi-union-item" data-union="union-3">
                <a href="javascript:">
                    <img src="https://img.alicdn.com/imgextra/i1/2904919345/O1CN01UyGWWB2Iu4FI5gqTk_!!2904919345.png">
                </a>
            </div>
            <div class="yxzhi-union-item" data-union="union-4">
                <a href="javascript:">
                    <img src="https://img.alicdn.com/imgextra/i4/2904919345/O1CN01uYnPX82Iu4FERFau9_!!2904919345.png">
                </a>
            </div>
            <div class="yxzhi-union-item" data-union="union-5">
                <a href="javascript:">
                    <img src="https://img.alicdn.com/imgextra/i4/2904919345/O1CN01PDOClU2Iu4F9Mc5Ft_!!2904919345.png">
                </a>
            </div>
            <div class="yxzhi-union-item" data-union="union-6">
                <a href="javascript:">
                    <img src="https://img.alicdn.com/imgextra/i4/2904919345/O1CN01W1atWi2Iu4FI5etvW_!!2904919345.png">
                </a>
            </div>
            <div class="yxzhi-union-item" data-union="union-7">
                <a href="javascript:">
                    <img src="https://img.alicdn.com/imgextra/i2/2904919345/O1CN01aAzw3O2Iu4F9McQ0s_!!2904919345.png">
                </a>
            </div>
            <div class="yxzhi-union-item" data-union="union-8">
                <a href="javascript:">
                    <img src="https://img.alicdn.com/imgextra/i2/2904919345/O1CN01vMXHjC2Iu4FGMV7Xi_!!2904919345.png">
                </a>
            </div>
            <div class="yxzhi-union-item" data-union="union-9">
                <a href="javascript:">
                    <img src="https://img.alicdn.com/imgextra/i4/2904919345/O1CN01qqHrqU2Iu4FFnKBzD_!!2904919345.png">
                </a>
            </div>
            <div class="yxzhi-union-item">
                <a href="链接" target="_blank">
                    <img src="https://img.alicdn.com/imgextra/i4/2904919345/O1CN01e9w3bM2Iu4FIfdR0Y_!!2904919345.png">
                </a>
            </div>
        </div>
        <div class="yxzhi-union-close">
            <i class="wpcom-icon wi">
                <svg aria-hidden="true">
                    <use xlink:href="#wi-close"></use>
                </svg>
            </i>
        </div>
    </div>
</div>

把下方CSS代码添加到主题样式文件内，如主题有添加样式处添加即可！

您需要回复本文后才能查看完整内容

立即回复

已经回复？立即刷新

原创文章，作者：云亿吧，如若转载，请注明出处：https://www.yunyi2.com/archives/642.html

网站底部添加跟随广告栏代码

相关推荐