自行設計一個Blogger的主題模版 (不需要會編程) ~ 天馬行空

Google Blogger不僅提供免費的部落平台, 免費的主題模版供你選擇, 免費的虛擬主機託管服務, 還讓你免費使用自購網域名, 自行使用非官方主題模版, 或是自行發揮編寫你自己的主題.

如果不懂如何自行編寫XHTML程式碼, 那麼可以試著下載安裝一個叫做TemplateToaster的軟件, 對於沒有任何編程基礎的朋友, 這不失為一個好辦法來自己為自己客制一個獨一無二的部落格主題模版.

下載TemplateToaster免費試用版

下載和安裝很容易, 官網也有詳細的說明和圖示. 依照指示一步步做, 就能輕鬆下載安裝免費的試用版, 在選擇語言時, 是有中文簡體可供選擇.

安裝好後, 在桌面上點擊TemplateToaster 8的小圖示, 然後選[Blogger].

在這裡, TemplateToaster 給你二個選擇, 一是使用範例的主題模版, 一個是自己客制化一個. 我們選[Start from Scratch], 自己客制化一個.

主題模版的主色調和字型

接下來, 就進入了 TemplateToaster 的主畫面了. 第一步便是先決定主題模版的主色調和字型. 色調的配色可以自行調配, 可惜的是, 字型的選擇就很有限了.

選好未來主題模版的主色調和字型, 按下[OK]鍵後, 便進入了 TemplateToaster的主要工作區. 下圖便是TemplateToaster工作區的主畫面了. 你可以在這裡設計一個屬於你的客制化主題模版, 並點選下方的三個標籤來預覽在新設計的主題模版呈現在電腦/平版/手機上的樣子.

設計Header部落格標題

在這裡, 你可以輕易的設定部落格主頁標題欄的高度, 寛度和標題區的背景顏色或是圖片.

Height - 設定主頁標題欄位的高度

Width - 設定主頁標題欄位的寛度

Background - 設定主頁標題欄位的背景顏色或是放置圖片當背景

Text Areas - 按下這個選項在標題欄內加入文字

Header Position - 設定主頁標題在menu的上方還是下方

設計Menu下拉式選單

同樣的, 按下Menu標籤後, 可以設定menu列表的高度, 寛度和標題區的背景顏色等, 同時子選單的背景顏色也可以在這裡設定.

比較值得一提的是, 在Menu標籤下, 有二個Background的選項, 第一個是設定menu的背景色, 另一個則是設定menu上的選項被選中時的顏色.

另一個值得一提的是[Menu Button Properties], 在這裡可以設定選單按鈕的位置是居中, 還是靠右或是左→[Alignment] . 也可以設定按鈕之間要不要加一個隔線等等.

設計內容content版面

這裡是設計部落格主頁的內容部份, 也是整個部落格給人的第一印象. 從這裡可以看到光是Background就有4個, 由左到右分別是設定內容/文章欄位/留言區/留言區下方塊的背景顏色.

columns - 設定要幾行

如何安裝在Blogger上

其實整個面版非常的直覺式, 下載一玩便會用了. 都調配好之後, 最重要的部份來了, 就是export你嘔心瀝血設計好的主題模版, 按下[File]→[Export]→輸入檔名

安裝方式很簡單, 和這篇如何更換Blogger主題一樣, 只是請記得先備份現有主題再進行更換, 以免不測.

雖然因為這個是試用版, 所以自制的主題模版是無法儲存後下回再進行更改, 但仍可以Export用在Blogger上的, 只是圖片上會有浮水印.

備註(可省略不看)

有了這個TemplateToaster, 設計一個具有獨特性的Blogger主題模版似乎不再是問題了. 這裡簡單的介紹一下Blogger主題模版的必備3要件:

一個Blogger的主題模版是由XHTML和blogger的一些其他要素組成的. 一個基本的主題模版, 你會需要用到namespace - xmlns. xmlnx是Google為Blogger 事先預設好的基本語法, 包含了下面3種類型:

xmlns:b – ‘b’ specifies that this namespace is used to access the blogger elements.

xmlns:data – It is used to specify that from where the data of the blog comes.

xmlns:expr – Calculates the expression for attributes.

You will write all the code in main.xml file of Blogger.

Step 1: Syntax for Basic Layout - 主題模版的基本語法:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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'>
<head>
<title><data:blog.pageTitle/></title>
</head>
<body>
<!-- BODY CONTENTS -->
</body>
</html>

Sections/區塊

Blogger的主題模版是分成區塊的, 基本的區塊有: 標題/Header, 內容/Content, 註腳/Footer 和側邊欄/Sidebar. 每一個區塊, 使用小部件/Widget 元素來定義. 請注意, 你不能使用HTML在區塊內, 但是在區塊外則可以使用HTML.

