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

將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>

   加入翻譯程式碼：
在 中包含以下程式碼： HTML 文件的部分：

2. <code class="html"><div class="translate">
       <div id="google_translate_element"></div>
   </div></code>

   建立DIV 容器：
將以下DIV 加入HTML 文件中您希望模態框出現的位置：

3. <code class="css">.translate {
       position: absolute;
       top: 100px;
       right: 0;
       z-index: 9999;
   }</code>

   自訂佈局（可選）：
您可以透過在.translate 類別中新增CSS樣式來自訂模式的外觀。例如：

移除基本內聯佈局

<code class="html"><meta name="google-translate-customization" content="9f841e7780177523-3214ceb76f765f38-gc38c6fe6f9d06436-c"></code>

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

• 注意：
• 模態佈局需要 JavaScript 才能運作。

您可能需要調整 CSS適合您網站設計的樣式。

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