Blogger 外連網址自動執行 Google 網址安全性檢查

Blogger 網誌模板範本應用教學:在網路上逛街的時候,常常逛到使用 WordPress 平台架站的網站,有些站長會很細心的幫自己的網站建立對外連結網址執行網址安全性檢查服務,讓往來的訪客能夠安心的前往外部連結的網站。

會有這篇是因為自己也想幫 Blogger 網站增加外連安全性的考量,但由於在網路上找不到相關教學,所以就自己動手實作囉!

網址安全性掃描」是由 Google API 所提供,目前找到有提供網址掃描的自架平台有 [ vez.cc ] 及 [ 0zz.cc ] ,由於找到的資料有限,還不確定這兩個平台是否為自由平台,若有不歡迎掃描的情事也請予以告知。

Blogger 外連網址自動執行 Google 網址安全性檢查_001



實作的過程會在 Blogger 後台的 HTML 中增加 jquery 及 函式,若對 Blogger 不太熟悉,可先 「備份 Blogger 的 XML」 。在程式碼完成安裝後,所有的外連網址會在瀏覽器自動開一新分頁執行「網址安全性檢查」,所有的內連網址會在原瀏覽器頁面直接跳轉。



設置前準備

若對編譯 Blogger 的 HTML 模板還不太熟悉,建議先執行『備份 Blogger 模板 (範本)』的動作,以防原始模板資料遺失。



設定教學

前往後台,【範本 〉編輯 HTML】

Blogger 外連網址自動執行 Google 網址安全性檢查_101



找到「<head>」,在「<head>」下方加入以下程式碼,若有安裝過「jquery.js」或「jquery.min.js」則無需重複安裝


<script src='//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js' type='text/javascript'/>

Blogger 外連網址自動執行 Google 網址安全性檢查_102



接著搜尋【</head>】,在「</head>」上方加入以下程式碼,加入完成後按下【儲存範本】後即可看到效果

<!-- 外部鏈結網址安全性檢查開始 -->
<script type='text/javascript'>
$(document).ready(function() { 
  $(&quot;a[href^=&#39;http://&#39;]&quot;).each( 
    function(){ 
     if(this.href.indexOf(location.hostname) == -1) { 
         $(this).click(function (e) { 
        e.preventDefault(); 
        var target = e.target
        if ($(target).attr(&#39;target&#39;, &#39;_blank&#39;)) { 
            window.open(&quot;http://0zz.cc/redir.php?url=&quot; + $(target).attr(&#39;href&#39;), &#39;_blank&#39;); 
        }
});
}
});
});
</script>
<!-- 外部鏈結網址安全性檢查結束 -->

Blogger 外連網址自動執行 Google 網址安全性檢查_103



若需要更改為使用「vez.cc」掃描,可將「0zz.cc/redir.php?url=」更改為「vez.cc/check.php?url=




小結

有個小缺點,若有使用 Blogger 內建的燈箱效果,當點擊 Blogger 網站內的圖片連結,會在瀏覽器新分頁顯示一個空白的掃描頁面,但在瀏覽器原始分頁還是會顯示燈箱圖片。



參考文獻
MBT


留言

  1. 請問可以在轉址的頁面掛上自己網站的Logo, 或刪除/改變頁面的廣告嗎?

    回覆刪除
    回覆
    1. [ vez.cc ] 及 [ 0zz.cc ] 兩個網址掃描平台,為該站台的站長架設的網址掃描網站,
      我們沒有辦法直接作更變 logo 和 廣告 的動作。

      必須自已架設網站,調用 Google Safe Browsing API 才有辦法完成。

      刪除
  2. 您的code與圖片不符合

    回覆刪除
◎ 留言板中提問「代碼」問題,可至『留言代碼轉換器』轉換代碼。

張貼留言

繼續閱讀:

這個網誌中的熱門文章

[教學] LINE 電腦版行動條碼登入設定

[外掛] Chrome 擴充:ColorPick Eyedropper 網頁色碼擷取器

[教學] 使用 PuTTYgen 產生 SSH 連線 RSA、DSA 公鑰與私鑰

Line 分享按鈕:文章分享語法相容網頁版、行動裝置、APP

[教學] Twitter 手機簡訊、APP 兩步驟驗證設定

[教學] Google Compute Engine ( GCE ) 使用 PuTTY SSH 登入實例

[教學] Blogger 自訂網址綁定自有域名

[外掛] Chrome 擴充:Window Resizer 瀏覽器視窗大小調整比例

[密技] Windows OneDrive Dropbox 移至 SD 卡,讓 SSD 使用壽命更長久

[教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