Blogger｜如何在文章標題加入留言計數器

Google Blogger可以讓我們套用很多免費的版型，如果你能花點時間研究語法，那更能創造一個屬於自己的範本。在眾多範本中，較少能在文章標題顯示其它元素，如果能在標題旁加入回應的留言數，那就能讓訪客了解這篇文章的網友互動程度，提高文章表逹的清晰度。

1. 編輯範本

2. 加入css樣式表

   利用Ctrl+F找到這行：
   

   ]]></b:skin>

   在後面插入

   .comment-bubble {
   float : right;
   width : 48px;
   height : 48px;
   background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg9M9-h6ydj1XAiMVtaZGSihp5NGkHpWABYCLr9_d8kgRtI2xb43WJCU7jdwD3RexMBk41MJ-f24gQTHPu0G8ykVpIOGDG2Mgx_0fHU0zpDL0CnMSbV-hqoxAVM82vj8iWJzpzNA/s1600/speech+bubble+green.png);
   background-repeat: no-repeat;
   font-size : 18px;
   margin-top : -15px;
   margin-right : 2px;
   text-align : center;
   }

3. 插入程式碼

   利用Ctrl+F找到這行：
   

   <b:if cond='data:post.title'>
   <h3 class='post-title entry-title' itemprop='name'>

   在後面插入

   <b:if cond='data:post.allowComments'>
   <a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='color: #ffffff;
   font-size: 18px; font-weight: bold;'>
   <data:post.numComments/></a>
   </b:if>

4. 自訂圖案型式

   在css加入的代碼中，找到background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg9M9-h6ydj1XAiMVtaZGSihp5NGkHpWABYCLr9_d8kgRtI2xb43WJCU7jdwD3RexMBk41MJ-f24gQTHPu0G8ykVpIOGDG2Mgx_0fHU0zpDL0CnMSbV-hqoxAVM82vj8iWJzpzNA/s1600/speech+bubble+green.png); 這一行，將圖案改為自己喜歡的或用photoshop作一個，就能擁有自己的圖案格式了。