欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  新闻

在Blogger实现侧栏浮动小工具

程序员文章站 2022-06-25 10:46:20
  Blogger的侧栏小工具非常好用,不过,当访问者向下滚动网站的时候,侧栏小工具就没了,我们可以将需要的小工具浮动在侧栏,实现一个流行的浮动侧栏小工具。...

  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实现侧栏浮动小工具