Code Google Dịch Tích Hợp - Đơn Giản Nhưng Hiệu Quả Cao

Chào các anh em coder đam mê công nghệ! Hôm nay mình mang đến một đoạn code siêu tiện lợi, giúp tích hợp Google Dịch vào trang web của bạn trong vòng một nốt nhạc. Ai bảo cái gì đơn giản là không "xịn"? Đọc hết bài viết, bạn sẽ thấy code này bá đạo thế nào!

Tại sao phải tích hợp Google Dịch?

• Tính đa ngôn ngữ : Một trang web hỗ trợ nhiều ngôn ngữ sẽ giúp bạn tiếp cận nhiều đối tượng người dùng hơn, đặc biệt nếu bạn đang hướng tới thị trường quốc tế.
• Thao tác dễ dàng : Không cần biết sâu về ngôn ngữ lập trình, đoạn code này giúp bạn thêm tính năng dịch chỉ trong vài dòng!
• Tùy chỉnh giao diện : Với chút CSS chỉnh chu, khung chọn ngôn ngữ sẽ vừa đẹp vừa gọn.

Ưu điểm của đoạn code này

• Nhẹ nhàng : Không làm nặng website, vì chỉ sử dụng trực tiếp script của Google.
• Dễ triển khai : Copy - Paste là xong. Thậm chí không cần động tay viết thêm gì.
• Tối ưu giao diện : Đoạn CSS đi kèm giúp khung dịch vừa gọn gàng vừa bắt mắt.
• An toàn và hiện đại : Code sử dụng API chính chủ từ Google, đảm bảo hiệu năng và bảo mật.
• Ẩn khung dịch mặc định : Code này hoàn toàn không hiện khung dịch mặc định trên đầu trang web (thứ vốn gây xấu giao diện).
• Nhanh hơn API hiện tại : Code này load cực kỳ nhanh, không làm chậm trang như các API tích hợp phức tạp hiện nay.
• An toàn và hiện đại : Code sử dụng API chính chủ từ Google, đảm bảo hiệu năng và bảo mật.

Cách dùng

Bước 1: Thêm CSS vào file HTML

 <style>
 body { top: 0px!important; }
.skiptranslate iframe { display: none; }
.skiptranslate *,.skiptranslate { font-size: 1px!important; color: #fff!important; }
.skiptranslate select,.skiptranslate option { font-size: 14px!important; color: #000!important; }
.skiptranslate img { display: none; }
 select.goog-te-combo {
     padding: 9px 0;
     width: 100%;
     border: 1px solid #bcbcbc;
     border-bottom: 1px solid #ccc;
 }
 </style>

Bước 2: Thêm đoạn script Google Dịch

<script type="text/javascript">
 function googleTranslateElementInit2() {
     new google.translate.TranslateElement({pageLanguage: 'vi', autoDisplay: false}, 'google_translate_element2');
 }
 </script>
 <script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit2"></script>

Bước 3: Đặt khung hiển thị ngôn ngữ

 <div id="google_translate_element2" class="w3-card w3-padding"></div>

Nguồn: Hải Pro