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>
<!-- page_body end-->
</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

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

Blogger 模板製作 ~ 3部曲


Blogger 模板製作 ~ 完成曲

輔助代架建置 Gloogle Blogger



 
文章標籤
全站熱搜
創作者介紹
創作者 灰 鴿 的頭像
灰 鴿

❤️灰鴿❤️

灰 鴿 發表在 痞客邦 留言(19) 人氣(177)