【教學】如何製作 Blogger 首頁公告欄？

最近幫忙設計、託管了朋友的部落格。這個部落格有公告欄的需求。

原本我是使用「未來文章」的方式讓一篇文章長期頂置在首頁，可是由於在我的部落格中聯播他的部落格 Feed 資訊的關係，我們發現這會讓這篇公告文一直出現在列表當中，於是開始尋求解決辦法。

改採稍嫌複雜，但依舊非常簡單的「讓裝置（widget）出現在首頁」方式。




主要概念就是：
創建一個放置公告專用的 Text 或 Html 裝置，並只讓它出現在首頁。



╳　創建一個裝置（widget）



使用 Text 或 Html 都可以。在這個例子中我們使用的是 Text 。
選擇 Text 是因為相對於 Html 可以即時預覽文字狀況，也可以使用簡易 Html 。

公告位置請隨個人喜好。我們是放在主文章區塊上方。



╳　尋找裝置的名稱／id



每個裝置都有屬於自己的名稱／id。請找出您剛剛創建的裝置 id 。

搜尋可以 ctrl+F 尋找「type='Text'」或「type='HTML'」進行。

有複數同類型裝置的話怎麼辦呢？
裝置的 id 取名大致遵循著「類型→第幾個此類型」的規律。
因此我們剛剛創建的 Text 是那個部落格的第二個 Text 裝置，故其名稱為「Text2」。



╳　修改程式碼

找到的程式碼應會近似上圖。
若遇見上圖左邊的箭頭，請將它打開。此時會進一步看見

  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:includable>

紅色部份是要插入「只顯示在首頁」程式碼的位置。

請在<b:if cond='data:title != &quot;&quot;'>前面，
插入<b:if cond='data:blog.url == data:blog.homepageUrl'>

最後在</b:includable>前面，
插入</b:if>

這段的意思就是「假如當前部落格網址 = 首頁網址的話，就顯示裝置」。



╳　美化公佈欄（非必要）



沒有美化過的公布欄其實長這樣。就是很一般的 Text 或 Html 。
我們為了讓公告欄與部落格其他文章統一，稍微動了一點手腳。

基本概念就是「在 CSS 描述單一裝置（widget）要套用的風格」。

在上面我們已經找過裝置的 id 了，請在<skin></skin>中間隨便找個位置寫 CSS 。
我的話是選在「/* Posts」這個範圍裡面。因為我覺得這算是主文區的一部份。

接著請寫入

#Text2 .widget-content {
}

紅色部分請改為你的裝置 id 。

「#Text2」　意指整個名為「Text2」的區塊。
「.widget-content」　進一步意指這個區塊中的真正裝置內容。
「{}」　中間是我們要放置樣式的地方。

樣式可以微調的元素很多。我們基本上就是複製主文區的樣式做修改。
也就是將「.post-outer {」和「.post-body {」裡面的內容合在一起。

這樣自然就會長得像主文區啦。所使用的元素基本大致如下。

#Text2 .widget-content {
  background-color: $(post.background.color);
  border: solid 1px $(post.border.color);

  -moz-border-radius: $(post.border.radius);
  -webkit-border-radius: $(post.border.radius);
  border-radius: $(post.border.radius);
  -goog-ms-border-radius: $(post.border.radius);

  padding: 50px 50px 50px 50px;

  line-height: 2em;
  letter-spacing: 1px;
  font-size: 20px;
  text-align: justify;
  text-justify: inter-ideographic;
  position: relative;
}

「background-color」　指定背景顏色。
「border」　指定區塊邊界，畫出邊界線。
「border-radius」　將區塊邊邊角角弄圓一點。

「 padding」　指定區塊內容和邊界中間，要墊多少空間。四個數據分別是：上右下左。

「line-height」　指定行高。
「letter-spacing」　指定文字間距。
「font-size」　指定文字大小。

  text-align: justify;
  text-justify: inter-ideographic;
  position: relative;
這三行意指「文字邊界對齊，根據相對條件，彈性改變文字間距」



進階參考文章：
【Blogger】小工具只在文章中出現，首頁不出現
[教學]Blogger 頁面判斷式(PageType)的各種應用
如何美化模板元件的外觀配置