2012年12月31日

[教學]Blogger 頁面判斷式(PageType)的各種應用

Blogger 跟其他部落格比較起來,比較不友善的地方就是一些工具說明得自己想辦法啃官方說明文件;而本文的主題「Blogger 頁面判斷式」,配合不同的頁面型態(PageType)參數,就能在不同頁面時展現不同的版面效果,只是就算啃了「官方說明文件」對其應用也可能是一知半解。在某方面說起來,Blogger 能否瞭解得深入,真的得靠有沒有前輩分享學習心得,大家才能延伸出更好的應用。

本篇文章部分內容一開始分享在「Blogger中文社群」的這個討論串:https://plus.google.com/108990319112241335296/posts/YEv1v5Nwcnt,經由討論後讓內容完整了一些。閱讀本文前需要一點 HTML、CSS、Javascript 的概念,且本文主要講的是各種應用及概念,因此建議先閱讀這一篇「淺談 Blogger 的判斷式以及 PageType 的應用」,來瞭解各種頁面(PageType)的基本定義。另外布丁大也有一篇「Blogger範本之網頁類型(pageType)應用」 內容比較細一些,同樣可以先參考一下。


一、基本使用法

1. 定義:為了方便閱讀,先簡單列出網頁類型(pageType)的定義─

index:首頁、標籤、搜尋頁面
archive:歷史文章列表
item:文章頁面
static_page:靜態頁面(網址含 "/p/" 的頁面)


2. 讓特定內容在 "文章頁面" 才出現:任何內容例如HTML、CSS、Javascript、Blogger語法,都可塞在判斷句之間。就像文章下方通常會有「張貼者」、「分享按鈕」等等資訊,或是很多人會裝「LinkWithin」;如果想讓這些資訊在 "文章頁面" 才出現,其他頁面不出現(主要是首頁),那麼用法如下──

2012年12月24日

部落格聖誕節裝飾實作 (CSS 技巧)


(Pic from: xox520.blogspot.com)
聖誕節到了來應應景,為自己的 Blogger 裝飾一下增添點節慶氣氛。+Mark X 整理了一個「懶人包工具」,不但容易安裝且設計精美、深具巧思,按下星星後不但會變色,還會隨機播放聖誕音樂。因此決定以此小工具為主體,來進行部落格的裝飾。

除此之外,以下的網址也能找到一些小裝飾:

http://www.widgetbox.com/tag/christmas
http://bloggerstop.net/2009/12/decorate-your-blog-with-these-awesome.html

2012年12月22日

如何使用本站


2012年12月19日

部落格即時留言板──WYBOARD(安裝及使用說明)

2016.4.9 公告:因 Google Drive 外連失效,請勿使用本篇的程式碼,請改用新版「部落格即時留言板 WYBOARD + 表情圖案


會寫這個「即時留言板」小工具,大概是逛別人部落格時,想留言卻找不到留言板;若隨便找篇文章留言,與主題無關又顯得唐突。如果在側邊欄醒目處能有個留言板的話,對訪客而言就很方便。

比較知名的即時留言板是 Cbox,而 Cbox 的缺點是無論你的網站是否熱門,都可能被留言機器人洗板,且 Cbox 免費版有留言數的限制。若想體驗這個輕爽方便的中文留言板,以下點大標題可直接跳到對應區塊。

2012年12月17日

Blogger 修改「G+ 追蹤者」小工具的版面及編輯按鈕

Blogger 最近推出顯示 G+ 追蹤者的小工具,有人的反應是與 Google Freind Connect 的性質重疊,而 G+ 專頁也會顯示追蹤者頭像,如果再加上這個小工具,那版面真是好不熱鬧。

目前我暫時在網頁上只擺這個 G+ 追蹤者的小工具,可以裝作看起來很有人氣的樣子(XD);但是才剛裝上後便發現他會超出邊界,弄了一陣才瞭解到可能因為本站並非使用新範本,blogger 已經懶得測試這些老用戶的環境,如果是裝在新範本就不會有這個 bug 了。

而這陣子逛到不只一個部落格把這個小工具放在頁面底部,可能是發現放在側邊欄會超出邊界,所以才將位置挪到底部吧!或許會跟這個小工具不合的部落格,還是有一定的數量,若有以上情形的話,可參考以下我的修改方式──

2012年12月12日

