"Thêm tiện ích tùy chọn ngôn ngữ vào web/blog"

(Traidatmui.com) - Nếu bạn muốn mở rộng blog mình cho mọi người dùng trên thế giới thì vấn đề ngôn ngữ của blog là một vấn đề cần được quan tâm. Do bất đồng ngôn ngữ nên muốn mọi người đều có thể đọc được bài trên blog của bạn, bạn nền thêm một tiện ích dịch trang bạn sang một số ngôn ngữ thông dụng. Có nhiều trang hỗ trợ việc này và phổ biến là Google translate. Hôm nay mình chia sẻ cùng các bạn thêm tiện ích dịch trang với 5 ngôn ngữ (Tiếng Anh, tiếng Việt, tiếng Nhật, tiếng Tây Ban Nha, tiếng Pháp). Với tiện ích này trang của bạn sẽ tự động dịch (Dịch ngay trên trang) khi bạn chọn ngôn ngữ bạn cẫn xem, nó không cần mở một cửa sổ translate như Google translate.

1. Đăng nhập vào tài khoản Blogger
2. Vào thiết kế, chọn chỉnh sửa HTML
3. Chèn code bên dưới vào trước thẻ ]]></b:skin>
#language {margin: 0px;
padding: 0px;}
#language li{
float: right;
list-style: none;
font-size: 13px;}
#language li a{
color:#0000ff;
padding-left:3px;}
#language li:hover{
background:#eee; /*màu nền khi rê chuột*/}
#language li a:hover{
color:#ff0066; /*màu text khi rê chuột*/}
#language li a span{
margin-right: 4px;
color:#fff;
padding:0px 8px 0px 0px;
background:url("http://lh5.ggpht.com/_BTztXRwC9ik/TQ3ZOr51LgI/AAAAAAAAFz0/l1czuzYXyCA/language.gif") no-repeat center right;}
#language li a{ display: block;
padding: 0x 0px;
text-decoration: none;
white-space: nowrap;
}
#language li ul{
margin: 0px;
position: absolute;
visibility: hidden;
width:110px; /*độ rộng phần thả xuống*/
padding:2px;
margin-top:0px;
margin-left: 0px;
background: #eee; /*màu nền phần thả xuống*/}
#language li ul li{
width:108px; /*độ rộng của các link ngôn ngữ*/
display: inline}
#language li ul li a{
color:#000066;
background: #eee; /*màu nền các text ngôn ngữ*/}
#language li ul li a:hover{
background:#ccc; /*màu nền các text ngôn ngữ khi rê chuột*/
color:#727171;}
div.pp_pic_holder{display:none;}

Bạn dựa vào các phần chú thích (dòng màu xanh lá)trong code để tùy chỉnh code cho phù hợp
4. Chèn tiếp code bên dưới vào sau thẻ <head> hoặc trước thẻ </head>
<script src="http://data-traidatmui.appspot.com/scripts/language.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
if($.cookie('lang')=='EN'){lanEN();}
if($.cookie('lang')=='VI'){lanVN();}
if($.cookie('lang')=='JP'){lanJP();}
if($.cookie('lang')=='ES'){lanES();}
if($.cookie('lang')=='FR'){lanFR();}})
function lanVN(){$('body').translate('vietnamese');$.cookie('lang','VN',{path:'/',expires:date});}
function lanEN(){$('body').translate('english');$.cookie('lang','EN',{path:'/',expires:date});}
function lanJP(){$('body').translate('japanese');$.cookie('lang','JP',{path:'/',expires:date});}
function lanES(){$('body').translate('Spanish');$.cookie('lang','ES',{path:'/',expires:date});}
function lanFR(){$('body').translate('French');$.cookie('lang','FR',{path:'/',expires:date});}
</script>

