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

到这边为止已经完成所有的工作，相当简单对吧。里头有些参数可以自行设定，有需要可以再询问啰。现在，当我们回到文章页面时，应该就可以看到与文章具有关联性的延伸文章，敬请各位慢慢享用。:)

在 Blogger 安装 Facebook 的留言功能

Blogger 提供让读者透过留言板，与作者讨论各文章的想法与心得的留言功能。不过，如果可以让部落格结合脸书的留言讨论模组，那将可以让更多人观看我们呕心沥血写出来的作品。因此，底下将要介绍如何在部落格中，增加脸书留言的设计。

首先，我们链接脸书提供的开发者网页：「Facebook Developers, Comments Pulgin」。

在该页面中包含有数个栏位，请依照个人喜好填写，并按下「Get Code」按钮，以取得留言代码。当然，之后都可以在代码中进行修改，以符合版面实际需求。

在取得代码后，依照先前所说，进入后台的「HTML编辑器」中，并将留言代码贴在适当的位置上，该位置可依个人喜好自行决定。

另外，如果直接就将该代码原原本本的贴上我们部落格，大家应该会发现到不管在哪篇文章或页面，留言内容都会完全一致，无法依照各页面内容产生变化，这主要是因为该代码中的默认中，是以「部落格网址」为主定义，并以此进行留言系统的布置。

因此，如果我们希望每一篇文章都有各自留言内容的话，我们可以将该代码中：href=‘Your Domain Link’ 改以 Blogger 内建的定义进行修正，并用下列代码进行取代即可：

expr:href=‘data:post.url’

在 Blogger 页面上布置浮动式图片的设计

我们平常在逛许多部落格时，常会发现有图片像幽浮一样漂浮在视窗上，随著我们上下卷动页面而跟著移动，这就是所谓的「浮动式图片」，当然，他的功能不仅只是用来展示图片。

具体的作法是将下面代码，复制并贴到前述的「CSS 设计空间」中：

/* Fixed Bar */ .menu_by_dnowba { position: fixed; bottom: 0px; right: 0px; width: auto; margin: 0 0px 0px 0px;

opacity:.900; filter: alpha(opacity=90); padding: 0px 0px 0px 0px; -moz-border-radius-topright: 10px; -moz-border-radius-topleft: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; } .fixed_menu a:hover img { position: relative; top: 2px; left: 2px; border-top: 0px solid #b3b3b3; border-left: 0px solid #b3b3b3; border-bottom: 0px solid #999999; border-right: 0px solid #999999; } .fixed_menu a { display: block; } /Optional : This puts each link in the menu on a new line, remove if you want a horizontal menu/

• html .fixed_menu {position:absolute;} /IE only change the position mode of the menu/

接著，我们还需要将下面的代码，复制并贴到「版面配置」中的「HTML/JavaScript 小工具」，或是直接贴到「修改 HTML」中适当之位置：