[教學]將 Blogger「標籤」小工具放在導覽列實作


(Pic from: Office Worker)
之前在「+Shu-Yuan Tien ── Office Worker」看到標籤出現在導覽列覺得挺神奇的,研究了一陣後發現可以在後台先把導覽列用滑鼠拖曳到網頁最上方,接著再把「標籤」小工具拖曳到導覽列,那麼網站所有的標籤就會自動出現在導覽列,不必像以前導覽列的使用方式,得一個個手動把標籤連結加上去。

這給了我一個靈感,如果把「標籤」拉到導覽列,而側邊欄其他工具拉到最底下,那麼整個版面可以全部留給文章,閱讀起來實在太舒服了,而且所有重要的導覽功能仍在網頁上方,訪客不會找不到想要的功能,就像我的「三國志分站」這樣的效果。

只不過在實作時遇上了一些要解決的狀況:

1. 分站使用的官方範本為「圖片視窗」,導覽列的頁籤有圓角效果,當導覽列拉到網頁最上方時,頁籤變成飄浮在空中的感覺(囧~)。
2. 標籤拉到導覽列,按下標籤時,該標籤會顯示不正常。

最後花了一番功夫解決,以下第一點為大致說明 Blogger 運作的原理,想直接看安裝及解決過程的實作請跳「二、調整導覽列」。

2012年12月7日

避免 G+ 訊息混亂 歡迎加入「Blogger 中文社群」

Google+ 今天正式推出了「社群」功能,作用相當於一個小型論壇,可以細分不同主題的討論區。而每個人都能參與討論、也能各自發起新的主題,不像 G+ 是由主人唱獨腳戲。

其實本站一開始使用 G+ 時便覺得定位有點尷尬,因為本站為 Blogger 相關的主題,而 G+ 是社交工具,兩者連結後,追蹤本站 G+ 的朋友除了會接收到 Blogger 的相關資訊,也會接收到我個人轉貼的非 Blogger 訊息(例如有趣圖片、影片),G+ 的使用者無法將接收的訊息自動分類。

但今天「社群」功能發佈後,這個問題便獲得解決,例如愛貓人士、想學習英文者可自行尋找相關社群加入討論,若搜尋不到還可以自己創立社群,步驟很簡單──可參考「介紹網頁」。

目前我發現 Blogger 除了 G+ 的「社群」,連其他地方也找不到專屬的中文討論區,因此算是自告奮勇先成立了一個「Blogger 中文社群」,以後本站有新的 Blogger 訊息就不貼 G+ 了,直接貼到社群裏,如此資訊就能被有效過濾。若只想看 Blogger 相關資訊,那麼就可加入「Blogger 中文社群」:https://plus.google.com/u/0/communities/103807083735607134704

2012年12月5日

Javascript 優良部分(筆記)__糟糕與不良的部分

這一篇還滿莞爾的,書名叫做「Javascript 優良部分」,不過可能是因為已經看過「Javascript 設計模式」的關係,略微掃過後覺得大部分內容沒有很特別,唯一引起我興趣的是他的附錄,歸納了「Javascript 糟糕與不良的部分」,剛好與書名完全相反,也是我決定作筆記的內容。記錄這些 javascript 比較有問題的部分,遇上了才知道怎麼避免、學習與他們共處,就像學習與 IE 共處一樣...

2012年12月1日

幫部落格安裝一鍵訂閱新版Google Reader(閱讀器)的按鈕


(Pic from: joshrimer.com)
Google Reader」可說是訂閱、整理網站 RSS 最方便的閱讀器工具了,透過他可以蒐集我們需要的各類資訊,不管是娛樂、學習或是情報。網路上介紹他的文章非常多,如果對這個工具不瞭解,可以參考「介紹網頁」、「使用技巧網頁1」、「使用技巧網頁2」。

也因為 Google Reader 好用,我發現用它訂閱網站 RSS 的讀者數量比較穩定,而使用其他閱讀器或用其他方式訂閱的使用者比較不穩定(見「一、FeedBurner 訂閱數」),因此若部落格能提供一鍵訂閱 Google Reader 的按鈕,相信這個友善介面對累積忠實讀者有幫助。以下先是 FeedBurner 的經驗分享、及安裝方法的原理,若想直接安裝請跳「三、安裝 Google Reader 訂閱按鈕」。