「分享」博客网站右下角可关闭的悬浮广告窗口HTML代码

 boke112联盟  2020-04-17 11:07  52 人阅读 0 条评论
查查部落-淘宝天猫-优惠券

近段时间逛一些个人独立博客的时候,总是看到一些弹窗广告,虽然有些烦但是有时候还是相当实用的,比如某些促销活动还剩几天的情况下可以投放此类广告,活动结束就关闭。所以今天老古就研究一下,为 boke112 联盟添加一个悬浮广告窗口,具体效果如下:

「分享」博客网站右下角可关闭的悬浮广告窗口HTML代码 - 第1张 - boke112联盟(boke112.com)

如上图所示,整体的广告窗口比较简单,就一张图片、一些宣传文字、一个关闭按钮和一个链接按钮,会一直悬浮在右下角的位置。点击链接按钮【立刻前往选购】即可前往目标页面,点击右上角的关闭按钮 X 就能暂时关闭这个广告弹窗,网页再次刷新或者打开 boke112 联盟新的页面就会重新出现。实现这个悬浮广告窗口的代码都很简单,都是 HTML 代码,具体如下:

<div id="ycxfxxk" style="display: block;max-width: 392px;width: 392px;height: auto;z-index: 1000;border: 5px solid #1abc9c;right: 15px;position: fixed;bottom: 30px;background: #fff;">

<div>

<img src="https://boke.yigujin.cn/img/abc/190823_ecs.png" alt="Download" width="110" height="110" style="float: left;position: absolute;left: -60px;top: -12px;border-radius: 50%;border: 5px solid #1abc9c;background: #fff;" scale="0">

<div style="max-width: 319px;float: right;margin-top: 5px;font-size: 14px;">好消息!阿里云 100%CPU 性能 1 核 2G1M 云服务器仅需 <strong style="color: #f00;">69.86 元/年</strong>,券后价仅需 <strong style="color: #f00;">210 元/3 年</strong></div>

<div class="link" style="float: right;"><a href="https://www.aliyun.com/minisite/goods?userCode=bfol0yvy&share_source=copy_link" rel="nofollow noopener" target="_blank" rel="nofollow noopener"><span style="color: #f00;">【立刻前往了解】</span></a></div>

</div>

<div style="position: absolute;top: -15px;right: -14px;text-align: center;width: 24px;line-height: 16px;background: #fff;color: #1abc9c;border: 3px solid #1abc9c;border-radius: 50%;font-size: 15px; cursor: pointer; padding-bottom: 2px;"><a title="关闭" onclick="this.style.display='none';document.getElementById('ycxfxxk').style.display='none'" href="javascript:void(0)">x</a></div>

</div>

使用方法也很简单,替换以上代码中的图片、宣传文字及链接地址后直接复制修改后的代码粘贴到自己站点的 footer.php 文件中即可。当然,你也可以根据实际需求加以完善,比如屏幕小于多少 PX 时不显示,或只显示在首页就加一个判断等等。

因为这个悬浮广告窗口是 HTML 代码,理论上适合所有站点,目前运行在 WordPress 站点是完美实现,具体见本站右下角的悬浮广告,其他类型的站点请自行测试。


本文地址:https://www.14cc.cn/?id=27519
温馨提示:文章内容系作者个人观点,不代表查查部落|查查优惠券对观点赞同或支持。
版权声明:本文为转载文章,来源于 boke112联盟 ,版权归原作者所有,欢迎分享本文,转载请保留出处!
查查部落-淘宝天猫-优惠券

 发表评论取消回复


表情

还没有留言,还不快点抢沙发?