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

Điểm 4.6/5 dựa vào 87 đánh giá

(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.

Loading...

10 nhận xét

  1. 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é!!!!

    Trả lờiXóa
  2. @ Blogger: Ok! Việc đó thì không vấn đề gì, chúc bạn luôn thành công!

    Trả lờiXóa
  3. 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

    Trả lờiXóa
  4. 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?

    Trả lờiXóa
  5. @ 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é.

    Trả lờiXóa
  6. Vẫn không hiển thị được TDM xem giúp tôi với roile

    Trả lờiXóa
  7. @ BOY7X: BOY7X có thể gửi template qua email tới admin@traidatmui.com để mình xem thử.

    Trả lờiXóa
  8. 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

    Trả lờiXóa