[Blogger]如何編輯Blogger Template

2月 25, 2020

從頭開始教你如何編輯Blogger的Template

你有沒有想過，設計屬於自己的Blogger版面配置？
Blogger所提供的主題(Theme)，並不能自由地控制各項版面配置，大量繁雜的程式碼更令初學者看得頭痛。
這裡將會教你如何從頭開始編寫Blogger Template的HTML CODE。

首先，你或許需要先學習基本的HTML&CSS知識。這十分簡單，可以參考w3schools。

你可能需要一些工具︰

1. HTML/CSS Editor︰NotePad++ ,Visual Studio Code
2. NoteBook ︰記下基本的程式碼。

Say Hello World in Blogger.
1. 請先登入Blogger，從Blogger主頁面(Dashboard)->主題(Theme)->編輯HTML。

2. 貼上以下程式碼。

<html>
   <head>
      <title> Title of Blog </title>
   </head>
   <body>
      <p>HELLO WORLD</p>
   </body>
</html>

按下儲存。你會發現會顯示[更新失敗]提示訊息。
這是因為我們需要加入一個<b:skin>於<head></head>Tag之間。

 <b:skin><![CDATA[

 /***PUT YOUR ALL CSS CODE HERE***/

 ]]>

 </b:skin>

請將程式碼放在</title>Tag之前，並且按下儲存。
這時你會發現仍然[更新失敗]。
因為我們還缺了<b:section>Tag.
一個Theme一定要最少有一個b:sectionTag.

<b:section id="hello" class="hello"></b:section>

請你把程式碼加在之間。然後再次按下儲存，你會發現顯示[更新成功]了！
雖然這不足以生成一個Blogger template，但是這是最基本及步驟程式碼。
若你重新載入編輯器，你會發現Blogger會自動幫你生成一些額外的程式碼。例如︰

<html 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'>

這是你再預覽會發現，新增的文章沒辦法看到。
這們因為還需要告訴Blogger後台在哪裡顯示帖子。除了文章之外，若要顯示Header,Sidebar,Footer我們需要生成section and widgets去顯示。

<b:section class='main' id='main' showaddelement='yes'> 
  <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog' version='1'/>
</b:section>

搜尋此網誌

freeCodeInfo