【技术篇】网站怎样在在首页底部添加一个按钮跳转QQ群广告卡片

如本站底部所示,在底部添加一个跳转卡片,其实很简单,这里只研究了wordpress的,其他程序把下方代码添加到应该添加的位置应该也差不多下面看一下演示图片

请先打开菜单找到外观>小工具>添加小工具自定义html到底部小工具>然后找到底部小工具点击就会有一个自定义html(这个相信大家都知道)然后在代码框里面添加如下代码:

<a class="ads" href="https://coolqu.cn/wp-content/uploads/2020/01/1171f33ba9e25c.jpg" target=""><h4>Jane码网QQ交流群</h4><h5>源码分享,技术分享,商品合作</h5> <span class="ads-btn ads-btn-outline">立即加入</span></a>

里面的文字,链接地址可自行修改,可做广告卡片,也可做QQ群,QQ号,邮箱等的跳转卡片,知道a标签的作用的人就只能能用来干些啥了,这个不仅仅可以放在首页,其他你想放的地方都能寻找了放上

下面是添加样式,wordpress程序的用户可以直接找到外观>自定义>额外CSS,然后在代码框里面添加以下样式代码:

.ads {
  display: block;
  padding: 40px 15px;
  text-align: center;
  color: #fff !important;
  background: #ff5719;
  background-image: -webkit-linear-gradient(135deg, #fc9a23, #ff5719);
  background-image: linear-gradient(135deg, #fc9a23, #ff5719);
}
.ads h4 {
  margin: 0;
  font-size: 22px;
  font-weight: bold;
}
.ads h5 {
  margin: 10px 0 0;
  font-size: 14px;
  font-weight: bold;
}
.ads .ads-btn {
  margin-top: 20px;
  font-weight: bold;
}
.ads .ads-btn:hover {
  color: #ff5719;
}
.ads-btn {
  display: inline-block;
  font-weight: normal;
  color: #666;
  text-align: center;
  vertical-align: top;
  user-select: none;
  border: none;
  padding: 0 36px;
  line-height: 38px;
  font-size: 14px;
  border-radius: 100px;
  outline: 0;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.ads-btn:hover,
.btn:focus,
.btn.focus {
  outline: 0;
  text-decoration: none;
}
.ads-btn:active,
.btn.active {
  outline: 0;
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.ads-btn-outline {
  line-height: 36px;
  color: #fff;
  background-color: transparent;
  border: 1px solid #fff;
}
.ads-btn-outline:hover,
.btn-outline:focus,
.btn-outline.focus {
  color: #343a3c;
  background-color: #fff;
}

样式添加好之后,再把下面代码添加到网站的代码<hend></hend>之间,因为各个网站都不一样,我就不一一说明了,代码如下:

<link rel="stylesheet" type="text/css" href="css的绝对路径">

不管添加到哪都行,只要你觉得好看,用来做什么都行,只要你觉得实用就行

技术篇

【技术篇】新年倒计时html

2020-1-20 10:47:11

技术篇教程篇游戏源码程序主题程序源码软件篇

月入10万的真相戳痛无数人:恕我直言,赚钱真的不是靠拼命

2020-3-10 18:19:57

本站推荐服务器,主机购买商: 硅云免备案空间【点击了解】

本站资源大多来自网络,若有需要解压密码的请联系管理,如有侵犯你的权益请联系管理 【酷Sir】或给邮箱发送邮件【kuqumail@163.com】 我们会第一时间删除。站内资源为网友个人学习或测试研究使用,未经原版权作者许可,禁止用于任何商业环境,任何人不得擅作它用,否则后果自负!请在下载24小时内删除!为尊重作者版权,请购买原版作品,谢谢!

本站提供付费代搭建服务,需要搭建可以提交工单,或私信联系管理

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
有新消息 消息中心
搜索
'); })();