广告位招租

WordPress主题添加弹窗广告代码

看到很多人家的网站点进去都有弹窗广告是不是很羡慕,呵呵,,其实我也是,但我自己的106源码网没用,,我虽然 羡慕 但不喜欢这些东西。当然不管你们喜欢不,,我把教程还是放出来给你们参考吧。。。。

一:修改JavaScript 代码:

<span class=”kwd”>var</span><span class=”pln”> popup </span><span class=”pun”>=</span><span class=”pln”> document</span><span class=”pun”>.</span><span class=”pln”>getElementById</span><span class=”pun”>(</span><span class=”str”>’qgg_popup'</span><span class=”pun”>);</span><span class=”kwd”>var</span><span class=”pln”> popup_box </span><span class=”pun”>=</span><span class=”pln”> document</span><span class=”pun”>.</span><span class=”pln”>querySelector</span><span class=”pun”>(</span><span class=”str”>’.qgg_popup_box'</span><span class=”pun”>);</span><span class=”kwd”>var</span><span class=”pln”> popup_close </span><span class=”pun”>=</span><span class=”pln”> document</span><span class=”pun”>.</span><span class=”pln”>querySelector</span><span class=”pun”>(</span><span class=”str”>’.qgg_popup_close'</span><span class=”pun”>);</span><span class=”com”>// 窗口加载时弹出<span class=”pln”>/* 106源码网 */</span></span><span class=”pln”>window</span><span class=”pun”>.</span><span class=”pln”>onload </span><span class=”pun”>=</span> <span class=”kwd”>function</span><span class=”pun”>()</span> <span class=”pun”>{</span><span class=”pln”>    popup</span><span class=”pun”>.</span><span class=”pln”>style</span><span class=”pun”>.</span><span class=”pln”>display </span><span class=”pun”>=</span> <span class=”str”>”block”</span><span class=”pun”>;</span><span class=”pun”>}</span><span class=”com”>// 点击窗体其他位置时关闭</span><span class=”pln”>window</span><span class=”pun”>.</span><span class=”pln”>onclick </span><span class=”pun”>=</span> <span class=”kwd”>function</span><span class=”pun”>(</span><span class=”kwd”>event</span><span class=”pun”>)</span> <span class=”pun”>{</span>    <span class=”kwd”>if</span> <span class=”pun”>(</span><span class=”kwd”>event</span><span class=”pun”>.</span><span class=”pln”>target </span><span class=”pun”>==</span><span class=”pln”> popup</span><span class=”pun”>)</span> <span class=”pun”>{</span><span class=”pln”>        popup</span><span class=”pun”>.</span><span class=”pln”>style</span><span class=”pun”>.</span><span class=”pln”>display </span><span class=”pun”>=</span> <span class=”str”>”none”</span><span class=”pun”>;</span>    <span class=”pun”>}</span><span class=”pun”>}</span><span class=”pln”>popup_box</span><span class=”pun”>.</span><span class=”pln”>onclick </span><span class=”pun”>=</span> <span class=”kwd”>function</span><span class=”pun”>()</span> <span class=”pun”>{</span><span class=”pln”>    popup</span><span class=”pun”>.</span><span class=”pln”>style</span><span class=”pun”>.</span><span class=”pln”>display </span><span class=”pun”>=</span> <span class=”str”>”none”</span><span class=”pun”>;</span><span class=”pun”>}</span><span class=”com”>// 点击关闭按钮时关闭</span><span class=”pln”>popup_close</span><span class=”pun”>.</span><span class=”pln”>onclick </span><span class=”pun”>=</span> <span class=”kwd”>function</span><span class=”pun”>()</span> <span class=”pun”>{</span><span class=”pln”>    popup</span><span class=”pun”>.</span><span class=”pln”>style</span><span class=”pun”>.</span><span class=”pln”>display </span><span class=”pun”>=</span> <span class=”str”>”none”</span><span class=”pun”>;</span><span class=”pun”>}</span>

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

二:修改CSS样式代码:

<span class=”pln”><span class=”com”>/* 弹窗广告css 2020-3-2 *//* 106源码网分享 */</span>html</span><span class=”pun”>,</span><span class=”pln”> body</span><span class=”pun”>{</span><span class=”pln”> margin</span><span class=”pun”>:</span><span class=”lit”>0</span><span class=”pun”>;</span><span class=”pln”> height</span><span class=”pun”>:</span><span class=”lit”>100</span><span class=”pun”>%;</span> <span class=”pun”>}</span><span class=”com”>#qgg_popup{</span><span class=”pln”>    position</span><span class=”pun”>:</span> <span class=”kwd”>fixed</span><span class=”pun”>;</span><span class=”pln”>    top</span><span class=”pun”>:</span> <span class=”lit”>0</span><span class=”pun”>;</span><span class=”pln”> left</span><span class=”pun”>:</span> <span class=”lit”>0</span><span class=”pun”>;</span><span class=”pln”>    display</span><span class=”pun”>:</span><span class=”pln”> none</span><span class=”pun”>;</span><span class=”pln”>    width</span><span class=”pun”>:</span> <span class=”lit”>100</span><span class=”pun”>%;</span><span class=”pln”>    height</span><span class=”pun”>:</span> <span class=”lit”>100</span><span class=”pun”>%;</span><span class=”pln”>    margin</span><span class=”pun”>:</span> <span class=”kwd”>auto</span><span class=”pun”>;</span><span class=”pln”>    background</span><span class=”pun”>:</span><span class=”pln”> rgba</span><span class=”pun”>(</span><span class=”lit”>36</span><span class=”pun”>,</span> <span class=”lit”>36</span><span class=”pun”>,</span> <span class=”lit”>36</span><span class=”pun”>,</span> <span class=”lit”>0.8</span><span class=”pun”>);</span><span class=”pun”>}</span> <span class=”pun”>.</span><span class=”pln”>qgg_popup_box </span><span class=”pun”>{</span><span class=”pln”>     z</span><span class=”pun”>-</span><span class=”pln”>index</span><span class=”pun”>:</span> <span class=”lit”>10</span><span class=”pun”>;</span><span class=”pln”>     position</span><span class=”pun”>:</span><span class=”pln”> absolute</span><span class=”pun”>;</span><span class=”pln”>    top</span><span class=”pun”>:</span> <span class=”lit”>0</span><span class=”pun”>;</span><span class=”pln”> left</span><span class=”pun”>:</span> <span class=”lit”>0</span><span class=”pun”>;</span><span class=”pln”> bottom</span><span class=”pun”>:</span> <span class=”lit”>0</span><span class=”pun”>;</span><span class=”pln”> right</span><span class=”pun”>:</span> <span class=”lit”>0</span><span class=”pun”>;</span><span class=”pln”>    width</span><span class=”pun”>:</span> <span class=”lit”>280px</span><span class=”pun”>;</span><span class=”pln”>    height</span><span class=”pun”>:</span> <span class=”lit”>396px</span><span class=”pun”>;</span><span class=”pln”>    margin</span><span class=”pun”>:</span> <span class=”kwd”>auto</span><span class=”pun”>;</span><span class=”pln”>    text</span><span class=”pun”>-</span><span class=”pln”>align</span><span class=”pun”>:</span><span class=”pln”> center</span><span class=”pun”>;</span> <span class=”pun”>}</span> <span class=”pun”>.</span><span class=”pln”>qgg_popup_close</span><span class=”pun”>{</span><span class=”pln”>    position</span><span class=”pun”>:</span><span class=”pln”> relative</span><span class=”pun”>;</span><span class=”pln”>    width</span><span class=”pun”>:</span> <span class=”lit”>36px</span><span class=”pun”>;</span><span class=”pln”>    height</span><span class=”pun”>:</span> <span class=”lit”>36px</span><span class=”pun”>;</span><span class=”pln”>    background</span><span class=”pun”>:</span> <span class=”com”>#fff;</span><span class=”pln”>    color</span><span class=”pun”>:</span> <span class=”com”>#999;</span>    <span class=”kwd”>float</span><span class=”pun”>:</span><span class=”pln”> right</span><span class=”pun”>;</span><span class=”pln”>    font</span><span class=”pun”>-</span><span class=”pln”>size</span><span class=”pun”>:</span> <span class=”lit”>24px</span><span class=”pun”>;</span><span class=”pln”>    text</span><span class=”pun”>-</span><span class=”pln”>align</span><span class=”pun”>:</span><span class=”pln”> center</span><span class=”pun”>;</span><span class=”pln”>    border</span><span class=”pun”>-</span><span class=”pln”>radius</span><span class=”pun”>:</span> <span class=”lit”>50</span><span class=”pun”>%;</span><span class=”pln”>    line</span><span class=”pun”>-</span><span class=”pln”>height</span><span class=”pun”>:</span> <span class=”lit”>36px</span><span class=”pun”>;</span><span class=”pln”>    font</span><span class=”pun”>-</span><span class=”pln”>weight</span><span class=”pun”>:</span><span class=”pln”> bold</span><span class=”pun”>;</span><span class=”pun”>}</span> <span class=”pun”>.</span><span class=”pln”>qgg_popup_close</span><span class=”pun”>:</span><span class=”pln”>hover</span><span class=”pun”>,</span><span class=”pun”>.</span><span class=”pln”>qgg_popup_close</span><span class=”pun”>:</span><span class=”pln”>focus </span><span class=”pun”>{</span><span class=”pln”>    color</span><span class=”pun”>:</span><span class=”pln”> red</span><span class=”pun”>;</span><span class=”pln”>    cursor</span><span class=”pun”>:</span><span class=”pln”> pointer</span><span class=”pun”>;</span><span class=”pun”>}</span> <span class=”pun”>.</span><span class=”pln”>qgg_popup_img</span><span class=”pun”>{</span><span class=”pln”>    position</span><span class=”pun”>:</span><span class=”pln”>relative</span><span class=”pun”>;</span><span class=”pln”>    top</span><span class=”pun”>:</span> <span class=”lit”>36px</span><span class=”pun”>;</span><span class=”pln”>    left</span><span class=”pun”>:</span> <span class=”lit”>0px</span><span class=”pun”>;</span><span class=”pln”>    width</span><span class=”pun”>:</span><span class=”lit”>240px</span><span class=”pun”>;</span><span class=”pln”>    height</span><span class=”pun”>:</span><span class=”lit”>360px</span><span class=”pun”>;</span><span class=”pln”>    border</span><span class=”pun”>-</span><span class=”pln”>radius</span><span class=”pun”>:</span> <span class=”lit”>15px</span><span class=”pun”>;</span><span class=”pun”>}</span><span class=”lit”>@media</span> <span class=”pun”>(</span><span class=”pln”>max</span><span class=”pun”>-</span><span class=”pln”>width</span><span class=”pun”>:</span> <span class=”lit”>640px</span><span class=”pun”>){</span>    <span class=”pun”>.</span><span class=”pln”>qgg_popup_close</span><span class=”pun”>{</span><span class=”pln”> display</span><span class=”pun”>:</span><span class=”pln”> none</span><span class=”pun”>;</span> <span class=”pun”>}</span><span class=”pun”>}</span>

三:修改html代码:

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

WordPress主题添加弹窗广告代码插图

<span class=”com”><!– 106源码网www.106ym.com弹窗广告 –><!– <a href=”https://www.106ym.com/”> 106源码网www.106ym.com </a> –></span><span class=”tag”><div</span> <span class=”atn”>id</span><span class=”pun”>=</span><span class=”atv”>”qgg_popup”</span><span class=”tag”>></span>    <span class=”tag”><div</span> <span class=”atn”>class</span><span class=”pun”>=</span><span class=”atv”>”qgg_popup_box”</span><span class=”tag”>></span>        <span class=”tag”><span</span> <span class=”atn”>class</span><span class=”pun”>=</span><span class=”atv”>”qgg_popup_close”</span><span class=”tag”>></span><span class=”pln”>×</span><span class=”tag”></span></span>        <span class=”tag”><img</span> <span class=”atn”>class</span><span class=”pun”>=</span><span class=”atv”>”qgg_popup_img”</span> <span class=”atn”>src</span><span class=”pun”>=</span><span class=”atv”>”./1.png”</span><span class=”tag”>></span>    <span class=”tag”></div></span><span class=”tag”></div></span>

注意:代码中“./1.png”这里需要修改成你自己的弹窗广告图片地址。这样就可以实现为网站添加弹窗广告的功能了。

0
分享到:

 1. 本站实行充值兑换金币,1元=1金币,每日签到可领取1个金币,[我要充值]
 2. 标注免费的资源,登录后即可下载,加入我们VIP会员全站无限下载,[去开通]
 3. 本站正式上线, 推荐到QQ或者微信群免费获得VIP会员资格,详情[点我查看]
 4. 如果您找不到合适的资源,请联系我们,告知您的需求,我们会尽快整理发布。

没有账号? 忘记密码?
喜欢我嘛?喜欢就按“ctrl+D”收藏我吧!♡