5. Save template lại và trở về phần tử trang
6. Thêm 1 phần tử HTML/Javascript và thêm vào nó code sau
<ul id="language">
<li><a class='sub' href='#'><b>Languages</b><span></span></a>
<ul><li><a href="javascript:void(0)" onclick="lanEN()"><img border="0" alt='english' src="http://lh4.ggpht.com/_BTztXRwC9ik/TQ3ZoNbOvtI/AAAAAAAAF0A/T-pVHQb7DbU/us.png"/> English</a></li>
<li><a href="javascript:void(0)" onclick="lanVN()"><img border="0" alt='vietnamese' src="http://lh5.ggpht.com/_BTztXRwC9ik/TQ3ZoG1jD-I/AAAAAAAAFz8/m5kv-AEx258/vn.png"/> Vietnamese</a></li>
<li><a href="javascript:void(0)" onclick="lanFR()"><img border="0" alt='french' src="http://lh3.ggpht.com/_BTztXRwC9ik/TQ3Zn_6utOI/AAAAAAAAFz4/_FRhl3afQgY/fr.png"/> French</a></li>
<li><a href="javascript:void(0)" onclick="lanJP()"><img border="0" alt='japanese' src="http://lh4.ggpht.com/_BTztXRwC9ik/TQ3dgl5I1UI/AAAAAAAAF0M/Z2I8GujuTxM/JP.png"/> Japanese</a></li>
<li><a href="javascript:void(0)" onclick="lanES()"><img border="0" src="http://lh4.ggpht.com/_BTztXRwC9ik/TQ3dgl0w0tI/AAAAAAAAF0I/DIKHdhqmjGA/ES.png"/> Spanish</a></li>
</ul></li></ul>

6. Cuối cùng save tiện ích này lại và tìm vị trí đặt thích hợp.

Lưu ý: code này có thể xung đột với file JQuery, nếu trên blog bạn có file này bạn có thể vô hiệu hóa nó trước khi thêm tiện ích này.

Ngoài ra thì bạn có thể thêm tiện ích được hỗ trợ bởi trang translateth.is, trang này hỗ trợ dịch web/blog bạn sang 52 ngôn ngữ khác nhau. Nếu sử dụng nút translate của website này bạn chỉ cần tạo 1 HTML/Javascript và thêm code bên dưới và save lại là xong.
<!-- Begin TranslateThis Button -->
<div id="translate-this"><a href="http://translateth.is/" class="translate-this-button">Translate</a></div>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://x.translateth.is/translate-this.js"></script>
<script type="text/javascript">
TranslateThis();
</script>
<!-- End TranslateThis Button -->

Chúc bạn thành công.

Xem khác cùng chủ đề

10 nhận xét | Viết lời bình

10/07/2011 10:35:00 CH Trả lời

Cám ơn Trai Đất mũi nhé, hôm nào có dịp vào đất mũi cho phép Trai đất trán gặp trai đất mũi làm một chầu nhậu nhé, mình ở HN nhưng công tác thường xuyên tại Ninh Thuận, nếu có dịp sẽ tìm cách lạc nhé!!!!

Admin
10/07/2011 10:37:00 CH Trả lời

@ Blogger: Ok! Việc đó thì không vấn đề gì, chúc bạn luôn thành công!

11/04/2011 10:10:00 CH Trả lời

TDM giúp tôi với, sau khi thêm translateth.is dịch sang 52 ngôn ngữ thì widget này không hiển thị, chắc bị xung đột với file JQuery trong blog nhưng tôi không thể khắc phục được.

Rất mong TDM giúp đỡ hướng dẫn hoặc có code nào xử lý được xung đột đó không vậy? Mong nhận được tin sớm từ bạn khocwatroi

11/05/2011 05:54:00 SA Trả lời

TDM đâu rồi vậy? Tôi thấy công cụ translate trên blog của bạn rất pro, TDM có thể viết tut hướng dẫn để mọi người cùng làm theo được không vậy?

Admin
11/05/2011 06:36:00 SA Trả lời

@ BOY7X: Tiện ích translate của mình cũng ứng dụng code trên thôi không có gì lạ, còn việc tiện ích Translate 52 ngôn ngữ ở trên không hiện thị trên site BOY7X thì mình nghĩ không phải bị xung đột code đâu, BOY7X cần giữ nguyên code không được xóa bỏ dòng nào hết hoặc có thể vào đây lấy code gốc nhé.

11/05/2011 06:59:00 SA Trả lời

Vẫn không hiển thị được TDM xem giúp tôi với roile

Admin
11/06/2011 05:52:00 SA Trả lời

@ BOY7X: BOY7X có thể gửi template qua email tới admin@traidatmui.com để mình xem thử.

9/10/2012 11:16:00 CH Trả lời

Liên kết nhé traidatmui
Bạn nhớ ok hay không ok để mình add address bạn vô nhé.
site mình là http://www.vietcons.info

Admin
9/11/2012 05:09:00 SA Trả lời

site ban pr bao nhiêu z bạn

7/08/2013 10:13:00 CH Trả lời
Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang