搜尋網站:

網頁教學:Blogger/Blogspot 版面設計與技術收錄 01

這是 Blogger 網誌開發教學綜合收錄第 1 篇。我們網站舊版實際上是建構在 Google 的 Blogger 網誌。雖然 Blogger 具備有方便與安全的優點,但是自由度也會稍微受到約束。

不過 Google 讓我們在版面規劃的部份,具有相當高度的自由,因此我們可以依照自己的想法,讓部落格更俱個人風格。

下面我將針對網路上,談到 Blogger 版面設計與應用的許多零碎資料,重新進行整理、驗證與分類,希望對大家有用。:)

修改前請注意,一旦修改 HTML 內容,原本”版面配置”中的”網誌文章”的”編輯內容”,將會停止使用者再更新。如果有需要使用特別設定,像是地址顯示等,請在修改範本前先行設定完成(但是新模板不一定支援)。建議大家在做任何修改前,務必先行備份範本,或是弄個測試網站先做測試呦。

在 Blogger 上放置推文按鈕

想讓自己的部落格或網站,可以加入目前極為熱門的社群網路,最簡單的方式就是在自己部落格中放置推文按鈕,例如:臉書的讚或是 Google 的「+」。

其中,「AddThis」模組式的推文按鈕群,是網路部落格較為廣為人之且多人使用的系統,而且除了多種基本設計可以快速選用外,也有更為進階的個人化設計可以選擇。

當然,如果你也跟我一樣使用「Blogger」,那在「版面規劃」中的「新增小工具」功能,就可以直接搜尋並加入「AddThis」的小工具,而且透過此方法,你不用特別去「」的網站上複製程式碼就可使用。

決定推文按鈕的擺設位置

依照前面增加了推文按鈕後,你可能會覺得按鈕的擺放位置,並不是自己想要的。

所以我在這邊提供幾種網路流傳的擺放位置(修改 HTML 功能,並展開小工具。),如果大家都會這樣用,就代表有他的意義存在囉。

當然,一切都還是以你自己的個人感受為主,畢竟在你的落格格中,YOU ARE THE BOSS。

文章標題的右側

<h3 class='post-title entry-title'>(尋找本段程式碼,並將下列程式碼複製其後。)
<div style='float:right; margin-left:10px;'><!--Vedfolnir.com -->
文字或程式碼
</div>

文章本文的右側

<div style='float:right; margin-left:10px;'><!--Vedfolnir.com -->
文字或程式碼 </div>
<data:post.body/>(尋找本段程式碼,並將上列程式碼複製其上。)

文章底排工具列的右側

post-footer-line post-footer-line-1(尋找本段程式碼,並將下列程式碼複製其後。)
<div style='float:right; margin-left:10px;'><!--Vedfolnir.com -->
文字或程式碼 </div>

Blogger 網頁標題最佳化

一般  Blogger 文章在瀏覽器上方顯示的標題,其格式通常為「網站名稱+文章標題」。但是部落格本身,應該是文章內容與品質,優先於部落格名稱,因此我們可以透過更改標題格式的順序,讓大家搜尋文章時,可以一眼就瞭解這篇文章是不是他們所需的內容。

修改方式是依照編輯「Blogger」的 HTML 方式進行修改,首先,我們先在 HTML 中搜尋下列程式碼:

<title><data:blog.pageTitle/></title>

並用下列程式碼進行替換即可:

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.Title/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>

移除文章最下方的訂閱功能

有習慣使用  RSS  的使用者,相信對於 Blogger 官方提供,位在文章最下方的訂閱選項「訂閱:文章 (Atom)」感覺相當雞肋,所以如果你想將該功能取消或隱藏起來,可以在 HTML 中,找到底下這段程式碼,並隨個人習慣進行隱藏(如:<!–  程式碼  –>)或刪除:

<b:include name='feedLinks'/>

在每篇文章(非首頁頁面)末自動顯示文字或功能

我們可以到範本設定中,選擇版面配置以及修改 HTML,勾選「展開小裝置範本」。接著,找出下面兩段程式碼的位置,並在之間安置我們想要顯示的文字或程式碼:

<b:if cond='data:post.allowComments'>
<h4>

Blogger 的「繼續閱讀」功能

更改「繼續閱讀」的位置,我們可以修改 HTML,在 </head> 前插入下列代碼:

<style type="text/css">
 .jump-link{text-align: right;}
 </style>

在 Blogger 文章中,將程式碼區塊「框」起來

打算在 Blogger 中用特殊框架,顯示程式碼內容,我們可以在「Blogger 範本設計工具」的進階選項中,選取「新增 CSS」指令,並將下面程式碼複製並貼上到右側「CSS 設計空間」的欄位中。

Code {
 display: block; <!--fixes a strange ie margin bug-->
 font-family: Courier New;
 font-size: 8pt;
 overflow:auto;
 background: #fefefe url(https://www.vedfolnir.com/resource/image/code-bar.png) left top repeat-y;
 border: 1px solid #ccc;
 padding: 10px 10px 10px 20px;
 max-height: 200px;
 line-height: 1.2em;<!--Vedfolnir.com -->
 }

在完成前面複製貼上的動作後,當我們往後需要撰寫內嵌程式碼的文章時,可透過文章編輯器中的「HTML 編輯模式」,將想要「框」起來的文字或程式碼,以「<Code>」與「</Code>」指令包裝起來,並放置在適當位置,其格式如下所示:

<code> Example Code </code>

如此,當使用瀏覽器觀看文章時,文章頁面上即會自動生成如下所示之程式碼及狀態:

Example Code

繼續閱讀

  1. Blogger / Blogspot 版面設計與技術收錄(二)
  2. Blogger / Blogspot 版面設計與技術收錄(三)
  3. Blogger / Blogspot 版面設計與技術收錄(四)

文章資訊

作者/

發布日期/

留言

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *