WordPress 网站添加弹窗广告代码

我们平时访问网站、博客时经常会打开网页后看到弹出一个图片广告。如果作为普通访客可能会略有抵触,但是作为站长,我们却十分需要这样的广告来为网站赚钱贴补一下服务器维护费用。

1、修改 JavaScript 代码:

  1. var popup = document.getElementById(‘qgg_popup‘);
  2. var popup_box = document.querySelector(‘.qgg_popup_box‘);
  3. var popup_close = document.querySelector(‘.qgg_popup_close‘);
  4. // 窗口加载时弹出
  5. window.onload = function() {
  6.     popup.style.display = "block";
  7. }
  8. // 点击窗体其他位置时关闭
  9. window.onclick = function(event) {
  10.     if (event.target == popup) {
  11.         popup.style.display = "none";
  12.     }
  13. }
  14. popup_box.onclick = function() {
  15.     popup.style.display = "none";
  16. }
  17. // 点击关闭按钮时关闭
  18. popup_close.onclick = function() {
  19.     popup.style.display = "none";
  20. }

使用 wordpress 建站的朋友将 JS 代码丢到主题的主 JS 文件中去即可。DUX 主题用户直接丢到主题 js 文件夹下的 main.js 文件中即可。其他程序建站的朋友可以放到自己相应的 JS 文件里。

2、修改 CSS 样式代码:

  1. /* 弹窗广告css 2018-8-29 */
  2. html, body{ margin:0; height:100%; }
  3. #qgg_popup{
  4.     position: fixed;
  5.     top: 0; left: 0;
  6.     display: none;
  7.     width: 100%;
  8.     height: 100%;
  9.     margin: auto;
  10.     background: rgba(36, 36, 36, 0.8);
  11. }
  12.  
  13. .qgg_popup_box { 
  14.     z-index: 10; 
  15.     position: absolute;
  16.     top: 0; left: 0; bottom: 0; right: 0;
  17.     width: 280px;
  18.     height: 396px;
  19.     margin: auto;
  20.     text-align: center; 
  21. } 
  22. .qgg_popup_close{
  23.     position: relative;
  24.     width: 36px;
  25.     height: 36px;
  26.     background: #fff;
  27.     color: #999;
  28.     float: right;
  29.     font-size: 24px;
  30.     text-align: center;
  31.     border-radius: 50%;
  32.     line-height: 36px;
  33.     font-weight: bold;
  34. }
  35.  
  36. .qgg_popup_close:hover,
  37. .qgg_popup_close:focus {
  38.     color: red;
  39.     cursor: pointer;
  40. }
  41.  
  42. .qgg_popup_img{
  43.     position:relative;
  44.     top: 36px;
  45.     left: 0px;
  46.     width:240px;
  47.     height:360px;
  48.     border-radius: 15px;
  49. }
  50. @media (max-width: 640px){
  51.     .qgg_popup_close{ display: none; }
  52. }

使用 WordPress 搭建网站的朋友将代码丢到主题的 style.css 文件中即可。DUX 主题丢到 main.css 文件中即可。使用其他网站程序的添加到相应的 css 文件中。

3、修改 html 代码:

这段代码是前端显示的 HTML ,将其放到你想要其显示的页面中即可,比如首页文件 index.php 、文章文件 single.php 中即可。

  1. <!-- 弹窗广告 -->
  2. <div id="qgg_popup">
  3.     <div class="qgg_popup_box">
  4.         <span class="qgg_popup_close">&times;</span>
  5.         <img class="qgg_popup_img" src="./1.png">
  6.     </div>
  7. </div>

注意,代码中“./1.png”这里需要修改成你自己的弹窗广告图片地址。这样就可以实现为网站添加弹窗广告的功能了,有网站需要弹窗功能的朋友可以自己试一下。可能这样小小的修改有时候就能为你网站赚钱增加一个新的渠道!

原文地址:https://www.cnblogs.com/tyj666/p/11829306.html

时间: 2024-10-30 07:43:37

WordPress 网站添加弹窗广告代码的相关文章

Wordpress网站添加七牛云cdn

