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

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

效果截图

修改内容

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

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

图片广告位代码

设置位置

主题设置-广告设置

代码内容

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教程-网站常用广告代码合集

20天前

078258