Holling Hsu

為您的網站，增加一個「Google 語言翻譯」功能吧！

如果您的網站需要讓全球性的人都能看得懂，除了 Browsers 本身可以使用翻譯功能之外，冰友們是否考慮為自己的網站/網頁，增加一個 "語言翻譯" 的功能？例如：Google 翻譯 (工具)。

有需要的冰友，可以考慮是否納入這個工具：Google 翻譯
http://translate.google.com/translate_tools?hl=zh-TW

（原尺寸圖）

（放大圖）

〔主要功能〕
翻譯元素的類型：
1. 為整個網頁增添翻譯內容。
2. 為網頁的某個區段增添翻譯內容。

〔語法分享〕
(下列 Code just for ref. 冰友們可至上述官網自訂複製該 Code)

<div id="google_translate_element"></div><script>

function googleTranslateElementInit() {

  new google.translate.TranslateElement({

    pageLanguage: 'zh-TW'

  }, 'google_translate_element');

}

</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

<script>

function googleSectionalElementInit() {

  new google.translate.SectionalElement({

    sectionalNodeClassName: 'goog-trans-section',

    controlNodeClassName: 'goog-trans-control',

    background: '#f4fa58'

  }, 'google_sectional_element');

}

</script>

<script src="//translate.google.com/translate_a/element.js?cb=googleSectionalElementInit&ug=section&hl=zh-TW"></script>

我自己是沒加這個翻譯工具，因為目前已經加了一些 Widgets/Gadgets/Hacks，加太多會讓網頁開啟變慢，所以止步。

Just FYR. 　^_^

如何在網頁中做一個「"TOP（回頂端）" （Back to Top，回網頁頂端），且可以放大的浮動圖片按鈕」？

您是否看過許多網頁長長的一頁，作者只顧自己放自己要放的物件及文章，卻完全不顧讀者想回到網頁最頂端，得按著 Browser 的捲軸按到手酸？？我想這一類的網頁，可能讀者最想 "按" 的地方不是你的文章，而是 "X" 這個按鈕吧...... （除非
你的網頁有別人不得不看的絕世好文......）。

話說前幾天有個朋友正在學做網頁，問我說如何做一個：
「"TOP（回頂端）" （Back to Top，回網頁頂端），且可以放大的浮動圖片按鈕」。朋友之前曾爬了些網路文章，試著改 CSS + HTML 語法，卻都無法成功。

話說此 Code (小語法) 已行之有年了，我也很久沒在用這 Code 了，是一段蠻簡易的語法。在回覆給朋友後，經朋友一用就 OK. 了。今天順便把這一段 Code 分享在 Blog 吧，相信有人會需要用到這一段小語法的。

注意：
聽說有些人不慎引用較花俏的 JS 而導致中毒、網頁害別人中毒等等。事實上，這段 Code 完全不須呼叫額外的外部 Java Script，因為這可能會讓網頁速度變慢或中毒。當然，如果喜歡更花俏的人，也可以自己寫 JS or 引用可信任的 JS.

〔語法分享〕
1. 將下列這一段 Code，放置在 </body> 之前/上方，或者放置在你想出現的位置， <body> 與 </body> 之間即可。

2. Blogger 的 Users, 可以開啟：
"設計" => "網頁元素" => "新增小工具" => "基本" => "HTML/JavaScript"，然後貼上這一段語法即可。當然，功力較高的冰友們，也可以自行修改 HTML 後再上載 XML file 即可。

3. Wordpress & the Others 的 Users，可自行引用此段語法於合適的位置。

4. 藍色部份：可自行調整圖片按鈕位置。

5. 紅色部份：不可移除。否則在 FF(FireFox) 或 IE 下使用時，點選圖示後會產生虛線外框。所以我特別加了這部份語法以去除圖片虛線外框。

6. 橘色部份：可自行使用自己喜歡的圖片，須用二張圖片，一為放大前圖片，一為放大後圖片。

複製下列語法並修改為自己喜歡的圖片者，可使用這一段：

<!--BACKtoTOP-START-->

<a style="display:scroll;position:fixed;bottom:0px;right:5px;" href="#" title="" onFocus="if(this.blur)this.blur()">

<img alt='' border='0' onmouseover="this.src='放大後圖片網址'" src="放大前圖片網址" onmouseout="this.src='放大前圖片網址'" /></a>

<!--BACKtoTOP-STOP-->

直接套用筆者的圖片者，可使用這一段：

<!--BACKtoTOP-START-->

<a style="display:scroll;position:fixed;bottom:0px;right:5px;" href="#" title="" onFocus="if(this.blur)this.blur()">

<img alt='' border='0' onmouseover="this.src='http://4.bp.blogspot.com/-AKP9Gl_ets0/TmzrRBJPg_I/AAAAAAAADpY/M3KVvsDNJbA/s1600/Top.png'" src="http://1.bp.blogspot.com/-_gUa3K1wDNo/TmzrHROhBVI/AAAAAAAADpU/vOKm_7zL8DQ/s1600/Top_medium.png" onmouseout="this.src='http://1.bp.blogspot.com/-_gUa3K1wDNo/TmzrHROhBVI/AAAAAAAADpU/vOKm_7zL8DQ/s1600/Top_medium.png'" /></a>

<!--BACKtoTOP-STOP-->

如有遇到 Coding 編碼問題無法使用，可使用這一段已編碼過的相同的 Code（圖片網址請自行置換）：

&lt;!--BACKtoTOP-START--&gt;

&lt;a style="display:scroll;position:fixed;bottom:0px;right:5px;" href="#" title="" onFocus="if(this.blur)this.blur()"&gt;

&lt;img alt='' border='0' onmouseover="this.src='放大後圖片網址'" src="放大前圖片網址" onmouseout="this.src='放大前圖片網址'" /&gt;&lt;/a&gt;

&lt;!--BACKtoTOP-STOP--&gt;

如果有懶人冰友，懶得去找圖片，也可以使用我目前使用的圖片（這是網路找的我覺得還不錯看的圖，圖片我已修過大小與去背）：