长汀论坛网（在Blogger实现侧栏浮动小工具）

月光博客 • 2021-10-04 22:58 星期一 • 阅读 174

　　长汀论坛网-Blogger的侧栏小工具非常好用，不过，当访问者向下滚动网站的时候，侧栏小工具就没了，我们可以将需要的小工具浮动在侧栏，实现一个流行的浮动侧栏小工具。

具体方法是：

先找到侧栏小工具的ID，每个小工具都有一个ID，查看HTML源码可以很容易找到小工具的ID号码。

接下来，登陆Blogger后台，增加一个HTML部件，代码如下：

<script>
bsfloatingwidget(“PopularPosts1”); // enter your widget ID here
function bsfloatingwidget(elem) {
var bsfloat = document.getElementById(elem);
var scrollee = document.createElement(“div”);
bsfloat.parentNode.insertBefore(scrollee, bsfloat);
var width = bsfloat.offsetWidth;
var iniClass = bsfloat.className + ‘ bsfloat’;
window.addEventListener(‘scroll’, bsfloating, false);
function bsfloating() {
var rect = scrollee.getBoundingClientRect();
if (rect.top < 0) {
bsfloat.className = iniClass + ‘ bsfloating’;
bsfloat.style.width = width + “px”;
} else {
bsfloat.className = iniClass;
}
}
}
</script>
<style>
.bsfloating {position:fixed; top:0; z-index:9999; box-shadow:10px 10px 4px -5px rgba(0,0,0,0.3);}
</style>

更改代码中的PopularPosts1，将其替换为你的小工具ID即可。通过调整CSS还可定义小工具的样式。

本文《长汀论坛网（在Blogger实现侧栏浮动小工具）》由网赚联盟（ wangzhuan.org.cn ）整理或原创，感谢您的阅读。

随机文章

SEO小小课堂网
友情链接交换
搜素引擎算法
关键词排名优化
网站内容优化
GEO培训
搜素引擎算法
关键词排名优化

百度搜索“网赚联盟”即可找到本站，微信搜索“小小课堂网”关注小小课堂网公众号。网赚联盟（ wangzhuan.org.cn ）欢迎用户投稿，发布者：月光博客，文章版权归作者所有，投稿文章不代表网赚联盟立场，中二少年发布为网赚联盟原创文章，转载请注明出处：https://wangzhuan.org.cn/57843.html