Hướng dẫn Tích hợp Google Translate vào XenForo - Dịch site ra tiếng Anh

Blue

Founder
Thành viên BQT
Tham gia
25/02/2015
Bài viết
931
Được Like
1,553
Google Translate hiện tại có thể dịch 1 website ra rất nhiều ngôn ngữ trong nháy mắt, tích hợp ngay trên trang web và dịch diễn đàn XenForo của bạn chẳng hạn ra tiếng Anh, tiếng Pháp... Chức năng này được nhiều website Wordpress sử dụng nhưng chưa thấy trên XenForo hoặc đã có nhưng chưa tối ưu.

Hôm nay, Blue đã thử trên VNXF và thành công, xin chia sẻ cùng các bạn. Mọi người chỉ cần gắn đoạn code dưới đây vào chỗ template cần hiển thị, có thể đặt ở ad_header hoặc ad_above_top_breadcrumb. Đây mới chỉ là code cơ bản, link file ở VNXF, các bạn có thể tải về up lại và sửa link nếu muốn. Còn giờ hãy thử xem nhé :)

Mã:
<link rel="stylesheet" href="http://vnxf.vn/styles/vnxf2016/google-language.css">
<script type="text/javascript" src="http://vnxf.vn/styles/vnxf2016/google-language.js"></script>
<div id="flags" class="size24">
    <ul id="sortable" class="ui-sortable" style="float:left">
        <li id='English'><a title='English' class='notranslate flag en united-states'></a></li>
        <li id='Vietnamese'><a title='Vietnamese' class='notranslate flag vi Vietnamese'></a></li>
    </ul>
</div>
<div id="google_language_translator"></div>

<script>
jQuery(document).ready(function(a) {
    a("a.nturl").on("click", function() {
        function l() {
            doGoogleLanguageTranslator(default_lang + "|" + default_lang)
        }

        function n() {
            doGoogleLanguageTranslator(default_lang + "|" + lang_prefix)
        }
        default_lang = "vi", lang_prefix = a(this).attr("class").split(" ")[2], lang_prefix == default_lang ? l() : n()
    }), a("a.flag").on("click", function() {
        function l() {
            doGoogleLanguageTranslator(default_lang + "|" + default_lang)
        }

        function n() {
            doGoogleLanguageTranslator(default_lang + "|" + lang_prefix)
        }
        default_lang = "vi", lang_prefix = a(this).attr("class").split(" ")[2], a(".tool-container").hide(), lang_prefix == default_lang ? l() : n()
    }), 0 == a("body > #google_language_translator").length && a("#glt-footer").html("<div id='google_language_translator'></div>")
});
</script>
<div id='glt-footer'></div>
<script type='text/javascript'>function GoogleLanguageTranslatorInit() { new google.translate.TranslateElement({pageLanguage: 'vi', autoDisplay: false}, 'google_language_translator');}</script>
<script type='text/javascript' src='//translate.google.com/translate_a/element.js?cb=GoogleLanguageTranslatorInit'></script>
<style type="text/css">
p.hello {
    font-size: 12px;
    color: darkgray;
}
#google_language_translator,
#flags {
    text-align: left;
}
#google_language_translator {
    clear: both;
}
#flags {
    width: 105px;
    position:absolute;
    top:60px;
}
#flags a {
    display: inline-block;
    margin-right: 2px;
}
.goog-tooltip {
    display: none !important;
}
.goog-tooltip:hover {
    display: none !important;
}
.goog-text-highlight {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
#google_language_translator a {
    display: none !important;
}
.goog-te-gadget {
    color: transparent !important;
}
.goog-te-gadget {
    font-size: 0px !important;
}
.goog-branding {
    display: none;
}
#google_language_translator {
    display: none;
}
.goog-te-banner-frame {
    visibility: hidden !important;
}
body {
    top: 0px !important;
}
</style>

Chú ý: Do xung đột giữa hàm javasript của google translate với xenforo, nhưng file đó lại do google kiểm soát nên nếu ai dùng google translate sẽ phải chịu mất preview tooltip ở list bài của các box forum.
 

Đính kèm

  • vnxf-google-translate.zip
    208.7 KB · Lượt xem: 134
Sửa lần cuối:

conkhidannb

Corporal
Tham gia
07/09/2015
Bài viết
189
Được Like
133
Mong bác nào biết đã thử nhưng không thấy xuất hiện gì
 
  • Like
Reactions: THB

THB

Founder
Thành viên BQT
Tham gia
25/02/2015
Bài viết
6,651
Được Like
3,934
vnxf kìa còn cầu mong gì nữa e. hiii
 

MacKen

Sergeant
Tham gia
30/11/2015
Bài viết
625
Được Like
542
Không thấy code trong site làm sao hiện được ...BÁc liên hệ skye minh nhé ở dưới chữ ký
 

Jindo_Katori

FirstSergeant
Tham gia
01/03/2015
Bài viết
1,454
Được Like
1,193
Mình đã thử cố chèn vào template khác nhưng chức năng này nó cứ nhảy lên góc logo vậy nhỉ?
1.png

Nhờ bác fix hộ được không ạ?

À nãy sinh một thắc mắc đối với các trang có chức năng chuyển ngữ như thế này thì: "GOOGLE SẼ INDEX NỘI DUNG NÀO CỦA SITE: tiếng anh hay tiếng việt, hoặc cả 02, trường hợp cả 02 mình có cảm giác không đúng lắm, vì nếu thế khi kiểm tra các từ khóa tiếng anh thì gần như không thấy google index"
Nhiều site phải viết lại bằng tay 02 ngôn ngữ khác nhau...
 
Sửa lần cuối:

Blue

Founder
Thành viên BQT
Tham gia
25/02/2015
Bài viết
931
Được Like
1,553
Nó chỉ giúp người đọc dịch ra tiếng Anh thôi, còn index vẫn là index bài viết mặc định.
 

MacKen

Sergeant
Tham gia
30/11/2015
Bài viết
625
Được Like
542
Muốn đặt vị trí lang phải am hiểu css thì đặt được vị trí mình muốn
 

Jindo_Katori

FirstSergeant
Tham gia
01/03/2015
Bài viết
1,454
Được Like
1,193
Nó chỉ giúp người đọc dịch ra tiếng Anh thôi, còn index vẫn là index bài viết mặc định.
Rất cảm ơn bác đã làm sáng tỏ phần kiến thức bị mù mờ 8-|
Muốn đặt vị trí lang phải am hiểu css thì đặt được vị trí mình muốn
Mình đang xem toàn bộ đoạn code của bác @Blue chia sẽ mà mù chữ thành ra cũng không rõ phải edit lại dòng nào? whew~~
Mã:
#glt-footer,
#glt-footer #google_language_translator {
    display:none !important;
}

a.wp-studio-logo:focus,
a.wp-helpdesk-logo:focus {
  box-shadow:none !important;
  -webkit-box-shadow:none !important;
  -moz-box-shadow:none !important;
}

.goog-te-gadget-simple {
  margin:4px 0;
}

select.goog-te-combo {
  width:143px !important;
  background:#fff;
  box-shadow:none !important;
  -moz-box-shadow:none !important;
  -webkit-box-shadow:none !important;
  padding:3px !important;
  height:auto !important;
  border:1px solid lightgray !important;
  border-radius:0px !important;
  -webkit-border-radius:0px;
  -moz-border-radius:0px !important;
  -o-border-radius:0px !important;
}

#flags {
  overflow:hidden;
}

#flags ul {
  margin:0;
}

#flags li {
  float:left !important;
  margin-bottom:0 !important;
  padding:0 !important;
  border:none !important;
  list-style:none !important;
  content:none !important;
}

#flags li:before {
  content:none !important;
  border:none !important;
  background:none !important;
}

#flags a,
.tool-container .tool-items a {
  cursor:pointer;
}

#flags.size24 a {
  width:24px !important;
  height:18px !important;
}

#flags.size22 a {
  width:22px !important;
  height:17px !important;
}

#flags.size20 a {
  width:20px !important;
  height:14px !important;
}

#flags.size18 a {
  width:18px !important;
  height:14px !important;
}

#flags.size16 a {
  width:16px !important;
  height:12px !important;
}
 
.tool-container .tool-items a {
  display:inline-block;
  margin:3px 5px 3px;
  width:24px !important;
  height:18px !important;
}

.goog-te-gadget {
  color:#444;
  font-size:11px;
  font-family:"Arial",sans,sans-serif;
}

.goog-te-gadget img {
  vertical-align:middle;
}

select.goog-te-combo:focus {
  box-shadow:none !important;
  -moz-box-shadow:none !important;
  -webkit-box-shadow:none !important;
}

.metabox-holder {
  width:65%;
  float:left;
}

.metabox-holder h2 {
  margin-bottom:18px;
}

.submit {
  padding:0px;
}

.form-table th {
  width:50%;
}

td.advanced {
  padding-top:0px;
  padding-bottom:0px;
}

p.hello {
  font-size:12px;
  color:darkgray;
}

.flag{
    padding:1px 0;
}

a.nturl {
  cursor:pointer;
}

.flag img,
.alt_flag img{
    border:0px !important;
    margin-top:2px !important;
    padding:0px !important;
}

.attribution {
    width:152px;
    line-height:1em;
    margin-top:4px;
}

span.goog-branding {
    font-size: 11px;
    font-family: arial;
    color: rgb(102, 102, 102);
    white-space: nowrap;
    padding-top: 4px;
    text-align: left;
    width: 150px;
    margin-top: 2px;
    left:170px;
    z-index: 9999;
    float: right;
}

.goog-logo-link,
.goog-logo-link:link,
.goog-logo-link:visited,
.goog-logo-link:hover,
.goog-logo-link:active {
    font-size: 12px;
    font-weight: bold;
    color: rgb(68, 68, 68);
    text-decoration: none;
    line-height:0.8em;
}

span.goog-branding img {
    float: left;
    margin:0px;
    width: 37px;
 
}

span.vertical-translator {
    position:auto;
    float:none !important;
    font-size: 11px;
    font-family: arial;
    color: rgb(102, 102, 102);
    white-space: nowrap;
    vertical-align: middle;
    padding-top: 4px;
    text-align: left;
    width: 150px;
    margin-top: 2px;
    right: -50px;
    z-index: 9999;
}

.tool-container .tool-items .flag img {
    width:24px !important;
    height:24px !important;
    margin-top:1px !important;
}

.tool-items .flag {
    padding:0px !important;
}

.tool-container {
    line-height:1;
}

table td {
    border:1px solid #333 !important;
}
 

secpol

MasterCorporal
Tham gia
10/06/2016
Bài viết
223
Được Like
135
Mình đặt vào ad_above_top_breadcrumb không thấy xuất hiện. Copy nguyên code của vnxf luôn.
 
  • Like
Reactions: THB

aiquoc

Gefreiter
Tham gia
29/07/2015
Bài viết
96
Được Like
23
Có hiện nhưng không đúng vị trí, cứ nằm chèn vào chỗ khác
 

namchelsea

Sergeant
Tham gia
04/03/2015
Bài viết
483
Được Like
315
Done thank nhiều nhá
 
Sửa lần cuối:
  • Like
Reactions: THB

Top Bottom