[教學] Blogger / Blogspot 版面設計與技術收錄（二）

修改前請注意，一旦修改 HTML 內容，原本"版面配置"中的"網誌文章"的"編輯內容"，將會停止使用者再更新。如果有需要使用特別設定，像是地址顯示等，請在修改範本前先行設定完成。並建議大家如果還沒有大量的修改經驗前，記得要在修改前先備份範本，或是弄個測試網站先做測試呦。
在文章頁面中增加延伸閱讀（相關閱讀、Related Posts）功能
        如果你看到本部落格的文章，會發現文章最後都會出現數個「延伸閱讀」的文章，其實這項功能是透過外掛程式辦到的。

        而 Blogger 提供的外掛工具，並沒有相同的功能，雖然我們可以「模擬」出類似的目的，好讓來我們網站的客人繼續留在網站中久一點。譬如使用「最新文章」的外掛工具，以便我們可以用文章一直餵客人、一直餵、一直餵（咦，好像某種動物？）。
        但是，最新文章並不一定會跟客人正在看的文章具有「關聯性」，這也就代表客人可能根本沒興趣看你想餵的食物，呃，我是指延伸文章。
        所以，如果有一種可以讀取各別文章的關鍵標籤（Tag），並從過去文章中，找出具有相同關鍵標籤的文章，那就可以讓客人容易發現到具有關聯性的文章。
        正如古語所云：「條條大路通羅馬」，我們可以輕易的在網路上發現各式各樣的技術，有直接修改程式碼的，也有透過商業外掛達成目的。但是，卻有不少商業外掛，都會在延伸閱讀的位置後方，投放大小不等的廣告，雖然是免費的外掛，但卻或多或少的會破壞版面的配置。
        底下將要介紹的，就是我在把玩過許多高手所教導的技術後，決定使用的一套外掛工具（Source: Related Posts Widget for Blogger with Thumbnails）。

1. 首先，進到「Blogger」的後台，找出「範本」中的「修改 HTML」選項並點選進入。
2. 選擇「展開小工具副本」。 
3. 使用文章搜尋功能（或使用快速鍵「Control」+「F」），找出「</head>」的位置。
4. 在「</head>」之前，複製貼上下面的程式碼：<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqS4bdUd5oG358OK3nIWXa1x3HlSGELu5G2zR9nY3GvYbInFoj_909OwjblR9L5PxbGZ4HNueUiN8QKWM2jwblUaw_KCMJKKqkEoJQbpT5hMyDyeR54yD538wpdnAReMI8YB8yKVssAh0/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Vedfolnir Studio, www.Vedfolnir.com-->
<!--Related Posts with thumbnails Scripts and Styles End-->
5. 接著，在同個頁面中，繼續尋找如下所示之程式碼：<div class='post-footer-line post-footer-line-1'>
6. 在該行程式碼後方，繼續複製貼上如下所示之程式碼（本段為實際顯示畫面的程式碼，可依個人需求改變投放位置。）：<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></b:if>
<!--Vedfolnir Studio, www.Vedfolnir.com-->
<!--Related Posts with Thumbnails Code End-->

        到這邊為止，我們已經完成所有的工作，相當簡單對吧，裡頭有些參數還可以自行設定，有需要可以再詢問囉。現在，當我們回到文章頁面時，應該就可以看到與文章具有關聯性的延伸文章囉，敬請各位慢慢享用。:)
在 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; <!--垂直位置設定，也可以直接用 Bottom, Medium, 或 Top 等功能指令進行取代。-->
right: 0px;<!--水平位置設定，可用 Right或Left進行取代。-->
width: auto;
margin: 0 0px 0px 0px;
<!-- background: #ffffff; 背景顏色，一般不用。 -->
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*/
<!--Vedfolnir Studio, www.Vedfolnir.com-->
        接著，我們還需要將下面的程式碼，複製並貼到「版面配置」中的「HTML/JavaScript 小工具」，或是直接貼到「修改 HTML」中適當之位置亦可：
<div class='menu_by_dnowba'>
<a href='javascript:scroll(0,0)' title='back to top'><img src="http://www.Vedfolnir.com"/></a>
        這邊要注意的是，上面程式碼中包含一段網址：「http://www.Vedfolnir.com」，請直接以你想取代的圖片完整位址進行取代即可。
設定隱藏或顯示網頁元件的方法
        在部落格頁面中，每一項功能或小工具都可以視為一個「元件（Element）」。因此我們可以透過撰寫網頁程式，透過「if 判斷式」加上「網頁控制碼」，讓我們在瀏覽網頁過程中，依不同頁面產生各式控制碼，以便網頁程式可針對該等控制碼進行判別，並決定各元件是否需要在特定網頁上被隱藏或顯示。
        依慣例，這次的作業也是在「修改 HTML」中進行。一般而言，Blogger 正式的網頁元件，主要以「<b:widget…>…</b:widget>」的包裝方式進行撰寫，因此我們可以在該元件上添加如下所示之包含有「<b:if…>…</b:if>」判斷式的程式碼：
<b:widget id='***' locked='false' title='***' type='***'>
  <b:includable id='***'>
<b:if cond='data:blog.pageType != "item"'>
     ．
     ．
     ．
</b:if>
  </b:includable>
</b:widget>
        其中，該段「<b:if…>」程式碼可使用下列各式擁有不同網頁控制碼之程式進行取代，便可以達到在不同頁面中顯示或隱藏元件之目的；另，程式碼的「==」可以「!=」取代，以表示相反之意思。
<b:if cond='data:blog.pageType == "item"'><!--在文章頁面-->
<b:if cond='data:blog.pageType == "archive"'><!--在存檔（Archive）頁面-->
<b:if cond='data:blog.pageType == "index"'><!--在標籤（Label）分類頁面-->
<b:if cond='data:blog.url == data:blog.homepageUrl'><!--在首頁-->
繼續閱讀 - See more at: http://www.vedfolnir.com/2011/10/blogger-blogspot-html-design-learning.html#sthash.n5ERLp6x.dpuf