這是 Blogger 網誌開發教學綜合收錄第 1 篇。我們網站舊版實際上是建構在 Google 的 Blogger 網誌。雖然 Blogger 具備有方便與安全的優點，但是自由度也會稍微受到約束。
不過 Google 讓我們在版面規劃的部份，具有相當高度的自由，因此我們可以依照自己的想法，讓部落格更俱個人風格。
下面我將針對網路上，談到 Blogger 版面設計與應用的許多零碎資料，重新進行整理、驗證與分類，希望對大家有用。:)
修改前請注意，一旦修改 HTML 內容，原本”版面配置”中的”網誌文章”的”編輯內容”，將會停止使用者再更新。如果有需要使用特別設定，像是地址顯示等，請在修改範本前先行設定完成（但是新模板不一定支援）。建議大家在做任何修改前，務必先行備份範本，或是弄個測試網站先做測試呦。
在 Blogger 上放置推文按鈕
想讓自己的部落格或網站，可以加入目前極為熱門的社群網路，最簡單的方式就是在自己部落格中放置推文按鈕，例如：臉書的讚或是 Google 的「+」。
其中，「AddThis」模組式的推文按鈕群，是網路部落格較為廣為人之且多人使用的系統，而且除了多種基本設計可以快速選用外，也有更為進階的個人化設計可以選擇。
當然，如果你也跟我一樣使用「Blogger」，那在「版面規劃」中的「新增小工具」功能，就可以直接搜尋並加入「AddThis」的小工具，而且透過此方法，你不用特別去「」的網站上複製程式碼就可使用。
決定推文按鈕的擺設位置
依照前面增加了推文按鈕後，你可能會覺得按鈕的擺放位置，並不是自己想要的。
所以我在這邊提供幾種網路流傳的擺放位置（修改 HTML 功能，並展開小工具。），如果大家都會這樣用，就代表有他的意義存在囉。
當然，一切都還是以你自己的個人感受為主，畢竟在你的落格格中，YOU ARE THE BOSS。
文章標題的右側
<h3 class='post-title entry-title'>（尋找本段程式碼，並將下列程式碼複製其後。）
<div style='float:right; margin-left:10px;'><!--Vedfolnir.com -->
文字或程式碼
</div>文章本文的右側
<div style='float:right; margin-left:10px;'><!--Vedfolnir.com -->
文字或程式碼 </div>
<data:post.body/>（尋找本段程式碼，並將上列程式碼複製其上。）文章底排工具列的右側
post-footer-line post-footer-line-1（尋找本段程式碼，並將下列程式碼複製其後。）
<div style='float:right; margin-left:10px;'><!--Vedfolnir.com -->
文字或程式碼 </div>Blogger 網頁標題最佳化
一般 Blogger 文章在瀏覽器上方顯示的標題，其格式通常為「網站名稱+文章標題」。但是部落格本身，應該是文章內容與品質，優先於部落格名稱，因此我們可以透過更改標題格式的順序，讓大家搜尋文章時，可以一眼就瞭解這篇文章是不是他們所需的內容。
修改方式是依照編輯「Blogger」的 HTML 方式進行修改，首先，我們先在 HTML 中搜尋下列程式碼：
<title><data:blog.pageTitle/></title>
並用下列程式碼進行替換即可：
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.Title/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>移除文章最下方的訂閱功能
有習慣使用 RSS 的使用者，相信對於 Blogger 官方提供，位在文章最下方的訂閱選項「訂閱：文章 (Atom)」感覺相當雞肋，所以如果你想將該功能取消或隱藏起來，可以在 HTML 中，找到底下這段程式碼，並隨個人習慣進行隱藏（如：<!– 程式碼 –>）或刪除：
<b:include name='feedLinks'/>
在每篇文章（非首頁頁面）末自動顯示文字或功能
我們可以到範本設定中，選擇版面配置以及修改 HTML，勾選「展開小裝置範本」。接著，找出下面兩段程式碼的位置，並在之間安置我們想要顯示的文字或程式碼：
<b:if cond='data:post.allowComments'>
<h4>Blogger 的「繼續閱讀」功能
更改「繼續閱讀」的位置，我們可以修改 HTML，在 </head> 前插入下列代碼：
<style type="text/css">
.jump-link{text-align: right;}
</style>在 Blogger 文章中，將程式碼區塊「框」起來
打算在 Blogger 中用特殊框架，顯示程式碼內容，我們可以在「Blogger 範本設計工具」的進階選項中，選取「新增 CSS」指令，並將下面程式碼複製並貼上到右側「CSS 設計空間」的欄位中。
Code {
display: block; <!--fixes a strange ie margin bug-->
font-family: Courier New;
font-size: 8pt;
overflow:auto;
background: #fefefe url(https://www.vedfolnir.com/resource/image/code-bar.png) left top repeat-y;
border: 1px solid #ccc;
padding: 10px 10px 10px 20px;
max-height: 200px;
line-height: 1.2em;<!--Vedfolnir.com -->
}在完成前面複製貼上的動作後，當我們往後需要撰寫內嵌程式碼的文章時，可透過文章編輯器中的「HTML 編輯模式」，將想要「框」起來的文字或程式碼，以「<Code>」與「</Code>」指令包裝起來，並放置在適當位置，其格式如下所示：
<code> Example Code </code>如此，當使用瀏覽器觀看文章時，文章頁面上即會自動生成如下所示之程式碼及狀態：
Example Code
繼續閱讀
發佈留言