1.一个搭建好的网站和七牛云账号 2.七牛云进入控制面板 3创建存储空间 4创建好了空间拿七牛给你了测试域名(但只可以使用30天)所以绑定自定义域名(这个必须是备案过的) 5.设置自定义域名(加速域名最好是二级域名)下面红框cdn是我备案域名的二级域名 6配置完加速域名(融合cdn域名)就去对你添加的这个域名进行cname解析(不懂借鉴https://developer.qiniu.com/fusion/kb/1322/how-to-configure-cname-domain-name) 7.

一行js弹窗代码就能设计漂亮的弹窗广告

接到一个设计需求,要求xmyanke在网站右侧挂一个弹窗广告宣传最近的活动,找了半天都没看到合适的,自己鼓捣了一行js弹窗代码就能设计漂亮的弹窗广告,来瞧一下,欢迎拍砖提意见,js弹窗广告代码如下: document.writeln("<div id=\"leftDiv1\" ><a href='http://www.xiameneye.org.cn/special/zhengji/' target=_blank><img src='/templ

使用prismjs为网站添加代码高亮功能

prismjs 是一款轻量.可扩展的代码语法高亮库,使用现代化的 Web 标准构建,使用 Prismjs 可以快速为网站添加代码高亮功能,支持超过113中编程语言,还支持多种插件,是简洁.高效的代码高亮解决方案.科技爱好者博客就是使用了Prism.js 实现漂亮的代码语法高亮功能,本文教你如何在wordpress上快速使用Prismjs实现代码高亮. 一.下载JS和CSS文件并上传到网站根目录. 在Prismjs网站下载页面下载需要的JS和CSS文件,下载页面: http://prismjs.c

如何在WORDPRESS中添加CNZZ等统计代码

http://androidren.com/index.php?qa=303&qa_1=%E5%A6%82%E4%BD%95%E5%9C%A8wordpress%E4%B8%AD%E6%B7%BB%E5%8A%A0cnzz%E7%AD%89%E7%BB%9F%E8%AE%A1%E4%BB%A3%E7%A0%81 http://forlong401.com/?p=1323 下面是基于WordPress 4.1版本: 1,    首先进入我们的WordPress网站后台,即在浏览器上输入 网站域名/

【前端】向blog或网站中添加语法高亮显示代码方法总结

向blog或网站中添加语法高亮显示的代码方法总结 文章目录 预备知识 目标 第一类方法:嵌入 第二类方法:外部引用 第三类方法:忽略HTML和PHP 最近在写代码时遇到一个问题,就是如何让代码像在IDE或专业编译器一样能够高亮显示在网页或博客中(如下图显示),上网查了很多资料,下面是我对学习到的方法的归纳总结. 下面的方法基本上都是利用第三方javascript插件实现的,因此不必担心方法有多难,只要拿过来使用就可以了.在讲述方法之前先介绍一下与之条件: 预备知识 HTML和CSS的基本知识 目

几行代码为自己的网站添加划词翻译功能

为网站添加自动翻译网页.网页划词.在线翻译.在线词典.每日一句功能. 适合各类网站 百变语种,自动翻译网页 把中文的网站,变成十几种不同语种的网站,会不会感觉很新奇? 要实现自动翻译网站上文字的功能,看似很困难,但是通过,百度,Google的翻译小工具实现起来就非常简单.只要添加一段网页源代码,就可以翻译多种语种的网页,让其他国家的用户也能看懂你的网站. 说简单,那是真简单--将以下代码加入网站合适位置,就可以实现网页的多语种翻译了. 如果使用的是CMS网站管理系统,如joomla,phpwin

WordPress SEO ? WordPress网站终极优化指南

原文地址:http://www.eastdesign.net/wordpress-seo/ 最新消息,东方设计学院 WordPress SEO 系列视频教程正在持续更新中,目前为了不至于让视频传播过于泛滥,设置了登陆权限,有兴趣查看的用户可以简单填写一个索取测试账号的表单,提交一份表单给我们,我们将尽快回复测试账号登陆密码,视频教程地址:http://www.eastdesign.net/wordpress-seo-tutorial/ WordPress网站终极优化指南 WordPress 是一

用WP Super Cache和七牛为你的WordPress网站加速

众所周知,WordPress一直都是博客建站的首选程序,而现在也有越来越多的企业网站都选择采用WordPress来搭建. WordPress虽好但其过于臃肿且响应速度慢等缺点也为站长们所诟病,目前网上介绍为WordPress加速的方法五花八门,各有各的优缺点. 而我选择的是通过WP Super Cache和七牛相结合为WordPress加速. 首先~ 在入正题之前,有必要和新入坑的童鞋科普下以下内容: 不论是在本地还是服务器上成功安装WordPress后,你会发现其后台打开速度好慢好慢,这是因为

WordPress作者的相关函数调用代码

WordPress作者的相关函数调用代码,本文参考的是WordPress中文版的维基.网上这样的文章有很多,但是总是不详细或者是有错误,这里的函数是我们经常在使用中要搜索的文章,贴出来给大家了参考. <?php the_author(); ?> 显示文章的作者 <?php the_author_description(); ?> 显示文章作者的描述(作者个人资料中的描述) <?php the_author_login(); ?> 显示文章作者的登录名 <?php