網頁

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

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

圖1
引用文章網址

[ jQuery.copy Plugin 下載 ]
[ 加入引用文章網址的對話框 ]
步驟 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 ... /> 標籤,必須把「<」改成「&lt;」,「>」改成「&glt;」。

[ 參考資料 ]

2 則留言:

  1. 請問~

    我無法儲存範本,出現下列錯誤訊息

    『我們無法剖析您的範本,因為它的結構不完整。 請確定所有的 XML 元素均已正確關閉。
    XML 錯誤訊息: The value of attribute "value" associated with an element type "null" must not contain the '<' character.』

    不知錯在那裡~~~???^^""

    回覆刪除
  2. 因為 < 和 > 轉換問題,
    首先找到 <input,把 < 改成「&lt;」,
    再找到 />,把 > 改成「&gt;」,
    希望對你有幫助。

    回覆刪除

1. 文章如有錯誤,歡迎指正。
2. 請勿打廣告,違者一律刪。
3. 歡迎您提供寶貴的意見。