2016-07-29

【教學】如何製作 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)的各種應用
如何美化模板元件的外觀配置




沒有留言:

張貼留言

【安心提醒】
 如留言卻未顯示,請安心靜候。有時會被收納為垃圾留言。
 亦可透過連絡表單留言/申訴。