本篇的內容為 Blogger 範本中，文章及留言區塊的程式碼整理，並附帶簡單說明。建議參考系列文「第一篇」，將範本中的每個區塊加上註解，如此日後搜尋、修改都很方便。為了避免提供的程式碼錯誤，特地開了一個全新的網誌(使用新範本)，以確保本系列文提供的程式碼是最乾淨的狀態。如果各位讀者範本裏的程式碼跟本文的有所出入，很可能該區塊曾經修改過了。
<b:widget id='Blog1' locked='true' title='網誌文章' type='Blog'>
.
. 文章及留言區塊程式碼
.
</b:widget>本文要說明的「文章及留言區塊程式碼」全都在以上的「網誌文章」小工具中，以下程式碼內容依照範本中出現的順序排列，但不一定是顯示的順序；另外，行動版的內容跳過。
一、上下頁區塊
<b:includable id='nextprev'>....</b:includable>以上區間為文章區塊底部的上、下頁區塊，常見修改之處為：
- <data:homeMsg/>：代表預設字串「首頁」
- <data:newerPageTitle/>：代表預設字串「較新的文章」
- <data:olderPageTitle/>：代表預設字串「較舊的文章」
二、分享按鈕區塊
<b:includable id='shareButtons' var='post'>....</b:includable>以上區間為分享按鈕的程式碼呼叫區域(非顯示區域)。想要修改這部分的內容、或是新增分享按鈕(例如 Plurk)，可以參考這篇「【Blogger】新增 Plurk 分享按鈕」 →「2.2. 修改 XML」→「2.2.4.」，這裡的程式碼將分享按鈕個別分開顯示，可以看得更清楚、更容易修改。
三、文章區塊
<b:includable id='post' var='post'>....</b:includable>以上區間為文章區塊的程式碼，算是本文最重要的部分，以下分段詳細列出。列出這些內容的主要應用方法為，當想要安插一些自訂文字、圖片、或小工具，卻不知要安插在什麼位置時，可查閱這個部分的程式碼。
例如想安插在「文章標題」的前面或後面，那麼找到「1. 文章標題」的程式碼後，安插在其前面或後面即可。
1. 文章標題
<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>以上代表「文章標題」字串的程式碼為 <data:post.title/>
2. 文章內容
<b:if cond='data:blog.metaDescription == ""'>
<!-- Then use the post body as the schema.org description,
for good G+/FB snippeting. -->
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='description articleBody'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<b:else/>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</b:if>以上代表「全部文章內容」的程式碼為 <data:post.body/>
若想一次替換多篇文章內容的字串，可參考「Blogger 能否一次修改多篇文章的文字或內容？」，在「文章內容」的程式碼後面加入替換字串的語法。
3. 繼續閱讀
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>以上代表「繼續閱讀」字串的程式碼為 <data:post.jumpText/>
若想安裝圖片延遲外掛 Lazy Load，可參考「圖片延遲載入外掛 Lazy Load__Blogger 最佳安裝方式」，在「繼續閱讀」的程式碼後面加入 Lazy Load 語法。
4. 文章作者資訊
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn'>
<a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='author profile'>
<data:post.author/>
</a>
</span>
<b:else/>
<span class='fn'><data:post.author/></span>
</b:if>
</b:if>
</span>- 以上代表「張貼者：」字串的程式碼為<data:top.authorLabel/>
- 代表「作者名稱」字串的程式碼為 <data:post.author/>
5. 發文時間
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<meta expr:content='data:post.canonicalUrl' itemprop='url'/>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>- 以上代表「於」字串的程式碼為 <data:top.timestampLabel/>
- 代表「發文時間」字串的程式碼為 <data:post.timestamp/>
6. 留言數量
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comment_count_picker'/>
</b:if>
</b:if>
</b:if>
</span>7. email 圖示
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>想變更 email 圖示可更改 img 標籤裡的圖片網址。
8. 快速編輯圖示
<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>9. 分享按鈕
<div class='post-share-buttons goog-inline-block'>
<b:if cond='data:post.sharePostUrl'>
<b:include data='post' name='shareButtons'/>
</b:if>
</div>這段程式碼會顯示分享按鈕，但要 hack 分享按鈕的程式碼，得從「二、分享按鈕區塊」下手。
10. 反向連結
<span class='post-backlinks post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.showBacklinks'>
<a class='comment-link' expr:href='data:post.url + "#links"'><data:top.backlinkLabel/></a>
</b:if>
</b:if>
</b:if>
</span>11. 標籤
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>- 以上代表「標籤」兩個字的程式碼為<data:postLabelsLabel/>
- 代表「標籤名稱」的字串為 <data:label.name/>
12. 星號評等
<span class='star-ratings'>
<b:if cond='data:top.showStars'>
<div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='280'/>
</b:if>
</span>13. 反應
<span class='reaction-buttons'>
<b:if cond='data:top.showReactions'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'><tr>
<td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>
<span class='reactions-label'>
<data:top.reactionsLabel/></span> </td>
<td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
</tr></table>
</b:if>
</span>14. 位置
<span class='post-location'>
<b:if cond='data:top.showLocation'>
<b:if cond='data:post.location'>
<data:postLocationLabel/>
<a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
</b:if>
</b:if>
</span>四、標籤訊息區塊
<b:includable id='status-message'>....</b:includable>這個區間的程式碼的作用是，當按下標籤時，最上方會顯示「顯示具有 XXXX 標籤的文章....」這樣的字串。
如果不想顯示這些字串，可將這個區間的程式碼全部註解起來(或刪除, 記得備份)。
五、串聯式留言區塊
<b:includable id='threaded_comments' var='post'>....</b:includable>以上區間為串聯式留言的程式碼，基本上這個區塊 Blogger 的程式碼寫法與舊版留言差異很大，擺明不希望使用者 hack，稍微能夠修改的就是變更一下 CSS 而已，例如把「站長回覆」的留言用不同顏色標示，建議參考這一篇「Highlight Author Comments in Blogger's New Threaded Comment System」。
另外，如果想要自訂「留言欄訊息」(也就是張貼意見）」的版面，可參考「Blogger "留言欄訊息"自訂版面及樣式的方法」。
六、主程式區塊
<b:includable id='main' var='top'>....</b:includable>這部分是「網誌文章」工具的主程式執行區域，想要把版面大風吹得從這個區塊下手，但危險性太高、對程式碼不熟不建議這麼做。
這裡面風險性不高的修改是發文日期，程式碼為──
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>。七、訂閱區塊
<b:includable id='feedLinksBody' var='links'>....</b:includable>- 這個區塊位於「一、上下頁區塊」的下方
- 以上代表「訂閱：」字串的程式碼為 <data:feedLinksMsg/>
- 代表「文章 (Atom)」字串的程式碼為 <data:f.name/> (<data:f.feedType/>)
八、舊範本留言區塊
<b:includable id='comments' var='post'>....</b:includable>新範本不會執行這個區塊；如果是舊範本，留言區塊可以玩的花樣可就多了，可參考「本站留言相關的 hack」，在這個標籤 2012 年以前的文章都是針對舊範本的留言區塊來 hack。
一、各種註解方式及區塊的修改
二、標頭、導覽列、側邊欄、頁尾區塊的程式碼
三、文章及留言區塊的程式碼
➢➢快速選單： １２３