0°

wordpress添加侧边栏滑动广告

这是在tstyle主题上修改,其它主题也可以按照此方法修改。

添加js代码

在主题js目录里新建一个文件ad.js
ad.js代码

/* 侧边栏滚动 */
$(function() {
var $sidebar = $("#guanggao"),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 15;
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});
});

添加CSS样式

在style.css添加样式代码

#side-adfn { margin-bottom: 8px; }
#side-adfn .f-m { height: 220px; overflow: hidden; }
#side-ad .f-m { height: auto; overflow: hidden; }
#side-ad { margin-top: 0px; }
#side-ad-ctn { width: 210px; height: auto; overflow: hidden; margin: 10px 0px 0px 0px; }

侧边栏添加广告代码

<script type="text/javascript" src="/wp-content/themes/tstyle/js/ad.js"></script>
<div id="guanggao">
<div id="ad-ad" class="col-6 last">
<div class="f-s"></div>
<div class="f-m">
<h3>
<em>广告区</em>
</h3>
<div id="ad-ad-ctn">
//此处添加广告
</div>
</div>
</div>
</div>
<div class="f-e"></div>
「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
Windows
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论