在看過<head>裡面的包裝後，接下來要看的就是比較複雜的身體了。而這篇起海芋亦慢慢地帶您透視blogger的身體部份，讓您打通任督二脈，輕鬆看懂程式架構。
一開始，我們可以把我們的網頁想像成一個畫布，把我們所要的地方切割出來後，我們才比較好對程式下手，如羊男所生產的Gadget，是將畫布切成好幾塊，但這一切還是要看需求而定。
但是，我們如何知道要怎樣切比較好呢？一般來說，我們會先將身體切為「頭」、「中」、「尾」這三個大部份，而最外層的，通常都是以「outer-wrapper」這個CSS來包裝，如下程式碼：
<div id='outer-wrapper'><div id='wrap2'>
<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<div id='header-wrapper'>
<div id='content-wrapper'>
<div id='footer-wrapper'>
在這裡，建議大家用Notepad++的原因是，他可以將程式碼收納的很漂亮，這樣我們就能專心地編輯某一個部份了，如下圖：
接著，我們開始來講解這三個主要部份。「header-wrapper」通常是指「頭」的部份，而「content-wrapper」則是指身體的中間，至於「footer-wrapper」，則是指身體的腳。
我們再看到<div id=’header-wrapper’>這個程式片段，以海芋所套用的blogger預設範本，他是將他寫成以下的片段。
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
</div>注意，不管是「頭」、「腳」或是「身體」，基本上您如果想要有「元件」，您就必須將元件包在「<b:section>」中，而「<b:section>」中包含了幾個屬性值，以Google官方所出的的blogger help中，有提到如下：
- id: (必要) 獨一無二的名稱，只包含字母和數字。
- class – (選用) 意見類別名稱為 navbar、header、main、sidebar 和footer。 如果您在稍後切換範本，這些名稱可協助 Blogger 判別如何以最好的方式來轉移您的內容。 不過，您也可以使用不同的名稱。
- maxwidgets: (選用) 此區段中允許的小裝置數量上限。 如果未指定，表示沒有限制。
- showaddelement: (選用) 可以是 yes 或 no，yes 為預設值。 此屬性可判別 [網頁元素] 標籤是否要在此區段中顯示 [新增網頁元素] 連結。
- growth: (選用) 可以是 horizontal 或 vertical，vertical 為預設值。 此屬性可判別此區段中的小裝置是並排還是堆疊。
基本上，海芋是建議依上述的名稱來命名，以免到時後自己錯亂掉，至於要分別何種不同的話，則是可以由不同的id來分辨，為了方便大家好記，我們一樣將「b」看為「blogger」，「section」則是看為「片段」，這只是我們blogger的片段而已。
接下來，就要進入更深一層的地方了，如果還沒準備好，就喝杯水再上路吧，但是不要把水吐到您的LCD上喔！
我們再來看到「<b:section>」裡，前面曾經提過，「<b:section>」是將我們的element包起來，在opera、blogger，甚至是yahoo widget中，都稱乎這些小元件為「widget」，所以，想當然爾，我們要有「blogger的widget」，故依我們命名的經驗，可推理得知，應該叫做「b:widget」吧！
於是，我們躡手躡腳地翻開了google的程式碼，用我們的眼睛偷看一下，果然是「b:widget」，可惜我們不是在考試，不然一定拿100分，話雖如此，但是還是可以看到，他的程式碼大概是長這樣的：
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:widget id='Header1' locked='true' title='測試網站 (Header)' type='Header'>
<b:widget id='Label1' locked='false' title='Labels' type='Label'>
</b:section>
這裡的每一個「b:widget」，都代表著一個小物件，趁著下課前，我們再將注意力集中至「b:widget」一下下，可以發現他有幾個屬性，而這些屬性，依然可以在blogger help中找到答案，海芋就將他整理如下：
- id:- (必要) 此屬性只能包含字母與數字，且範本中的每個小裝置 ID 都必須是獨一無二的。 若未刪除小裝置並建立新的小裝置，就無法變更小裝置的 ID。
- type: (必要) 此屬性代表小裝置的種類，且必須是以下所列的有效小裝置類型之一。
- locked: (選用) 可以是 yes 或 no，no 為預設值。 您無法從 [網頁元素] 標籤中搬移或刪除已鎖定的小裝置。
- title: (選用) 小裝置的顯示標題。 如果未指定，則會使用諸如 List1 之類的預設標題。
- pageType: (選用) 可以是 all、archive、main 或item，all 為預設值。 小裝置只會顯示在您 blog 中的指定網頁 (所有小裝置都會出現在 [網頁元素] 標籤中，無論其 pageType 為何)。
每當您新增一個widget，則會多一個「b:widget」，所以才會有blogger無痛換樣版的方法。想必大多數的人看到這裡，都需要時間來消化一下，所以在「b:widget」中的程式碼，就且留到下回再來講解吧！
版面配置的網頁元素標記