CoreNext主题美化_广告位右下角添加文字标识

本文最后更新于2023-11-26,部分内容具有时效性,如有失效,请评论留言
共计1085字,阅读大约4分钟。

在一些博客网站中,我们经常会看到有些广告位右下角有一个“恰饭广告,还请支持”的标识,肯定也有小伙伴跟我一样觉得这个很好看,而且也能提醒用户这是一个广告位,那么我们怎么在自己的网站也拥有这样的样式呢,今天好软猫就给大家带来了教程。

效果截图

修改内容

此代码来源于优享云,本站在此基础上新增两处改动

  1. 修改圆角为10
  • 图片代码新增自适应网站宽度和高度

图片广告位代码

设置位置

主题设置-广告设置

代码内容

本内容需要登录后查看

CSS样式代码

设置位置

主题设置-插入代码-自定义CSS

代码内容


/* 设置图片圆角为10像素_www.haoruanmao.com */
.rounded-corner {
    border-radius: 10px;
}

/* 设置广告样式_www.haoruanmao.com */
.image-container {
    position: relative;
}

.advertisement {
    position: absolute;
    bottom: 5px; /* 可以根据需要调整位置 */
    right: 0px; /* 调整到右下角,可以根据需要调整位置 */
    background-color: rgba(128, 128, 128, 0.7); /* 设置透明度为0.7的灰色背景 */
    color: white;
    padding: 3px; /* 调整 padding */
    border-radius: 10px; /* 调整圆角 */
    font-size: 13px; /* 调整字体大小 */
}

 

如果浏览器开了去广告的脚本或插件,可能会看不到右下角的这个文字标识

更多广告代码合集

WordPress教程_网站常用广告代码合集
合适的广告位并不会给阅读者的阅读体验带来很大的影响,甚至是网页的一种点缀。本文介绍一种使用HTML的方法实现广告位,网站常用HTML广告代码合集。 常用代码 ……

随机文章

文章不满意?试试随机文章
好软猫文章底线(别以为我没有底线)
THE END