Blogger的美化─以圖示更換連結文字

部落格裏的文章，常在末段出現像是「首頁」、 「較新文章」等的連結文字，能不能換成較有趣的圖示呢？的確有的，以下是參考 Blog Godown 提供的解決方法。

1. 在後台，編輯一篇新文章，以貼圖功能將你所需要的圖示貼進文章裏。
   





2. 複製文章HTML中的圖示網址（如上圖），並貼到「記筆本」中備用。
3. 進入到「範本」。
4. 先備份未修改前的模版。
5. 進入「修改HTML」。
6. 勾選「展開小裝置範本」
7. 先改「較舊文章」
8. 以 Ctrl+F 尋找 <data:olderPageTitle/> ，這段程式碼在如下圖的位置
   
   <b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><
data:olderPageTitle/></a>
</span>
</b:if>

   將上圖中紅色程式碼，以複製在「記事本」中對應的圖示網址更換。類似下圖。
   
   <b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjrOYv2Qw9UDbUaAdPNTiut7r50k4d4It3wHfX2xZO5pdUi0azyPof2yo281LSEyjRxIo47QtmKUnlLafaqJzzzvWCZLJQSXyak8NrJIUaAMZFLAoa2PH758HpLf0OlalhPuZL5_ICz1kR/s1600/Home2.png" /></a>
</span>
</b:if>

   
9.  接著改「較新文章」，先找到 <data:newerPageTitle/> 的所在，如下圖。

<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

以「記事本」中對應圖示的網址取代上圖紅色字的程式碼。


10. 最後是「首頁」，找到 <data:homeMsg/> 的位置，一共有兩個地方，兩個地方都需更換。
    
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

    和前面的作法一樣，將圖示的網址把紅色字的程式碼完全取代。記得一共要換兩個。
    
    
11. 按下「儲存範本」結束設定，並點選「檢視網誌」看看所作的更改有沒有生效，如果一切如你所願，那就恭喜了。

「Blogger的美化」系列筆記

• 簡單修改
• 網頁的CSS架構
• 模版的介紹與修改
• 小工具的調整  
• 文章加入「讚」及推文功能
• 加入「相關文章」
• 增加臉書留言版 
• 以圖示更換連結文字
• 加入程式窗