首頁 >web前端 >css教學 >如何在我的網站上實現可自訂的 Google 翻譯模式佈局?

如何在我的網站上實現可自訂的 Google 翻譯模式佈局?

Susan Sarandon
Susan Sarandon原創
2024-11-01 15:03:31422瀏覽

How can I implement a customizable Google Translate modal layout on my website?

將Google 翻譯添加到您的網站- 自訂介面

將Google 翻譯整合到您的網站時,您有兩種選擇:基本內聯佈局或更可自訂的模式佈局。您從 Google Translate 提供的程式碼提供了內聯佈局,但如果您更喜歡模態佈局,則可以使用 html-5-tutorial 網站中的程式碼。

實現模態佈局

要使用SELECT 和OPTION 標記實現模態佈局,請按照以下步驟操作:

  1. 新增Google🎜>新增Google🎜>

    <code class="html"><div id="google_translate_element"></div>
    <script>
        function googleTranslateElementInit() {
            new google.translate.TranslateElement(
                {pageLanguage: 'en'},
                'google_translate_element'
            );
        }
    </script>
    <script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script></code>
    加入翻譯程式碼:
  2. 在 中包含以下程式碼: HTML 文件的部分:
  3. <code class="html"><div class="translate">
        <div id="google_translate_element"></div>
    </div></code>
    建立DIV 容器:
  4. 將以下DIV 加入HTML 文件中您希望模態框出現的位置:
  5. <code class="css">.translate {
        position: absolute;
        top: 100px;
        right: 0;
        z-index: 9999;
    }</code>
    自訂佈局(可選):
  6. 您可以透過在.translate 類別中新增CSS樣式來自訂模式的外觀。例如:

移除基本內聯佈局
<code class="html"><meta name="google-translate-customization" content="9f841e7780177523-3214ceb76f765f38-gc38c6fe6f9d06436-c"></code>

如果已經添加了基本內聯佈局,則需要移除它,防止與模態衝突佈局。在中找到以下程式碼HTML 文件的部分並刪除它:

  • 注意:
  • 模態佈局需要 JavaScript 才能運作。
您可能需要調整 CSS適合您網站設計的樣式。

以上是如何在我的網站上實現可自訂的 Google 翻譯模式佈局?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn