html广告框,给WordPress首页添加简单广告框弹窗两种方法实现代码+插件
最近大家访问我的博客想必都看到了图片广告弹窗
话说虽然用户不喜欢,但是作为站长的我们却非常需要,毕竟我们也不是用爱发电,也是需要赚点打广告赚点外快来补贴服务器费用的。今天逛夏末浅笑博客的时候看到了这个方法,也是十分的喜欢所以就来分享给大家了。目前一共有两种方法插件+代码
方法一:代码
1、修改JavaScript 代码:
var popup = document.getElementById('qgg_popup');var popup_box = document.querySelector('.qgg_popup_box');var popup_close = document.querySelector('.qgg_popup_close');// 窗口加载时弹出window.onload = function() { popup.style.display = "block";}// 点击窗体其他位置时关闭window.onclick = function(event) { if (event.target == popup) { popup.style.display = "none"; }}popup_box.onclick = function() { popup.style.display = "none";}// 点击关闭按钮时关闭popup_close.onclick = function() { popup.style.display = "none";}
使用WordPress的朋友将JS代码丢到主题的主JS文件中去即可。DUX主题用户直接丢到主题 js 文件夹下的 main.js 文件中就行了。其他程序的朋友可以放到自己相应的JS文件里。这里就不多说了
2、修改CSS样式代码:
/* 弹窗广告css 2018-8-29 */html, body{ margin:0; height:100%; }#qgg_popup{ position: fixed; top: 0; left: 0; display: none; width: 100%; height: 100%; margin: auto; background: rgba(36, 36, 36, 0.8);}.qgg_popup_box { z-index: 10; position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 280px; height: 396px; margin: auto; text-align: center; } .qgg_popup_close{ position: relative; width: 36px; height: 36px; background: #fff; color: #999; float: right; font-size: 24px; text-align: center; border-radius: 50%; line-height: 36px; font-weight: bold;}.qgg_popup_close:hover,.qgg_popup_close:focus { color: red; cursor: pointer;}.qgg_popup_img{ position:relative; top: 36px; left: 0px; width:240px; height:360px; border-radius: 15px;}@media (max-width: 640px){ .qgg_popup_close{ display: none; }}
使用 WordPress 的朋友将代码丢到主题的 style.css 文件中即可。DUX 主题丢到 main.css 文件中就行了。使用其他网站程序的添加到相应的css文件中就OK了!
3、修改html代码:
这段代码是前端显示的 HTML ,将其放到你想要其显示的页面中即可,比如首页文件 index.php 、文章页single.php 中。
代码中“./1.png”这里需要修改成你自己的弹窗广告图片地址。这样就可以实现网站弹窗广告的功能了
方法二:插件
这个插件是WEB主题公园所开发的 WordPress 首页弹窗广告插件,可在你的首页设定一个弹框,你可以使用这个功能制作比如广告推荐、中英文切换、功能提示等等功能。
特色功能
可选弹出的显示次数
专门针对移动版设置独立内容
可视化编辑器编辑内容
这个插件使用起来十分的简单,这里我就不再说明如何使用了,安装好一看就懂了。
我个人觉得还是插件好用一些。
暂无优惠
当前隐藏内容需要支付
9猫爪
已有1人支付
支付查看
html广告框,给WordPress首页添加简单广告框弹窗两种方法实现代码+插件相关推荐
- Wordpress开发 - 获取作者头像的两种方法
写在前面 今天又被一个头像坑搞惨了,一般我们获取作者的信息是都需要在循环判断中才可以使用的!比如获取作者名称 <?php the_author(); ?> .如果没有在 <?php ...
- DataGridView动态添加新行的两种方法
简单介绍如何为DataGridView控件动态添加新行的两种方 法: 方法一: int index=this.dataGridView1.Rows.Add(); this.dataGridView1. ...
- Android学习之为按钮添加事件监听器的两种方法
为按钮(包括普通按钮和图片按钮等)添加单击事件监听器有两种方法,第一种是利用匿名内部类来实现,第二种是使用onClick属性来实现 1.匿名内部类 使用匿名内部类,我们首先需要在布局文件中给按钮设置i ...
- Tableau可视化技巧-在数据上添加方向图标的两种方法
在日常数据分析中,数据的上下波动是我们经常遇到的,比如指标的上升与下降.用一个方向图标,比如 ⬆️ 或者⬇️来表明这种变化有时候比数字更加容易辨别. 本文我们看一下如何在数据上添加方向图标. 如下图 ...
- java 把图片插入窗体,JAVA JFrame窗体添加背景图像的两种方法
首先还是要了解框架JFrame中的层次结构.JFrame中的层次分布及相对关系是:最底层是:JRootPane:第二层是:JlayerPane:最上层就是ContentPane,也正是我们常说的内容面 ...
- matlab中给信号添加高斯白噪声的两种方法,awgn计算过程,randn函数
y=awgn(x,snr,px_dBW) 给信号x添加噪声功率为某个值的高斯白噪声. snr为信噪比,单位dB. px_dBW为信号x的指定功率(注意,是指定功率,而不是x本身的功率),单位dBW. ...
- 如何查询期刊的缩写?(轻松简单教你两种方法)
我们在引用参考文献格式要求,或者写申请材料等会用到期刊名称的缩写,这里小编分享两种简单的方式,帮助你轻松简单的查询期刊缩写. 首先我们先来看一下期刊的全称与缩写 话不多说,直接介绍两种查询方法 方法1 ...
- windows 7中添加新硬件的两种方法(本地回环网卡)
最近在windows7上使用VMwareWorkstation7玩一些实验,遇到需要配置不同网络的问题. 因为在windows2003server上习惯使用要本地回环网卡了,那就想着在Windows7 ...
- python简单验证码识别两种方法
既然是要简单,当然是pip一下现成库就能用的. ddddocr库 Github地址:https://github.com/sml2h3/ddddocr 谐音带带弟弟OCR,环境要求python > ...
最新文章
- 2020年百度人工智能创意组技术报告评阅
- Jscript 随记
- Egret里用矢量挖圆形的洞
- 【Web安全】DVWA+CSRF跨站请求伪造-生成链接修改password
- VC对话框最小化到托盘
- 青少年蓝桥杯_2020_steam考试_初级组_第一题
- pandas高效读取大文件(csv)方法之-parquet
- Go语言、Docker 和新技术
- linux怎么复制文件夹全部内容,linux局域网怎么复制文件夹下的全部文件到另外文件夹...
- MySQL管理工具-SQLyog 9.63的使用详解,带截图
- WinRAR加密压缩冒充GlobeImposter勒索病毒 安全专家轻松解密
- 懒汉饿汉 php,单例模式——懒汉模式,饿汉模式
- 深度学习 视频目标跟踪
- 【洛谷刷题笔记】P4093 [HEOI2016/TJOI2016] 序列
- FPGA基础之VGA(三)移动方块
- HDLC协议(一)——基本概念
- 华为的王炸黑科技鸿蒙系统,华为黑科技“cyberverse”发布,“鸿蒙系统”在其面前都不值一提...
- JavaScript-WebAPIs学习记录
- 为什么要画ER图?有哪些画图规范?
- vue中provide和inject 用法
热门文章
- 第二章 Roboguide安装及注册步骤详解
- 在PPT中插入数据透视表(数据透视图)
- android 主流机型排行榜,10月份Android热门手机机型Top 50排行榜
- 地平线检测horizon line detection
- 李宏毅NLP学习笔记,NLP模型LAS。
- java浏览器读取本地路径,怎么获取浏览器的文件下载路径
- HDU-1248 寒冰王座 完全背包
- 058_《突破Delphi7.0编程实例五十讲》
- 基于springboot的社区养老系统(养老院)
- 跨境3.0时代正合奇胜法则:动态需求理论