如何安裝一個中英文切換鍵在你的部落格上?

Views

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就可以自行翻好再加上本篇介紹的中英文切換按鈕囉.

0 留言:

張貼留言