"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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2uQled-CZrF-LJxy0V_74iVWK7VkyglY4geFLzcumdHVvrWRYEGnYtPNyC55h6QHpjlwyUA9LTPf56kExtwVzvqBT_A5r9Qqs2eDgS9WoCyLSZEoieSwWQ3MM99qXae7gPE_a11tj3eTT/") 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;}
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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2uQled-CZrF-LJxy0V_74iVWK7VkyglY4geFLzcumdHVvrWRYEGnYtPNyC55h6QHpjlwyUA9LTPf56kExtwVzvqBT_A5r9Qqs2eDgS9WoCyLSZEoieSwWQ3MM99qXae7gPE_a11tj3eTT/") 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>
<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv9Q2CBx7JMyiON-sp98-FJ1-AjkAnJszPFw-fUhnP1dVAM98jDoR7uZDMoxDQ580L_Uw4RTqf20tObrVqotiSKV55CUUFI6UfrXQu1nZdEsmeSttJRuBpCEFt_4TOlXTrmH4VaUxMHxEP/"/> English</a></li>
<li><a href="javascript:void(0)" onclick="lanVN()"><img border="0" alt='vietnamese' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2zwnnvxEeGDQtFydJNEmVLmDBYNln4ObB8pNJ0ht3rTV_cS-YY6qn2nVp38TxiLXXHjU4lOUssmtdKSaYMR-gkBububhJ2hBYXLjoLQkLqBdfytCSj8OE76JzEN66dRTsjzU9DmIBiaso/"/> Vietnamese</a></li>
<li><a href="javascript:void(0)" onclick="lanFR()"><img border="0" alt='french' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1N-91MdMbrxo7Z3r5hnUNqG64z_VWaC7ykiOqO7gY0DxBf7TrelI7OriqPilGlpWNdS41m9XL_MMThaPi6q3HysA5MUldJ3Ve-ioJQ-mtexumWEumnpuqMLmS7qcSzMWQn9im-_dgAJUC/"/> French</a></li>
<li><a href="javascript:void(0)" onclick="lanJP()"><img border="0" alt='japanese' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2QqwKCorGjm_3n6zzlu04wbXVx1hK7nPLIPXg7iFGzZaqiEtRiBYIusBrEaETvCsbB9gdZvC3NN4tee_6sX_tYJnFVZeaNjTITIIj8asKrdobahUUU5-lcHeZHUR0lk3JmZDObXs2Wvsi/"/> Japanese</a></li>
<li><a href="javascript:void(0)" onclick="lanES()"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqrQ1kMfDG6F1FXTyjfONzW6RtzkJ98YoiHmmrhVKkC27F8Xw2XPDa9xaUy6yzU-6J-Ytnxil2whuMDCU8XHrxt82b5nY8iewlGFR0_jt458npF6fAp3oM0we2gYLALcItwtjnko8oaOoh/"/> Spanish</a></li>
</ul></li></ul>
<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv9Q2CBx7JMyiON-sp98-FJ1-AjkAnJszPFw-fUhnP1dVAM98jDoR7uZDMoxDQ580L_Uw4RTqf20tObrVqotiSKV55CUUFI6UfrXQu1nZdEsmeSttJRuBpCEFt_4TOlXTrmH4VaUxMHxEP/"/> English</a></li>
<li><a href="javascript:void(0)" onclick="lanVN()"><img border="0" alt='vietnamese' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2zwnnvxEeGDQtFydJNEmVLmDBYNln4ObB8pNJ0ht3rTV_cS-YY6qn2nVp38TxiLXXHjU4lOUssmtdKSaYMR-gkBububhJ2hBYXLjoLQkLqBdfytCSj8OE76JzEN66dRTsjzU9DmIBiaso/"/> Vietnamese</a></li>
<li><a href="javascript:void(0)" onclick="lanFR()"><img border="0" alt='french' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1N-91MdMbrxo7Z3r5hnUNqG64z_VWaC7ykiOqO7gY0DxBf7TrelI7OriqPilGlpWNdS41m9XL_MMThaPi6q3HysA5MUldJ3Ve-ioJQ-mtexumWEumnpuqMLmS7qcSzMWQn9im-_dgAJUC/"/> French</a></li>
<li><a href="javascript:void(0)" onclick="lanJP()"><img border="0" alt='japanese' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2QqwKCorGjm_3n6zzlu04wbXVx1hK7nPLIPXg7iFGzZaqiEtRiBYIusBrEaETvCsbB9gdZvC3NN4tee_6sX_tYJnFVZeaNjTITIIj8asKrdobahUUU5-lcHeZHUR0lk3JmZDObXs2Wvsi/"/> Japanese</a></li>
<li><a href="javascript:void(0)" onclick="lanES()"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqrQ1kMfDG6F1FXTyjfONzW6RtzkJ98YoiHmmrhVKkC27F8Xw2XPDa9xaUy6yzU-6J-Ytnxil2whuMDCU8XHrxt82b5nY8iewlGFR0_jt458npF6fAp3oM0we2gYLALcItwtjnko8oaOoh/"/> 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 -->
<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.
Nguồn: TRAIDATMUI.com
0 nhận xét:
Đăng nhận xét