Bagaimanakah saya boleh melaksanakan reka letak mod Terjemahan Google yang boleh disesuaikan pada tapak web saya?

Susan Sarandon
Lepaskan: 2024-11-01 15:03:31
asal
346 orang telah melayarinya

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

Menambah Terjemahan Google pada Tapak Web Anda - Menyesuaikan Antara Muka

Apabila menyepadukan Terjemahan Google ke dalam tapak web anda, anda mempunyai dua pilihan: susun atur sebaris asas atau mod yang lebih disesuaikan susun atur. Kod yang anda bentangkan daripada Terjemahan Google menyediakan reka letak sebaris, tetapi jika anda lebih suka reka letak modal, anda boleh menggunakan kod dari tapak web tutorial html-5.

Melaksanakan Reka Letak Modal

Untuk melaksanakan reka letak modal dengan penanda SELECT dan OPTION, ikut langkah berikut:

  1. Tambah kod Terjemahan Google: Sertakan kod berikut dalam bahagian dokumen HTML anda:

    <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>
    Salin selepas log masuk
  2. Buat bekas DIV: Tambahkan DIV berikut pada dokumen HTML anda, di mana-mana sahaja anda mahu modal muncul:

    <code class="html"><div class="translate">
        <div id="google_translate_element"></div>
    </div></code>
    Salin selepas log masuk
  3. Sesuaikan reka letak (pilihan): Anda boleh menyesuaikan penampilan modal dengan menambahkan gaya CSS pada kelas .translate. Contohnya:

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

Mengalih keluar Reka Letak Sebaris Asas

Jika anda telah menambah reka letak sebaris asas, anda perlu mengalih keluarnya untuk mengelakkan konflik dengan modal susun atur. Cari kod berikut dalam bahagian dokumen HTML anda dan alih keluarnya:

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

Nota:

  • Reka letak modal memerlukan JavaScript untuk berfungsi.
  • Anda mungkin perlu melaraskan CSS gaya yang sesuai dengan reka bentuk tapak web anda.

Atas ialah kandungan terperinci Bagaimanakah saya boleh melaksanakan reka letak mod Terjemahan Google yang boleh disesuaikan pada tapak web saya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!