2016年8月2日

讓 Blogger 首頁能點擊圖片就進入文章頁面

A+
blogger-click-cover-image-into-post-url-讓 Blogger 首頁能點擊圖片就進入文章頁面最近接到一個需求:「能不能點擊首頁文章的大圖,就直接跳到文章網址?否則要點 "繼續閱讀" 才能進入」。仔細想想的確很有道理,這才是友善的操作介面設計,以前怎麼都沒想過!

於是現在 WFU BLOG 首頁文章封面圖,改為以最大尺寸呈現,並且加上文章頁面的連結。以下就來看看要怎麼做到這樣的效果。


<< 請注意!本篇文章含會員加值文章內容,需點數兌換 >>


(圖片出處: pexels.com)


一、增加點擊率


跟 "繼續閱讀" 相比,封面圖的面積不但大多了,附上文章的超連結後,訪客的滑鼠也不必移動太遠就能按到,可說是非常友善且直覺的設計。


fb-share-thumbnail-讓 Blogger 首頁能點擊圖片就進入文章頁面

而且,大大的封面圖對於吸引點擊,有十足的加分效果。就像 Facebook 分享文章時,如果能產生大縮圖,那麼吸引點擊的效果,根據實測統計,將遠勝只顯示文章標題(沒有縮圖)的效果。

控制 FB 分享文章產生縮圖的技巧,可參考:

許多 Blogger 非官方範本也是利用這樣的原理,在首頁以卡片式的版面呈現,每篇文章只顯示大縮圖及文章標題,且點擊圖片就能直接進入文章頁面,類似 Blogger 動態檢視範本的某些版面。


yuppybook-讓 Blogger 首頁能點擊圖片就進入文章頁面

上圖為「雅痞書店」的效果,採取類似的設計方式,而且點擊標題、縮圖、繼續閱讀這三處都能跳到文章頁面,可減少讀者操作上的時間。



二、修改範本的方法


有兩種方式可以達成本篇的任務,第一種比較麻煩,範本內容要大改,如果對程式碼、或 Blogger 範本、或 HTML/CSS 不熟悉的話,很有可能發生災難,請小心操作以下的內容。

在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。

1.使用判斷式

製作的原理是使用 Blogger 判斷式語法,請先瞭解「Blogger 頁面判斷式的各種應用」,接著運用「Blogger 頁面判斷語法__五個實用範例說明」→「三、在首頁顯示自訂尺寸縮圖及文章摘要」,就可完成約 80% 的工作了。

摘要一下我們要做的事:

  • 將原本顯示文章內容的區塊,利用判斷式,在首頁時重新安排版面。
  • 例如將版面設定為,依序顯示文章標題、文章中的第一張圖、摘要。
  • 最後利用 CSS 美化版面。


2.實際範例

請先依照「Blogger 頁面判斷語法__五個實用範例說明」→「三、在首頁顯示自訂尺寸縮圖及文章摘要」,做完第 2 點之前的動作。

接著將第 2 點的程式碼,改為以下內容:

<b:if cond='data:blog.url == data:blog.homepageUrl'> <!--首頁時使用縮圖及文摘-->
<b:if cond='data:post.firstImageUrl'> <!--檢查文章是否使用圖片-->
<div class='home-thumbnail'> <!--可用 home-thumbnail 這個 class 設定封面圖 CSS 樣式-->
<a expr:href='data:post.canonicalUrl' target='_blank'><img expr:src='data:post.firstImageUrl' /></a> <!--使用文章第一張圖當作封面圖 點擊後連往文章網址-->
</div>
</b:if>
<div class='home-snippet'> <!--可用 home-snippet 這個 class 設定文摘 CSS 樣式-->
<data:post.snippet/> <!--文摘-->
</div>
<b:else/> <!--非首頁時,使用 Blogger預設版面-->
<data:post.body/> <!--文章內容-->
</b:if>
<!--<data:post.body/>--> <!--此行為註解、保留原本的程式碼-->

基本上所有的說明及修改方法,都標示在綠字的註釋,就不另外解釋了。

如果熟悉 Blogger 判斷式、HTML、CSS,可以根據自己的需求,來修改首頁的版面配置。



三、簡易的 JS 程式碼


1. 提醒

第二種修改方法比較簡單,算是懶人包,加入一段 JS 碼即可自動幫封面圖加上連結。

不過採用這個方法之前需要先提醒一下:

  • 若採第一種方法,版面比較整齊畫一
  • 若採第二種方法,繼續閱讀之前沒有放圖片的話,首頁就不會出現圖片
  • 會採第二種方法的站長,通常每篇文章的編排有固定格式,例如文章開頭就是封面圖,接著才是文字


2. 準備動作

確定採第二種方法的話,一樣請先備份範本。

接著到後台「範本」→「編輯 HTML」,游標點進範本區塊,按 Ctrl-F 搜尋 </head> 這個字串,找到後在此字串的前一行,插入以下程式碼:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

可參考「引用 jQuery 的注意事項」,檢查範本是否已安裝過 jQuery,如果已經安裝過請刪除此行,以免重複安裝。


3. 安裝程式碼

然後在範本中,繼續搜尋 </body> 這個字串,找到後在此字串的前一行,插入以下程式碼:


存檔後即可看到效果。

想先看效果的話,也可前往 WFU BLOG 的首頁、或標籤頁面,按下封面圖即可前往文章頁面。



四、聯絡表單


如果是兌換加值文章內容的讀者,使用上有任何問題請用下面的表單與我聯繫:




更多 Blogger 使用技巧:

沒有留言:

↑TOP

張貼留言注意事項:

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