如何修改Blogger页脚广告代码 仅对独立访客展示且关闭后不再弹出

我们可以直接通过浏览器原生的sessionStorage存储用户的广告关闭状态，无需后端支持即可实现需求：用户关闭广告后，同站点内跳转任意页面都不会再次展示，关闭浏览器标签/窗口后再访问站点，广告会恢复展示。

具体修改点 #

1. 调整关闭按钮的点击逻辑，除了隐藏广告外，同时向sessionStorage写入关闭标记
2. 新增页面初始化判断逻辑，页面加载时优先读取关闭标记，已标记关闭则直接隐藏广告

完整修改后代码 #

<style>
.Arpian-ads {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    min-height: 70px;
    max-height: 90px; /* modify as per your website design*/
    padding: 5px 0;
    box-shadow: 0 -6px 18px 0 rgba(9,32,76,.1);
    -webkit-transition: all .1s ease-in;
    transition: all .1s ease-in;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fefefe;
    z-index: 20;
}

.Arpian-ads-close {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px 0 0;
    position: absolute;
    right: 0;
    top: -30px;
    background-color: #fefefe;
    box-shadow: 0 -6px 18px 0 rgba(9,32,76,.08);
    cursor: pointer; /* 新增：提示按钮可点击 */
}

.Arpian-ads .Arpian-ads-close svg {
    width: 22px;
    height: 22px;
    fill: #000;
}

.Arpian-ads .Arpian-ads-content {
    overflow: hidden;
    display: block;
    position: relative;
    text-align:center;
    height: 70px;
    width: 100%;
    margin-right: 10px;
    margin-left: 10px;
}
</style>

<div class='Arpian-ads' id='Arpian-ads'>
    <div class='Arpian-ads-close' onclick='document.getElementById("Arpian-ads").style.display="none"; sessionStorage.setItem("arpian_ad_closed", "true");'>
        <svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'>
            <path d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z' />
        </svg>
    </div>
    <div class='Arpian-ads-content'> Place your Ad Code </div>
</div>

<script>
// 页面加载完成后判断是否需要隐藏广告
document.addEventListener('DOMContentLoaded', function() {
    if (sessionStorage.getItem('arpian_ad_closed') === 'true') {
        document.getElementById('Arpian-ads').style.display = 'none';
    }
})
</script>

可选扩展 #

如果你需要让关闭状态保留更长时间（比如7天内用户访问都不展示广告），可以把sessionStorage替换为localStorage，额外增加过期时间判断逻辑即可。

内容的提问来源于stack exchange，提问作者Junaid