注册
『原创』『教程』首页及文章页滚动广告栏
Brains - 灵感乌托邦

『原创』『教程』首页及文章页滚动广告栏

六六丶
2021-10-15 / 76 评论 / 31,259 阅读 / 已收录
广告
温馨提示:
本文最后更新于2022年12月27日,已超过811天没有更新,若内容或图片失效,请留言反馈。

前言

因为之前在很多网站上都能看到广告,虽然但是,这对很多博主来说也是一笔额外的收入,我一直是入不敷出!表情

然后我看到了执念博客的首页广告栏,虽然曝光确实大,但是用户体验极其不好,因为要翻很多广告才能翻到文章,就像这样:

6357585980235.png

所以我就想到了滚动广告,一个广告的位置,能够显示多条广告

成果展示

首页
文章页

63575883e27f5.gif

教程开始

灵感及相关代码来自于Joe主题的首页轮播图

一、添加后台

打开 functions.php 添加以下代码

代码
代码位置
$JADPost = new Typecho_Widget_Helper_Form_Element_Textarea(
        'JADPost',
        NULL,
        NULL,
        '文章页顶部广告',
        '介绍:用于设置文章页顶部广告 <br />
         格式:广告图片 || 跳转链接 (中间使用两个竖杠分隔)<br />
         注意:如果您只想显示图片不想跳转,可填写:广告图片 || javascript:void(0)  <br />
         其他:一行一个,一行代表一个轮播广告图'
    );
    $JADPost->setAttribute('class', 'joe_content joe_post');
    $form->addInput($JADPost);

这是文章页的代码,因为首页广告主题自带了

635758cda794f.png

二、添加滚动广告栏

首页
文章页
因为首页已经有广告位了,所以直接替换就行了

将主题 index.php 的以下代码直接替换为新代码

代码位置

635758e5a31d7.png

新代码

此处内容作者设置了 回复 可见

三、修改广告栏样式

首页
文章页
直接在 Joe/assets/css 打开 joe.index.min.css 然后在最后添加以下代码
.joe_index__ad .swiper-container{height: 180px!important;border-radius: var(--radius-inner);}.joe_index__ad .swiper-container .icon{position:absolute;z-index:1;top:10px;right:10px;font-size:12px;background:rgba(0,0,0,0.25);padding:2px 5px;border-radius:2px;color:#ebebeb;pointer-events:none}@media (max-width: 768px){.joe_index__ad .swiper-container{height: 120px!important}.joe_index__ad .swiper-container .image{height: 120px;object-fit: cover;border-radius: var(--radius-inner);}}

四、添加滚动效果

首页
文章页

首页因为引入了滚动效果,所有不需要设置,会直接调用首页轮播图的滚动效果

但是会根据首页轮播图的滚动方式滚动,效果不太好,暂时没想到比较好的解决方法

教程结束

大功告成,快刷新你的网站看看效果吧!

898
打赏
gzh

评论 (76)

表情
  • :$(爱你)
  • :$(爱心)
  • :$(傲慢)
  • :$(白眼)
  • :$(棒棒糖)
  • :$(爆筋)
  • :$(抱拳)
  • :$(鄙视)
  • :$(闭嘴)
  • :$(擦汗)
  • :$(菜刀)
  • :$(吃)
  • :$(呲牙)
  • :$(大兵)
  • :$(大哭)
  • :$(蛋)
  • :$(得意)
  • :$(doge)
  • :$(发呆)
  • :$(发怒)
  • :$(奋斗)
  • :$(尴尬)
  • :$(勾引)
  • :$(鼓掌)
  • :$(害羞)
  • :$(憨笑)
  • :$(好棒)
  • :$(哈欠)
  • :$(喝彩)
  • :$(河蟹)
  • :$(坏笑)
  • :$(饥饿)
  • :$(惊恐)
  • :$(惊喜)
  • :$(惊讶)
  • :$(菊花)
  • :$(可爱)
  • :$(可怜)
  • :$(抠鼻)
  • :$(酷)
  • :$(快哭了)
  • :$(骷髅)
  • :$(困)
  • :$(篮球)
  • :$(泪奔)
  • :$(冷汗)
  • :$(流汗)
  • :$(流泪)
  • :$(难过)
  • :$(OK)
  • :$(喷血)
  • :$(撇嘴)
  • :$(啤酒)
  • :$(强)
  • :$(敲打)
  • :$(亲亲)
  • :$(糗大了)
  • :$(拳头)
  • :$(骚扰)
  • :$(色)
  • :$(胜利)
  • :$(手枪)
  • :$(衰)
  • :$(睡)
  • :$(调皮)
  • :$(偷笑)
  • :$(吐)
  • :$(托腮)
  • :$(委屈)
  • :$(微笑)
  • :$(握手)
  • :$(我最美)
  • :$(无奈)
  • :$(吓)
  • :$(小纠结)
  • :$(笑哭)
  • :$(小样儿)
  • :$(斜眼笑)
  • :$(西瓜)
  • :$(嘘)
  • :$(羊驼)
  • :$(阴险)
  • :$(疑问)
  • :$(右哼哼)
  • :$(幽灵)
  • :$(晕)
  • :$(再见)
  • :$(眨眼睛)
  • :$(折磨)
  • :$(咒骂)
  • :$(抓狂)
  • :$(左哼哼)
表情
BiliBili
泡泡
阿鲁
颜文字
图片
私语
取消
  1. 头像
    玛卡巴卡
    四川省广安市 Windows 10 · QQ Browser
    6666

    回复
  2. 头像
    king
    广西河池市 Windows 10 · Google Chrome
    66666

    回复
  3. 头像
    微风
    河北省唐山市 Android Pie · QQ Browser
    路过

    回复
  4. 头像
    King
    广东省广州市 Windows 10 · Google Chrome
    66666

    回复
  5. 头像
    互联
    广东省广州市 Windows 10 · Google Chrome
    QQ表情牛逼

    回复
  6. 头像
    十五
    湖北省恩施州 Windows 10 · Google Chrome
    阔以阔以很nice

    回复
  7. 头像
    tc
    河南省郑州市 Android Oreo · Google Chrome
    表情

    回复
  8. 头像
    广东省广州市 Windows 10 · Google Chrome
    发的发的广泛地被

    回复
  9. 头像
    火喵
    辽宁省大连市 Windows 10 · Google Chrome
    参考一下

    回复
    1. 头像
      火喵
      辽宁省大连市 Windows 10 · Google Chrome
      @ 火喵
      可惜高度值是固定的,没法用

      回复
      1. 头像
        六六丶 作者
        重庆市 Windows 10 · Google Chrome
        @ 火喵
        你可以修改样式来改变高度

        回复
        1. 头像
          火喵
          辽宁省 Android · Google Chrome
          @ 六六丶
          我的意思是不能设置成图片大小

          回复
          1. 头像
            六六丶 作者
            重庆市 Android · QQ Browser
            @ 火喵
            可以的,你修改css就行

            回复
      2. 头像
        Fuuuy
        重庆市 Windows 10 · Google Chrome
        @ 火喵
        你可以自己修改呀

        回复
  10. 头像
    游客432432
    广东省广州市 Windows 10 · QQ Browser
    画图

    回复