豆丁主義（生活。遊記。插畫。故事）: Blogspot教學：把留言欄移到上面

2013年11月11日星期一

Blogspot教學：把留言欄移到上面

不少從Yahoo! Blog搬來Blogspot的用家都不太喜歡Blogspot的留言欄，認為要讀者把網頁拉到最底才可以留言，很浪費時間。（豆丁倒覺得這樣不錯，讀者留言前多看看別人的留言，可以與其他讀者有交流，常常會帶出有意義的討論^^～而且，當大家看到別人的問題和答案，就不會重覆問題，省卻豆丁重覆回答的功夫～^^ [懶]）

不過，由於大家很想把留言欄移到上面，豆丁就親自在自己的網誌試試，也希望聽聽讀者的意見﹣﹣「留言欄放在最上好，或是最底好」。

圖1

豆丁不是電腦人，沒有自己寫程式碼，只是參考專業電腦人的指導。這次分享的好網頁是這個：http://www.techtrickhome.com/2013/02/show-comment-box-above-comments-on.html

注意：由於要改動網誌的HTML碼，請記得先把網誌的設計程式碼備份啊～（請看《美化Blogspot，備份要緊！》）

步驟1：請到「範本」＞「自訂HTML」

圖2

步驟2：按一下程式碼的方格，然後搜尋「<div class='comments-content'>」(Ctrl+F)。留意左邊的行數（如圖3﹣﹣行數1889）。

圖3

步驟3：然後，你會看到以下的程式碼，請選擇那些程式碼（大致如圖3，但記得連黃色部分也要選擇(select)！）：

<div class='comments-content'>
 
<b:if cond='data:post.embedCommentForm'> 
<b:include data='post' name='threaded_comment_js'/> </b:if> 

<div id='comment-holder'>
 
<data:post.commentHtml/> </div>
</div>
<p class='comment-footer'>
<b:if cond='data:post.allowNewComments'> 
<b:include data='post' name='threaded-comment-form'/> <b:else/> <data:post.noNewCommentsText/> </b:if> </p>

步驟4：把以下的程式碼貼到剛才程式碼的位置（不肯定的話，可看看左邊的行數，是步驟2的行數）：

<p class='comment-footer'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='threaded-comment-form'/> <b:else/>
<data:post.noNewCommentsText/> </b:if> </p>
<div class='comments-content'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='threaded_comment_js'/> </b:if> 
<div id='comment-holder'>
 
<data:post.commentHtml/> </div>
</div>

步驟5：現在以Ctrl+F尋找 </body> ，然後在</body>前，貼上下面的程式碼：

<!-- comment form before comment content starts -->
<script src='http://code.jquery.com/jquery-latest.js'/>
<script> var yob = $(".comment-replybox-thread").closest(".comment-thread").parent("div").children(".comment-thread").children(".comment-replybox-thread"); jQuery('.comment-thread ol').before(jQuery(yob)); </script> 
<!-- comment form before comment content ends -->