子比主题添加网站导航图片&文字广告位代码

这里分享一个响应式好看的网站导航文字广告位代码，在网上可以看到很多网站，一般都会在某些位置增加一些广告来增加一点收益，代码先分享出来，以作备用。

效果预览

代码实现

复制下方代码后，放到网页中需要显示的位置即可。

如长江博客放置：WordPress后台 >> 外观 >> 小工具 >> HTML代码 >> 顶部全宽度

<!--长江博客顶部自适应图片广告开始-->
<div class="huliku_imgad">
<a href="https://www.73bk.com/" target="_blank" rel="noopener">
	<picture>
	<!--↓↓↓电脑设备尺寸：1500x141px↓↓↓-->
	<source media="(min-width: 45em)" srcset="https://73bk.com/image/ad/ad_1200x150.jpg" width="100%">
	<!--↓↓↓手机设备尺寸：900x268px↓↓↓-->
	<source media="(min-width: 18em)" srcset="https://73bk.com/images/ad_bg.png" width="100%">
	<!--↓↓↓当图片无法加载时显示备用图片↓↓↓-->
	<img src="https://73bk.com/image/ad/ad_1200x150.jpg" width="100%" height="100%" alt="长江博客图片广告位">
	</picture>
</a>
	<!--长江博客自适应文字广告-->
	<li><a href="https://73bk.com" target="_blank" style="background:#e73038;" class="huliku_txtad_big" rel="noopener">长江博客-大文字广告位招租</a></li>
	<li><a href="https://73bk.com" target="_blank" style="background:#ff8100;" class="huliku_txtad_big" rel="noopener">长江博客-大文字广告位招租</a></li>
</div>
<!--长江博客底部小文字广告-->
<div class="huliku_txtad">
	<a href="https://73bk.com" target="_blank" rel="noopener">长江博客-文字广告火爆招租</a>
	<a href="https://73bk.com" target="_blank" rel="noopener">长江博客-文字广告火爆招租</a>
	<a href="https://73bk.com" target="_blank" rel="noopener">长江博客-文字广告火爆招租</a>
	<a href="https://73bk.com" target="_blank" rel="noopener">长江博客-文字广告火爆招租</a>
	<a href="https://73bk.com" target="_blank" rel="noopener">长江博客-文字广告火爆招租</a>
	<a href="https://73bk.com" target="_blank" rel="noopener">长江博客-文字广告火爆招租</a>
	<a href="https://73bk.com" target="_blank" rel="noopener">长江博客-文字广告火爆招租</a>
	<a href="https://73bk.com" target="_blank" rel="noopener">长江博客-文字广告火爆招租</a>
</div>

下方CSS代码，可放到子比主题自定义CSS或自建CSS文件

如：Zibll主题设置 >> 全局&功能 >> 自定义代码 >> 自定义CSS样式