Blogger／Blogspot 版面设计教学与网页技术收录（三）

这是 Blogger 教学综合收录第三篇。我们网站旧版实际上是建构在 Google 的 Blogger 系统。虽然 Blogger 具备有方便与安全的优点，但是自由度也会稍微受到约束。不过 Google 让我们在版面规划的部份，具有相当高度的自由，因此我们可以依照自己的想法，让部落格更俱个人风格。

下面我将针对网络上，谈到 Blogger 版面设计与应用的许多零碎资料，重新进行整理、验证与分类，希望对大家有用。:)

修改前请注意，一旦修改 HTML 内容，原本”版面配置”中的”网志文章”的”编辑内容”，将会停止用户再更新。如果有需要使用特别设定，像是地址显示等，请在修改范本前先行设定完成（但是新模板不一定支持）。建议大家在做任何修改前，务必先行备份范本，或是弄个测试网站先做测试呦。

Random Posts 随机推荐文章（以标题文字随机显示部落格文章）

在小工具的新增 HTML 里，填入下列代码：

脸书推荐 浮动（漂浮）视窗（Recommendations Bar）

在部落格中想要安装脸书的浮动推荐视窗（在左或右下角会自动浮起的小视窗），可将下列代码安装在 HTML 编辑中，BODY 中的任意位置：

其中，X% 表示文章页面被卷动到全页面的百分比，则浮动视窗自动开启，X 可填入50，或者，将 X% 更改成「onvisible」，表示当网页中，存放「fb-recommendations-bar」代码的位置显示在视窗上时，浮动视窗即自动开启。

注意，在使用本方法前，要先安装 Facebook 留言板中，在 Get Code 时，上半部取得的代码（我一般都会装，所以是将该段代码直接放在新增小工具的 Html/JavaScript Widget 中，这样就不用每次安装新板型都得重贴一次。）。

在文章侧边固定位置处浮动的社群分享视窗

进入部落格的后台，在版面配置中，新增「HTML/JavaScript」小工具，并将下列代码贴到该小工具里头，如此便能在网页上直接呈现适当的分享视窗。

提示：bottom:5% 是控制分享视窗在屏幕上的上下位置，而 margin-left:-750px 控制分享视窗在屏幕上的左右位置，可依自己喜好进行更改。

另外，下列程序提供五种社群的分享按钮，可以个人喜好酌删。

一、

二、

读者常见问答 Q&A

如何在 Blogger 每篇文章自动嵌入 Facebook 按赞（Like）按钮？（读者 Style Rainbow）

读者 Style Rainbow 提问：
请问要怎么在每篇文章里都能显示脸书让人按 Like？谢谢！

工字号回复：
在 Blogger（Blogspot）系统中，若想让每篇文章自动出现 Facebook Like 按钮或社群分享列，最正规且有效的方式是直接写入范本的 HTML / XML 原始码中：

1. 定位文章内容标签：
   进入 Blogger 后台「范本」>「编辑 HTML」，在代码编辑器中搜寻关键标签 <data:post.body/>（这是 Blogger 负责渲染文章主体内容的核心标签）。
2. 决定按钮摆放位置：
   • 放在文章开头：将 Facebook 官方按赞按钮代码贴在 <data:post.body/> 的上方。
   • 放在文章结尾（推荐）：将代码贴在 <data:post.body/> 的下方，这样读者阅读完文章后刚好能顺手按赞分享。
3. 更推荐的聚合按钮方案：
   除了单独嵌入 Facebook 官方按钮外，工字号更建议搭配如 AddThis 或 ShareThis 这类多功能聚合按赞列，不仅能一次整合 Facebook、Twitter、Plurk 等多平台，还能自带数据统计分析，版面维护上也更为干净俐落。

继续阅读

1. Blogger／Blogspot 版面设计教学与网页技术收录（一）
2. Blogger／Blogspot 版面设计教学与网页技术收录（二）
3. Blogger／Blogspot 版面设计教学与网页技术收录（四）