2013年9月16日

[教學]讓 Blogger 能在文章下方顯示作者簡介

A+

(Pic from: iconfinder.com)
對於從搜尋引擎而來的訪客,首次拜訪對於作者總是不太瞭解,在不熟悉的情況下看完文章很容易直接離開。如果自認經歷能夠引起陌生訪客的注目,那麼文末放個作者簡介會是個留住讀者的好主意。

感謝 +Almighty Demiurge 於這個「Blogger社群討論串」 提到 "今天發現在版面配置的網誌文章編輯區塊裡有增加「在文章下方顯示作者簡介」的選項",不過對很多人來說,這可能是個「看得到吃不到」的功能。

如果也有同樣問題的話,以下先說明原理及簡易修復方法,若想直接瞭解安裝方法及進階修改,請跳至「三、安裝步驟」。



一、無法顯示的原因

從「原討論串」發現,大部分參與討論的成員都無法成功顯示此功能,可見都是喜歡修改範本的同好!其實不止這個功能,也有一些使用者反應,「網誌文章」裡的許多選項,例如 "星號評等"、"分享按鈕"、"標籤" 等等,為何不能出現在自己排列的位置、或是根本無法顯示?

如果範本是很乾淨、沒有變動過的情況下,Blogger 可以輕易地依據資料庫中的程式碼字串順序,來找到並搬移例如 "星號評等"、"分享按鈕" 等等的位置。

但因為 Blogger 的自由度,使我們很方便地自行修改範本中的程式碼。那麼當範本的程式碼位置有變更、甚或增減內容後,整個字串順序已經不一樣,Blogger 就不一定能判斷出 "星號評等"、"分享按鈕" 等等的位置,因此別說要搬移,有時連顯示都很困難。



二、簡易修復方法

這招是萬用修復方法,在過去文章多次提及,不過只適合範本修改程度不大、或修改範本曾經手誤(不小心刪了某些程式碼)的情形。若是範本有大量修改,絕對不能用這個方法,否則所有安裝的 hack、外掛會全部毀於一旦!

修改範本前請記得備份範本,接著到「後台」→「範本」→「編輯 HTML」→「將迷你組件恢復為預設值」→ 選擇「Blog1」→「還原所選小工具」。

這樣就 ok 了,範本已經回復到最乾淨的狀態,可以到「版面配置」→「網誌文章」→「編輯」,來勾選要出現的項目及調整位置。

此時也可勾選 "在文章下方顯示作者簡介",不過缺點是官方預設「位置固定於最下方」且不能搬移。如果不喜歡這個位置的話,請參考「三、安裝步驟」。



三、安裝步驟

以下為測試可行的步驟,若未按照這個程序不確定效果如何──

1. 轉換為 G+ 帳號

如果 Blogger 帳號未轉換為 G+ 帳號的話,可到「後台」→「Google+」來轉移帳號。

程式碼中有一段會讀取 G+ 的個人簡介敘述,若是原 Blogger 帳號沒轉換的話,不確定讀取出來的畫面會是什麼樣子。因為我的帳號已經轉移到 G+ 帳號,無法再測試 Blogger 帳號的情形,因此不想轉換帳號的話,得請自行測試了。


2. 勾選 "顯示作者簡介" 功能



如上圖,請到「版面配置」→「網誌文章」→「編輯」→ 勾選「在文章下方顯示作者簡介」→「儲存」。

且從上圖可看到,「作者簡介」的區塊背景色為白色,代表不能移動,其他灰色區塊代表可移動


3. 安裝程式碼

以下為要安裝的程式碼內容,如想放在自訂位置請參考「四、樣式修改及擺放位置」,以下假設放在文章結尾處。

請到後台 →「範本」→「編輯 HTML」,搜尋類似以下字串(這是繼續閱讀的位置):

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>


在以上程式碼的下一行,插入以下程式碼:

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.authorAboutMe'>
<div style='width: 400px; margin-top: 30px; padding: 10px; border: 1px dotted lavender; background-color: #eeeeee; border-radius: 10px;' class='author-profile' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<b:if cond='data:post.authorPhoto.url'>
<img expr:src='data:post.authorPhoto.url' itemprop='image' width='50px'/>
</b:if>
<div>
<a class='g-profile' expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</div>
<span itemprop='description'><data:post.authorAboutMe/></span>
</div>
</b:if>
</b:if>


以上可修改的部分為有顏色的字串──

藍字部分:第一行與最後一行的藍色字串,代表「文章頁面時才顯示作者簡介,其他頁面不顯示」。應該不會想要首頁也顯示吧?真的想的話請把藍色字串全部刪除。


綠字部分:請先參考以下的效果圖,



  • 覺得這個作者簡介效果還 ok 的話,那就不必修改。
  • 如果不需要任何樣式、用官方原本的效果即可,請刪除所有綠色字串。
  • 如果想自訂整個作者簡介區塊的樣式,那麼請參考「四、樣式修改及擺放位置」。



四、樣式修改及擺放位置

1. 樣式修改

程式碼綠字的部分,及代表的樣式如下,請依需求自行修改參數、或增添樣式:

width: 400px; /* 區塊寬度 */
margin-top: 30px; /* 與上方區塊的距離 */
padding: 10px; /* 內襯寬度 */
border: 1px dotted lavender; /* 邊框形式 */
background-color: #eeeeee; /* 背景色 */
border-radius: 10px; /* 圓角程度 */


2. 擺放位置

請參考「Blogger 範本__(三)文章及留言區塊的程式碼」,對於文章區塊的各個位置有詳解,可將本文程式碼放到範本中的自訂位置即可。



五、小結

許多大站都會在文末安插作者資訊,這是顯示作者經歷及權威性的好方法,因此 Blogger 這項功能是值得肯定的。只不過從 G+ 簡介抓過來的資料,若版面的效果不是太滿意,那麼得像 WFU 一樣,花點時間自行調整了!


更多 Blogger 小技巧:

2 則留言:

  1. 自我介紹會完全顯示在作者簡介,自我介紹內容太多反而占空位。 XD

    回覆刪除
  2. <9157466802121340923>(以上內容請勿刪除,從括號之後開始留言)怎麼調整版面比較好看,的確需要花一點心思~~ :)

    回覆刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。