百度熊掌号粉丝关注Bar样式优化

请注意，本文编写于 2229 天前，最后修改于 2156 天前，其中某些信息可能已经过时。

相信很多站点已经做了百度熊掌号，对个人站点调用熊掌号粉丝关注js代码的时候，都遇到页面排版异常问题，主要表现在粉丝关注Bar上蹿下跳无法固定在某个特定区域。看到网上有朋友使用css+div自己写了一个，你可以参考下面的方法解决：

解决方案

建议将下面的代码复制粘贴到网站模板 post.php 文件中的合适区域。

<!-- 熊掌号粉丝begin -->
<div class="xiongzhanghao">
<div class="xiongzhanghao_touxiang"><a href="https://author.baidu.com/home/熊掌号id" rel="nofollow"><img src="熊掌号头像"></a></div>
<div class="xiongzhanghao_biaoti"><a href="https://author.baidu.com/home/熊掌号id" rel="nofollow">熊掌号名称</a></div>
<div class="xiongzhanghao_miaoshu"><a href="https://author.baidu.com/home/熊掌号id" rel="nofollow">熊掌号描述</a></div>
<div class="xiongzhanghao_ck"><a href="https://author.baidu.com/home/熊掌号id" rel="nofollow"><div class="xiongzhanghao_chakan">查看熊掌号</div></a></div>
</div>
<!-- 熊掌号粉丝end-->

保存下面的css代码并命名xzh.css ，上传到网站根目录（当然你也可以保存到其它位置，记得引入的css文件的时候注意下路径即可）

.xiongzhanghao{background-color:#fff;margin:20px 0;position:relative;z-index:0;overflow:hidden;-webkit-tap-highlight-color:transparent;text-align:center;}
.xiongzhanghao_touxiang img{width:67px;height:67px;border:1px solid transparent;border-radius:50%;margin-top:26px;}
.xiongzhanghao_biaoti{fon-size:16px;color:#333;margin-top:5px;line-height:16px;font-weight:600;}
.xiongzhanghao_miaoshu{width:70%;margin:auto;margin-top:10px;font-size:13px;color:#666;line-height:17px;font-weight:300;}
.xiongzhanghao_ck{margin:13px 0 25px;}
.xiongzhanghao_chakan{width:120px;padding:8px 0;font-weight:300;font-size:13px;line-height:13px;vertical-align:middle;display:inline-block;color:#fff;background:#3897f0;border-radius:3px;-webkit-tap-highlight-color:transparent;}

在网站模板 header.php文件在 </head>标签之前添加一个css样式调用，代码如下（不用修改）：

<link href="https://yourdomain.com/xzh.css" rel="stylesheet" type="text/css" media="all">

效果展示

显示效果，你可以在本站文章页面看到，如上图所示；

写在最后

如何让熊掌号粉丝得到快速增长？除了自身的服务和内容产生价值外。如果你的资金足够充裕，可以通过付费交易的方式将你的按钮放在别人的网站上。

另外，我们知道，新用户的路径是先通过百度搜索然后看到你的网页打开后，觉得内容不错，然后看到关注按钮才会点击关注成为你的粉丝。所以你也需要布置更多的按钮，包括按钮的位置，都是有不同的转化效果的。

文章作者：喵斯基部落
原文地址：https://www.moewah.com/archives/294.html
版权声明：本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。非商业转载及引用请注明出处（作者、原文链接），商业转载请联系作者获得授权。

百度熊掌号

百度熊掌号粉丝关注Bar样式优化

解决方案

效果展示

写在最后

相关推荐