Blogger網站設計：如何建立首頁、管理導航列及選擇小工具擺放位置

編輯日期：2024/09/29

文章目錄

1.  如何在Blogger中建立專屬網站首頁：詳細步驟指南

2.  每一個Blogger網誌都需要設立一個網站首頁嗎？最佳實務解析

3.  如何在Blogger網頁導航列中顯示超過9個選項：解決方案詳解

4.  Blogger版面設計：側欄與頂端「網頁小工具」功能區別與應用

5.  Blogger中如何選擇首頁的位置：應該放在側欄(底部)還是頂端網頁清單？

 

 

一、如何在Blogger中建立專屬網站首頁：詳細步驟指南

在Blogger中建立網站首頁的步驟如下，這樣，您就成功在Blogger中設置了一個靜態首頁。

(一)進入Blogger儀表板

首先，登入您的Blogger帳戶，並從儀表板選擇您想要設置首頁的網誌。

 

(二)建立靜態頁面

1.  在左側選單中，點擊「頁面」。

2.  點擊右上角的「新增頁面」按鈕，這會開啟頁面編輯器。

3.  給這個新頁面命名，例如「首頁」，並輸入您希望在首頁展示的內容，可以是簡介、圖片或其他信息。

4.  編輯完畢後，點擊右上角的「發布」。

 

(三)設定首頁

1.  在左側選單中，點擊「設定」。

2.  向下滾動至「基本設定」部分，找到「顯示首頁」選項，然後選擇剛剛建立的「首頁」頁面。

3.  儲存設定。

 

(四)自訂首頁的外觀

1.  您可以透過Blogger的「佈局」選項，自訂首頁的版面配置。例如：添加小工具（如搜尋欄、標籤雲等）或調整頁面元素的位置。

2.  如果想更進階地自訂首頁樣式，您可以在「主題」中修改HTML或CSS。

 

(五)預覽與發布

1.  完成所有設定後，您可以點擊「預覽」來查看首頁的外觀。

2.  如果滿意設置，首頁將自動成為訪客進入您的Blogger網站時首先看到的內容。

 

 

二、每一個Blogger網誌都需要設立一個網站首頁嗎？最佳實務解析

在Blogger中，如果您有多個網誌，每一個網誌代表一個獨立的網站，那麼每一個網誌都需要建立一個網站首頁，以下是為什麼需要這樣做的原因。這樣，您就能為每一個Blogger網誌建立一個專屬的網站首頁，並根據網誌內容做出相應調整。

1.  每一個網誌都是獨立的網站：

Blogger將每一個網誌視為一個獨立的網站。因此，對於每一個網誌，您都可以設置一個首頁，這樣訪客在訪問每一個網誌時都會看到您設置的首頁內容。

2.  個性化設置：

每一個網誌的主題、內容和設計可能不同，因此您可以根據每一個網誌的主題設置不同的首頁，為讀者提供符合網誌風格的第一印象。

3.  SEO與導航優化：

設置首頁有助於每一個網誌的SEO（搜尋引擎優化），並提供一個清晰的導航結構，讓訪客能夠快速找到網誌的重點內容。

 

如果您有多個網誌，以下是每一個網誌的首頁設置流程：

1.  進入Blogger儀表板，選擇您想設置首頁的網誌。

2.  按照之前的步驟，為該網誌建立靜態首頁。

3.  重複此過程，為其他網誌設置不同的首頁。

 

 

三、如何在Blogger網頁導航列中顯示超過9個選項：解決方案詳解

在Blogger中，如果您的網頁清單超過9個選項，預設會隱藏超過的部分。要解決這個問題，您可以通過自訂Blogger的HTML和CSS來調整導航欄的樣式，使超過的選項顯示在第2列。這是可以嘗試的步驟：

1.  進入Blogger的佈局設置：

登入Blogger，前往您想編輯的博客。點擊左側的「佈局」。

2.  編輯您的導航欄（頁面小工具）：

找到「頁面」小工具，點擊「編輯」。

3.  切換至「主題」並進入HTML編輯：

點擊左側的「主題」，然後選擇右上角的「編輯HTML」。

4.  調整導航欄的CSS：

