Blogger編修全記錄

http://ivan1119.blogspot.com/2009/09/blogger.html

將在這裡慢慢整理、記錄blogger樣版的修改過程，以利將來變更時使用。

●在文章右側放入Funp推推王圖示

在＜/head＞前先加入以下語法

<script src='http://blogger-ext2.googlecode.com/svn/trunk/3rd/funp_button2.js' ></script>

再在＜data:post.body/＞前加入以下語法

<div style='float:right; margin-left:10px; font-size:0px;' class="funp_button"><data:post.url/></div>

※參考：如何在blogspot讓每篇文章的開頭右方加入funp推推王的圖示

●繼續閱讀懶人版

※參考：繼續閱讀懶人加強版 - [版本2.x]安裝教學
          繼續閱讀懶人加強版 - [版本2.x]參數設定說明

●最新回應懶人版

※參考：最新回應 2.0 來囉！
          Blogger 加強型最新回應 2.0 (安裝頁面)

●相關文章功能 (你可能感興趣的文章)

※參考：加入相關文章功能 (Related Post)

●You might also like: (文末的隨機文章)

※使用網路服務：LinkWithin

※記錄
如使用LinkWithin提供的原始語法，不管是貼在側欄或HTML模版裡，除了點進文章後的文末會出現，也會出現在首頁的文章後面(繼續閱讀後面)，這樣很不美觀，如果只要出現在點進文章後的文末，而不出現在首頁，只要把語法改成如下，再放在</head>或</body>之前，就可以達成這個目的。

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script>
var linkwithin_site_id = 這邊自己改;
(function () {
var elem = document.createElement(&#39;script&#39;);
elem.type = &#39;text/javascript&#39;;
elem.src = &#39;http://www.linkwithin.com/widget.js?rand=&#39; + Math.random();
document.getElementsByTagName(&#39;head&#39;)[0].appendChild(elem);
})();
</script>
</b:if>

「這邊自己改」是LinkWithin原始語法裡所提供的編號。

※參考：有縮圖的關連(隨機)文章 / Related Post with Thumbnail

●Top Posts

※使用網路服務：PostRank

※記錄
在<div class='post-footer-line post-footer-line-3'/>後面插入PostRank提供的語法：(會在首頁的第一篇文章出現，暫時取消改用LinkWithin，請問有人知道要放在哪裡嗎？我想放在相關文章前面或後面)

<script type="text/javascript" src="http://api.postrank.com/static/widget-v2.js"></script>
<script type="text/javascript">
var options = {
   "feed_hash": "7e6fa1befd18445c3cee5e0443f590ce",
   "num":        10 ,
   "theme":     "diy"
};
new PostRankWidget(options);
</script>

●舊的隨筆 (從第二頁開始抓取)

※參考：最新文章的加強版：其他的最新文章 (Other Recent Posts)

●文章日曆 (隨筆月曆)

※參考：結合發表文章的日曆模組 (Feed Calendar)

●熱門文章 (精選隨筆)

※使用網路服務：MyHotPost
※作者部落格資訊：[MyHotPost] 我的熱門文章

●隨機文章 (亂選隨筆)

※使用網路服務：BStir
(一直無法順利抓取文章，已刪除不再使用)

※參考：Blogger random post hack 1.0 隨機文章插件
(好用又簡單，blogger果然要用英文搜尋比較容易找到好東西)

●星號評等 (blogger內建功能：在IE下會有顯示不完全的Bug)

※參考：來試試新玩意之五，Blogger in Draft：Star Ratings 
          Blogger ：Star Ratings 文章星等評價

※記錄
因位置無法與作者欄位平行，所以在 ]]></b:skin> 上方加入以下語法，並調整margin上方和下方的距離為-40px和-20px。

.star-ratings {
float:right;
margin:-30px 0px -50px 0px;
}
.RatingPanelCustom {
width:155px;
}

※記錄：改使用outbrain提供的免費星號評等功能 
(因加入隨機文章於文末，再加入星號就太長了，恢復使用blogger內建星號功能)

●作者回覆框

※參考：讓 Blogger 的意見回應可以有回覆

※記錄：
使用以上作者更新的.js檔呼叫。

在「<b:includable id='comments' var='post'>」下一行加入:
    <b:if cond='data:post.allowComments'>
        <script src='http://www.google.com/jsapi' type='text/javascript'/>
        <script charset='UTF-8' src='http://這個檔案存放的網址/ar.js' type='text/javascript'/>
        <script type='text/javascript'>var PostAuthor=&#39;<data:post.author/>&#39;;</script>
    </b:if>

●移除nofollow

參考：善待你的留言者

●亂點趣

※參考：Blogger Feeling Lucky Widget (Random Post)

(使用國外部落客之插件製造器，超方便又不用改CSS語法)

●隨機文章 (文章數太少，造成javascript頻繁讀取，暫不使用)

※參考：Random Posts Blogger Widget
(有標題和顯示部份文摘2種方式，一樣是側欄插件型式)

●變更標題列的blog名稱和文章名稱排序

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

※參考：部落格文章標題優化，加強SEO效果

※記錄：呈現方式為「文章名稱」(取消blog標題顯示)

●文末的RSS訂閱橫幅

※參考：在文章下方放置訂閱RSS的文字敘述

●標籤雲的大小、顏色、滑鼠懸停設定

※參考：設定Blogger內建標籤雲的文字大小和顏色

※記錄：加入在「body{」裡，「Header」上方。