要如何? 撰寫 Blogger 的範本－❤️灰鴿❤️

Google Blogger 的模板(佈景主題) 製作教學
自己的版型自己做 ~

當你覺得 Blogger 所提供的版面範本，讓你覺得欠缺個人風格、單調呆板時。而想要自行創作或是想要學習製作 Blogger 模板的, 又不知要如何下手 ~ 請繼續聽粉叫唬爛下去。👀

首先、先製作一個基本的模板，沒 Javascript、CSS 的空白架構

點按下面的 Code 複製 XML碼：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateVersion='1.3.3' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<title><data:view.title.escaped/></title>

<b:skin version='1.3.3'> /*-- 定義變數 & CSS 樣式碼 --*/</b:skin>

<b:template-skin>版面配置的 CSS - 樣式區</b:template-skin>

</head>
<body class='container'>


<b:section class='main' id='page_body' name='Page Body' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='網誌文章' type='Blog' version='2' visible='true'/>
</b:section>

</body>
</html>

上面的XML碼，僅提供您一個可填充部落格帖子的部落格架子。
接下來、就可以開始分割版面，新增一些佈局的頁面元素標籤 (段落標籤、 <b:section .... />)

可用來放新增小工具

<b:section class='menu' id='main_page' name='(menu) 全域'>

擱來、設定變數，假如不會寫，可以參考(複製) 官方範本。
假如、你只是要自己使用而已、不想在「主題設計工具」裡有設定的功能，就跳過讓過 ~

變數的使用在<b:skin> 之間和以外不同 ~ <b:skin> $(blog.title.color) </b:skin>
在 <b:skin> 以外的寫法 --- <data:skin.vars.blog_title_color/>

擱來、給 <body> 元素，添加 Class Name ，上面那張圖片內黃色框框內的那幾行 .

可用來判斷頁面狀態，以便 Javascript、CSS 使用

堤供 2種 style ~ CSS 的(寫)用法，僅供參考，不負責任

分3區寫在範本裡如下圖 :

另外一種作法是，將後面那兩段，分別寫在2個 HTML小工具裡，再設定好它們出場的時機 ...

看到這裡，我相信你們已可以自由發揮了吧 !!

一頁式首頁 Blogger 範本製作

我覺得(建議)沒有必要去學Blogger的特殊語法，因為只有 Blogger 範本用得到以外，再也沒有其他地方用的到，除非、你非常有興趣想學習製作 Blogger 範本，或是有深厚的程式能力，因Blogger的語法，和 C、PHP、javascript 非常相似，大概瞄一下就可知道怎樣寫了...

這個教程，並不是要教你做一頁式網站，要做一頁式的網站，上一篇文章裡的基本模板，只要把 Blog 小部件拿掉，就是一個空白板模，可任由你揮灑的一頁式的網站。

看清楚👀 我們是要做一頁式首頁 + 貼上標籤的分類文章 + 網頁獨立文章

先來看看裝上基本模板範本的樣式 ~ 哇落落長..

收合之後比較好分割版面

在版面配置你將會看到如下畫面 ~ 只有一個頁面主體 Section

接下來要開始分割版面了 ~
版面將分割成3個 DIV 區塊，第一個為首頁，第2個為網頁和文章閱覽區，第3個為頁腳

第二個 DIV區塊，不能包(寫)在<b:if ....> 裡面，否則、頁面主體 Section 將不會顯示在版面配置窗格裡，判斷頁面狀態要直接寫在 Section 標籤裡

在首頁、放上連結 → 連到貼上標籤的分類文章或網頁獨立文章 💗 讓 Main 主閱覽區演出

連到分類文章 → <a href='https://你的格子.blogspot.com/search/label/標籤名'>標籤名</a>

⭐ 在 Main 主閱覽區，記得要放一個回到首頁的超連結

鴿來、我們做一個簡單式的滾動視差首頁 ~

在首頁裡、放上3個 DIV

首頁

<div id='Homepage'>
一頁式首頁 ... <br />
<div id='D-01' class="v-block">1</div>
<div id='D-02' class="v-block">2</div>
<div id='D-03' class="v-block">3</div>
</div>

下一步，在v-block裡裝進 <UL> Menu

其實、首頁也可以用文章編輯器或其他編輯器，先做好再貼上去 ...
這次練到這裡，等消化完再繼續