插件的安装教程请参照店长这篇文章：Swiper Bar

进行美化微调之前请确保你的博客使用的是Hexo框架Butterfly主题，如果其他框架或主题可能并不适用

添加样式代码

往你的自定义 CSS 文件中添加以下样式代码：

/* 文章置顶滚动栏(店长) */
.blog-slider {
  height: 260px !important;
}

.blog-slider__img {
  width: 40% !important;
  height: 100% !important;
}

@media screen and (max-width: 600px) {
  .blog-slider {
    padding: 0 !important;
  }

  .blog-slider__img {
    width: 100% !important;
    height: 40% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

以上代码作用是将电脑端的文章封面图片从原先正方形调整成长方形，移动端则变成覆盖满左右边框，显得更加顺眼，

可在以上已有元素中或自行 F12 打开使用 开发者工具 寻找对应元素的 ID 继续添加自己喜欢的样式代码

前后预览

电脑端

移动端

鸣谢

Akilarの糖果屋：SwiperBar