合适的广告位并不会给阅读者的阅读体验带来很大的影响,甚至是网页的一种点缀。本文介绍一种使用HTML和CSS代码的方法实现广告位,在页面的左右下角,并且带有关闭按钮。

关于网页广告的看法

作为一名新人站长,我也逐渐理解经营网站的不容易。我虽然申请谷歌广告一下子就申请下来了,但是运营的路上却一波三折。《草根站长重新投放了谷歌广告Google Ads》这篇文章就记录了这些坎坷。

所以,现在再看一些带有广告的网站,也没有那么反感了,只要不是每天飞的话,我觉得还是不错的。毕竟生活不容易,都是要成本的。广告的微薄收入勉强可以维持成本吧。咱这些草根站长更多是希望网站的内容能帮助到需要的人,而不是想着靠它来赚钱。

广告位代码

首先是style部分,主要是广告位的样式,adright是右边的广告位,adleft是右边的广告位,button是按钮控件。其他的参数都是关于该窗口的一些属性,可以自行进行一定的调整。这段代码放在head标签之间。

 <style>  
        .adright{
        width:300px;
        height:250px;
        border: #ddd;
        background: white;
        right: 0px;
        bottom: 0px;
        position: fixed;
        }

        .adleft{
        width:300px;
        height:250px;
        border: #ddd;
        background: white;
        left: 0px;
        bottom: 0px;
        position: fixed;
        }         
    button{margin-right: 10px;float: right;margin-top:10px;}
    </style>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

广告位样式代码放置的位置

然后再body标签的尾部创建一个div,如下:

<div class="adleft">
<button onclick="">关闭广告</button>
<!-- 广告位代码 -->
</div> 

<!-- 关闭按钮代码 -->
 <script>
     $('button').click(function(){
     $('.adleft').hide()
     $('.adright').hide()
     })
 </script> 

我放了左右两个广告位。谷歌广告代码client和slot等信息已经隐藏,并且将<script async xxxxx>代码放在里head里,所以只需要在div里放置ins标签以及adsbygoogle的scripts:

<div class="adright">
<button onclick="">一键关闭所有广告</button>
<!-- hit2 -->
<ins class="adsbygoogle"
     style="display:inline-block;width:400px;height:400px"
     data-ad-client="ca-pub-xxxxxxxx"
     data-ad-slot="2xxxxxxx"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

<div class="adleft">
<button onclick="">一键关闭所有广告</button>
<!-- hit2 -->
<ins class="adsbygoogle"
     style="display:inline-block;width:400px;height:400px"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="2xxxxxxxx"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div> 
 <script>
     $('button').click(function(){
     $('.adleft').hide()
     $('.adright').hide()
     })
 </script> 

广告位代码的位置

最终效果

最终左右两边广告位效果。还是那句话,别牺牲用户体验来放置广告,让广告变成网页的一部分,让广告实现价值

比如强制让用户点击广告或者广告霸屏,取消关闭按钮,这都是不可取的。

广告位效果


博主个人公众号
版权声明 ▶ 本网站名称:陶小桃Blog
▶ 本文链接:https://www.52txr.cn/2022/HTMLads.html
▶ 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行核实删除。
▶ 转载本站文章需要遵守:商业转载请联系站长,非商业转载请注明出处!!

最后修改:2022 年 06 月 14 日
如果觉得我的文章对你有用,请随意赞赏