正確的格式會看起來像下方: The correct format of section will be

<b:section id=’ ‘ class=' ' maxwidgets=' ' showaddelement=' '>
<b:widget……../>
</b:section>
下面的寫法則會是錯的, 因為在區塊裡用了HTML的語法.
<b:section id=' ' class=' ' maxwidgets=' ' showaddelement=' '>
<h1>Content heading</h>
<div>Content</div>
</b:section>

區塊的屬性:

Section Attributes

你需要為區塊內的元件定義它的屬性. ID 是唯一一個必要的屬性, 其他的則為非必要性.

ID - 這是一個區塊的名字, 必需是獨特的, 而且只能由字母和數字組成.

class - 是由一些基本的分類所組成, 例如: ‘navbar,’ ‘main,’ ”header,’ ‘footer, 和 ‘sidebar,’. 如果你以後想要改變/更換主題模版, 你可以決定是否也要一併轉移這些分類. 你可以使用其他各式各樣的名字

maxwidgets – It limits the maximum number of widgets that can be added in a section.

showaddelement – Consists of ‘yes’ or ‘no’ value. ‘Yes’ is the default. This establishes whether the Page Elements tab displays the ‘Add a Page Element’ link or not.

growth – It can be ‘horizontal’ or ‘vertical’. ‘vertical’ is the default. This determines whether widgets are arranged side-by-side or stacked within a section.

Step 2: Syntax to Add Sections - 加一個區塊的語法

<b:section id='header' class='header' maxwidgets="1" showaddelement="no">
<!-- Section contents -->
</b:section>
<b:section id="sidebar" class="sidebar" maxwidgets="" showaddelement="yes">
</b:section>
<b:section id='main' class='main' maxwidgets="1" showaddelement="no">
<!-- Section contents -->
</b:section>
<b:section id='footer' class='footer' showaddelement="no">
<!-- Section contents -->
</b:section>

Widgets /小部件

Widget是個小部件, 用來呈現區塊內真實的資料. 它具有一個"卡位"的功能. 區塊只是用來定義主題模版的元件, 而widget則是呈現真實的內容. Blogger本身便有一些預設的widgets你可以使用, 但你也可以編寫自己要的客製widget.

Widget 屬性

一個Widget可以有諸多不同的屬性, 只有ID和type是必要的, 其它的屬性則都是非必要性.

id - ID只能由英文字母和數字組成, 並且每個Widget的ID必需是獨一性的, 不能重覆. 再來Widget id不能更改, 如果要換, 只能刪除後再新增.

type - 這是用來說明每個小部份的種類, widget的種類可以有下列幾種:

BlogArchive

Blog

Feed

Header

HTML

SingleImage

LinkList

List

Logo

BlogProfile

Navbar

VideoBar

NewsBar

locked - 只能有二種值: ‘yes’ 或是 ‘no’. 預設值是 ‘no’. You cannot move or delete a locked widget from the Page Elements tab.

title - 用來說明Widget的標題. 如果沒有特別註明, 那麼預設值會是 ‘List1’, 然後以此類推.

pageType - 有4個不同的值可以選用: 分別為 ‘all,’ ‘archive,’ ‘main,’ 或是‘item’. 預設值為‘All’. A widget will display only on the designated pages.

mobile - 有三個值: ‘yes’, ‘no,’ 或是 ‘default’. 用來告訴一個Widget是否會在手機上顯示. 如果選用'default' 值, 那麼只有 Header, Blog, Profile, PageList, AdSense, Attribution 這些小部件會顯示在手機上.

Step 3: Widget Syntax - Widget語法

Widgets 小部件是包含在區塊內. 加一個Widget在區塊裡的語法會看起來像下面的樣子:

<b:section id="sidebar" class="sidebar" maxwidgets="" showaddelement="yes">
<b:widget id='CustomSearch1' title='Search' type='CustomSearch' locked='false'/>
<b:widget id='FollowByEmail1' title='Follow By Email' type='FollowByEmail' locked='false' />
<b:widget id='PopularPosts1' locked='false' title='Popular On Relatemein' type='PopularPosts'/>
<b:widget id='Label1' type='Label' locked='false' />
</b:section>

參加資料: TemplateToaster Tutorial

1 則留言:

匿名2022年12月6日上午8:21
Each of our 80+ free on-line roulette video games could be performed immediately out of your browser with out the need to|the necessity to} register or obtain any software. Our really helpful roulette on-line casinos dish out one of the best bonuses available on the market. Our experts suggest taking advantage of|benefiting from|profiting from} them to make your money 클레오카지노 go further. You’ll typically double your deposit quantity to enable you to play roulette even longer.
回覆刪除
回覆