如何安裝一個中英文切換鍵在你的部落格上?How to add a language switch button to your blog?

English | 繁體中文

如何安裝一個中英文切換按鈕在你的部落格上? 當然, 這個也適用在中文繁/簡體的切換, 或是其他英/法/德等語言的切換上.

首先, 把兩種不同語言版本的文章先在[撰寫模式]裡打好, 然後切換到[Edit HTML], 在文章一開始的地方加入下面這個程式碼.

其中, 選取的部份可以自行更換, 例如:

background-color:#000 → 是按鈕的背景顏色

color:#FBFF48 → 是按鈕上的文字顏色

.lang-en → en是英文,  tw是繁體中文,  fr是法文,  de是德文.

請參考這裡有所有國家的ISO碼表. 參考這裡是HTML的顏色代碼表.

然後, 在第二語言開始處加入下面的程式碼.

style="display:none" → 這個語法是指在這以下的文字內容將不會被顯示. 只有在按下了文字切換鈕後, 才會顯示.

最後, 在第二外語文章結尾處加上 </div> 即可.

即然內文都中英文切換了, 自然也要讓標題也同時在按下切換鍵時同時切換. 做法很簡單, 在標題處, 用下面的程式碼即可. 

哦, 對了, 要確保這個語言切換按鈕管用, 請先檢查你的網站是否已經有了jquery. 如果沒有, 就要加上下面的jquery到網站裡. 一般Blogger的應該都有了, 但可以查一下.

到Blogger後台, 主題→[編輯HTML]→Ctrl+F→在搜尋列中輸入jquery

如果有找到, 就不用擔心, 沒有, 就在</head>上方貼入上面的jquery即可.

當然啦, 還有另一個更簡單的方法, 那就是直接用Google Blogger裡的小工具 - Google Translate. 做法簡單又快捷, 到後台, 版面配置→[+新增小工具]→選取[翻譯]小工具即可.

不過, 有時候Google Translate未必能翻出正確的意思, 所以如果不想用Google Translate就可以自行翻好再加上本篇介紹的中英文切換按鈕囉.

How to add a language switch button to your blogger post? 

First, type your article as usual in both languages. Then, switch to [Edit HTML], add below codes to the beginning of your post.

All above highlighted part, you can change to the color/language of your choice. For example:

background-color:#000 → this is the background color of the button

color:#FBFF48 → this is the text color of the button

.lang-en → en is for English,  tw is for traditional Chinese,  fr is for French,  de is for German.

Please refer to the country ISO code, and HTML color code.

Second, add below code to the beginning post of your another language.

style="display:none" → this code means below post will not be displayed until the viewers click the language switch button.

Finally, at the end of your post, put a </div>, then it's done.

Well, it's nearly done. Since your post is now switchable between two languages, it's better your title will be switched between the languages when your viewer click the language switch button.

All you need to do is copying below codes to your title bar, and replacing with your own titles in both languages.

To ensure this language switch button will function as expected, please check if your website has jquery. If not, you will need to add below jquery to your website.

You can check by following steps: 

Go to blogger platform→ Theme→[Edit HTML]→Ctrl+F→type jquery in the search bar..

If you can find it, then do not worry, if not, copy the jquery code and paste it above the </head>

Alternatively, there is another way to add a Google Translate button to your site. It's easy and simple, just go to your blogger platform→Layout→[+Add a Gadget]→[Translate].

Although this is much easier than adding a language switch button shown above, sometime Google Translate might not convey the idea correctly all the time.