在HTML代碼中，找到與導航欄相關的部分。這可能是用`ul`、`li`標籤定義的列表結構。

 

在該部分加入以下CSS代碼，讓超過的選項換行顯示：

```css

.PageList { /* 頁面清單的容器 */

 display: flex;

 flexwrap: wrap; /* 讓多出的選項換行 */

 justifycontent: spacearound;

}

 

.PageList li {

 flex: 1 0 20%; /* 每一個選項寬度，根據需要調整百分比 */

 liststyletype: none;

 textalign: center;

}

 

.PageList a {

 padding: 10px;

 display: block;

 color: #000;

 textdecoration: none;

}

```

這段 CSS 將使您的導航欄項目在超過一行時，自動換行顯示。

 

5.  儲存更改：

完成後，儲存修改，然後預覽博客查看效果。

6.  注意事項：

這樣，當您的Blogger頁面選項超過9個時，超出的部分會顯示在第二行或更多行。如果需要進一步調整樣式，可以根據喜好調整`flexwrap`、寬度和對齊方式等屬性。

若您不熟悉編輯HTML和CSS，請先備份您的主題，以防止誤操作。

 

 

四、Blogger版面設計：側欄與頂端「網頁小工具」功能區別與應用

在Blogger中的版面配置，側欄(底部)的網頁小工具，可以設定網頁清單網頁清單(頂端)的網頁小工具，可以設定網頁清單請問這二者有何差別？在Blogger中，側欄（或底部）和頂端的「網頁小工具」雖然都可以用來設置網頁清單，但它們的作用位置和功能表現有所不同：

(一)側欄（或底部）的網頁小工具

1.   位置：

位於網誌的側邊欄或頁面底部。

2.   用途：

通常用於顯示附加的網站內容或導航清單，讀者可以在瀏覽主內容時看到側邊或底部的網頁清單。

3.   效果：

適合展示次要或輔助性內容，如推薦文章、分類目錄或連結到其他網頁或資源。此類清單會隨著讀者的滾動而保持可見（特別是側欄的情況）。

 

(二)頂端的網頁小工具

1.   位置：

位於網誌的最上方（頂部導航欄）。

2.   用途：

常用於設置主要的網站導航，如網站主頁、關於我們、聯絡我們等重要頁面的清單，幫助訪客快速進入網站的不同區域。

3.   效果：

提供網站的全局導航，當讀者進入網站時，這類清單會固定顯示在頂部，方便使用者快速存取網站的關鍵頁面。

 

(三)綜合總結

1.   側欄或底部的網頁清單：

適合展示輔助導航或次要內容，位置隨頁面設置而變動。

2.   頂端的網頁清單：

提供全局導航，適合放置網站的核心頁面，固定於頁面的頂部。

3.   兩者的區別在於展示的位置與功能的重點，側欄/底部更適合補充內容，頂端則用於主要導航。

 

五、Blogger中如何選擇首頁的位置：應該放在側欄(底部)還是頂端網頁清單？

在Blogger中的版面配置，側欄(底部)的網頁小工具，可以設定網頁清單，網頁清單(頂端)的網頁小工具，可以設定網頁清單，請問首頁不具導航性，但是重要性很大，要放在那裏比較適合？如果首頁在你的Blogger網站中重要性很高，但不具導航性，適合放在側欄或底部的網頁清單中。這樣可以在不干擾主要導航的情況下，讓讀者仍能方便找到首頁。具體原因如下：

(一)側欄或底部的網頁清單：

1.   適合放置重要但不具導航性內容：

側欄或底部的位置適合放置那些不需要常駐在網站頂端、但仍然需要被突出顯示的頁面，如首頁、聯絡我們或隱私政策等。

2.   不會影響主導航的清晰度：

如果首頁沒有太多導航性，將它放在頂部可能會干擾其他主要頁面的可訪問性。放在側欄或底部則能保持頂部導航欄的整潔和效率。

3.   持續可見：

當用戶滾動網頁時，特別是側欄內容仍然可以保持可見性，增加首頁的曝光率。

 

(二)總結建議：

如果首頁雖然重要但不常用作導航頁，建議將首頁的連結放在側欄或底部的網頁清單，讓它依然可見，但不會占用主要導航欄的空間。