在 Blogger 加入引用文章網址的對話框

[ 前言 ]

現在許多的 Blog 都有提供引用文章的機制，而 Google Blogger 目前並沒有提供引用文章的功能，所以 小K 就思考怎麼樣才能有這樣的功能，最後只想到把文章網址顯示在對話框裡並提供讀者點選就能複製的功能，展示結果如圖1。

圖1

[ jQuery.copy Plugin 下載 ]

• 來源網站：jquery.copy.js、copy.swf
• 本站下載：jquerycopy.rar

[ 加入引用文章網址的對話框 ]

步驟 1.

將下載的檔案上傳到網路空間，假如不使用點擊複製的功能則無需下載檔案，直接跳到步驟 3. 開始。

步驟 2.

在 Blogger 管理頁面 -> 版面配置 -> 修改 HTML，搜尋</head>，並且在</head>上方插入下列程式碼。

<!-- jquery -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<!-- end jquery -->

<!-- 引用文章 -->
<!-- jquery copy plugin -->
<script src='http://deng7895.googlepages.com/jquery.copy.js'/>
<!-- end jquery copy plugin -->

<script type='text/javascript'>
  $(document).ready(function() {
    $(".quotation").click(function(){
      this.select();
      $.copy($(this).val());
    });
  });
</script>
<!-- end 引用文章 -->

步驟 3.

在 Blogger 管理頁面 -> 版面配置 -> 修改 HTML，搜尋 ]]></b:skin>，並且在 ]]></b:skin>上方插入下列程式碼。

table {
  width: 100%;
  BORDER-COLLAPSE: collapse;
}

th {
  color:#b30000;
  background:#f7f3e7;
}

th , td {
  border:2px solid #f7f3e7; 
  padding:5px;
}

步驟 4.

在 Blogger 管理頁面 -> 版面配置 -> 修改 HTML，展開小裝置範本打勾，搜尋<div class='post-footer'>，並且在<div class='post-footer'>上方插入下列程式碼，這部份讀者可以自行放在你想顯示的位置，小K是放在<div class='post-footer'>的上方。

<!-- 引用文章 -->
<b:if cond='data:blog.pageType == "item"'>
  <div align='center' style='margin-top:50px;font-size:12px;'>
    <table>
      <tr>
        <th colspan='2'>
          請勿全文轉貼，歡迎「部份引用」，引用時請註明「網站名稱」及「文章網址」。
        </th>
      </tr>
      <tr>
        <td>
          引用標題：</td><td><input class="quotation" readonly="true" size='60' type='text' value='<data:title/>：<data:post.title/>'/>
        </td>
      </tr>
      <tr>
        <td>引用網址：</td><td><input class="quotation" readonly="true" size='60' type='text' value='<data:post.url/>'/>
        </td>
      </tr>
    </table>
  </div>
</b:if>
<!-- end 引用文章 -->

[ 補充 ]

增加這個引用文章的功能只是想讓讀者能更清楚知道引用文章的網址、網站名稱及文章標題，缺點是沒有 Trackback 的功能，如果要有 Trackback 可以到 Google 搜尋 HaloScan 就可以找到你要的答案囉，最後提醒大家養成好習慣，引用他人的文章時記得要註明來源，並遵守引用規則哦!

另外注意到 <input ... /> 標籤，必須把「<」改成「＆lｔ;」，「>」改成「＆ｇlｔ;」。

[ 參考資料 ]

• Tsung's Blog：jQuery 點擊 Input / Textarea 全選、複製的寫法(Widget)