wordpress侧边栏实现滑动广告

作者: 鲁智深 分类: wordpress 发布时间: 2014-08-31 23:33

【应网友提问】

虽然起的标题是侧边栏滑动广告,但好像谷歌已经发布公告,禁止此方法来获取点击量赚取广告费。所以说有这想法人就别打谷歌广告的主意了!

效果图

效果图

如何实现侧边栏滑动广告

1、加载jquery库

首先网站需要加载jquery库,一般网上下载的主题都会有,如果没有那就请下载如下:

jquery库

在header.php中<head></head>插入调用代码

1
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.js"></script>

2、新建js文件huadon.js

打开huadon.js文件加入如下代码:

1
2
3
//sidebar scroll
jQuery(document).ready(function($) {if(!isie6()){var rollStart=$('#rollstart'),rollSet=$('.right_list_1,#tuijian');rollStart.before('<div class="hcms_rollbox"></div>');var offset=rollStart.offset(),objWindow=$(window),rollBox=rollStart.prev();if(objWindow.width()>960){objWindow.scroll(function(){if(objWindow.scrollTop()>offset.top){if(rollBox.html(null)){rollSet.clone().prependTo('.hcms_rollbox')}rollBox.show().stop().animate({top:0,paddingTop:0},400)}else{rollBox.hide().stop().animate({top:0},400)}})}}
    function isie6() {if ($.browser.msie) {if ($.browser.version == "6.0") return true;}return false;} });

在header中<head></head>插入如下调用代码

1
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/huadon.js"></script>

3、最后在style中写入css样式:

1
.hcms_rollbox {position: fixed;background: #FFF;width: 275px;}

注:css样式不保证兼容全部网站,按以上方法添加后请对应修改相关参数。

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注