如何在我的网站上实现可自定义的 Google 翻译模式布局？

将 Google 翻译添加到您的网站 - 自定义界面

将 Google 翻译集成到您的网站时，您有两种选择：基本内联布局或更可自定义的模式布局。您从 Google Translate 提供的代码提供了内联布局，但如果您更喜欢模态布局，则可以使用 html-5-tutorial 网站中的代码。

实现模态布局

要使用 SELECT 和 OPTION 标记实现模态布局，请按照以下步骤操作：

1. 添加 Google 翻译代码： 在

   中包含以下代码： HTML 文档的部分：

   <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. 创建 DIV 容器： 将以下 DIV 添加到 HTML 文档中您希望模态框出现的位置：

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

   登录后复制

3. 自定义布局（可选）：您可以通过向 .translate 类添加 CSS 样式来自定义模式的外观。例如：

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

   登录后复制

移除基本内联布局

如果已经添加了基本内联布局，则需要移除它，防止与模态冲突布局。在

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

注意：

• 模态布局需要 JavaScript 才能运行。
• 您可能需要调整 CSS适合您网站设计的样式。

以上是如何在我的网站上实现可自定义的 Google 翻译模式布局？的详细内容。更多信息请关注PHP中文网其他相关文章！