Tidak suka iklan? Pergi Bebas Iklan Hari ini 

Generator Templat Email HTML

PengembangTeks

IKLAN · HAPUS?

MEMASUKKAN

Proses Otomatis

Judul

Digunakan untuk email pengaturan dan tampilan pra-visualisasi. </small> </div> <div class="form-group form-group--horizontal form-group--horizontal-3"> <label for="ioEmailPreheader">Preheader</label> <div class="input-group"> <input type="text" name="ioEmailPreheader" id="ioEmailPreheader" class="form-control" placeholder="Panduan cepat mulai dan apa yang harus dilakukan selanjutnya." aria-label="Panduan cepat mulai dan apa yang harus dilakukan selanjutnya." value="Here is everything you need to get started." > </div> <small class="form-text form__help-text text-muted"> Ringkasan pendek yang ditampilkan setelah subjek di sebagian besar kotak surat. </small> </div> <div class="form-group form-group--horizontal form-group--horizontal-3"> <label for="ioEmailFont">Keluarga Font</label> <div class="input-group"> <select class="custom-select" id="ioEmailFont" name="ioEmailFont"> <option value="system" selected>Sistem / Tanpa huruf berdiri</option> <option value="helvetica" >Helvetica / Arial</option> <option value="georgia" >Georgia / Huruf berdiri</option> <option value="courier" >Courier / Monospace</option> </select> </div> </div> <div class="form-group form-group--horizontal form-group--horizontal-3"> <label for="ioEmailBrandColor">Warna Merek</label> <div class="input-group"> <input type="color" name="ioEmailBrandColor" id="ioEmailBrandColor" class="form-control" data-coloris value="#464aff" > </div> <small class="form-text form__help-text text-muted"> Digunakan untuk tombol dan penekanan. </small> </div> <div class="form-group form-group--horizontal form-group--horizontal-3"> <label for="ioEmailBgColor">Warna Latar Belakang</label> <div class="input-group"> <input type="color" name="ioEmailBgColor" id="ioEmailBgColor" class="form-control" data-coloris value="#f4f4f7" > </div> </div> <div class="form-group form-group--horizontal form-group--horizontal-3"> <label for="ioEmailTextColor">Warna teks</label> <div class="input-group"> <input type="color" name="ioEmailTextColor" id="ioEmailTextColor" class="form-control" data-coloris value="#333333" > </div> </div> <p class="h5 blue mb-3">Blok Header</p> <div class="form-group"> <div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" id="ioEmailHeaderEnabled" name="ioEmailHeaderEnabled" checked > <label class="custom-control-label" for="ioEmailHeaderEnabled">Sertakan blok header</label> </div> </div> <div class="form-group form-group--horizontal form-group--horizontal-3"> <label for="ioEmailHeaderLogo">Teks Logo</label> <div class="input-group"> <input type="text" name="ioEmailHeaderLogo" id="ioEmailHeaderLogo" class="form-control" placeholder="Nama merek atau produk Anda" aria-label="Nama merek atau produk Anda" value="Acme" data-rules="[{"name":"ioEmailHeaderEnabled","value":["on"]}]" > </div> </div> <div class="form-group form-group--horizontal form-group--horizontal-3"> <label for="ioEmailHeaderTagline">Tagline</label> <div class="input-group"> <input type="text" name="ioEmailHeaderTagline" id="ioEmailHeaderTagline" class="form-control" placeholder="Tagline pendek opsional" aria-label="Tagline pendek opsional" value="Build things that matter" data-rules="[{"name":"ioEmailHeaderEnabled","value":["on"]}]" > </div> </div> <p class="h5 blue mb-3">Blok Hero</p> <div class="form-group"> <div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" id="ioEmailHeroEnabled" name="ioEmailHeroEnabled" checked > <label class="custom-control-label" for="ioEmailHeroEnabled">Sertakan blok hero</label> </div> </div> <div class="form-group form-group--horizontal form-group--horizontal-3"> <label for="ioEmailHeroTitle">Judul Hero</label> <div class="input-group"> <input type="text" name="ioEmailHeroTitle" id="ioEmailHeroTitle" class="form-control" value="Welcome aboard, friend!" data-rules="[{"name":"ioEmailHeroEnabled","value":["on"]}]" > </div> </div> <div class="form-group"> <label for="ioEmailHeroSubtitle">Subjudul Hero</label> <div class="input-group"> <textarea class="form-control" name="ioEmailHeroSubtitle" id="ioEmailHeroSubtitle" rows="2" data-rules="[{"name":"ioEmailHeroEnabled","value":["on"]}]" >Thanks for signing up. Your account is ready and we have a few things to help you get the most out of it.</textarea> </div> </div> <p class="h5 blue mb-3">Blok Gambar</p> <div class="form-group"> <div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" id="ioEmailImageEnabled" name="ioEmailImageEnabled" > <label class="custom-control-label" for="ioEmailImageEnabled">Sertakan blok gambar</label> </div> </div> <div class="form-group form-group--horizontal form-group--horizontal-3"> <label for="ioEmailImageUrl">URL gambar</label> <div class="input-group"> <input type="url" name="ioEmailImageUrl" id="ioEmailImageUrl" class="form-control" placeholder="https://example.com/hero.png" aria-label="https://example.com/hero.png" value="https://placehold.co/560x280/png?text=Hero+Image" data-rules="[{"name":"ioEmailImageEnabled","value":["on"]}]" > </div> </div> <div class="form-group form-group--horizontal form-group--horizontal-3"> <label for="ioEmailImageAlt">Teks Alternatif Gambar</label> <div class="input-group"> <input type="text" name="ioEmailImageAlt" id="ioEmailImageAlt" class="form-control" value="Product screenshot" data-rules="[{"name":"ioEmailImageEnabled","value":["on"]}]" > </div> </div> <p class="h5 blue mb-3">Blok Teks Utama</p> <div class="form-group"> <div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" id="ioEmailBodyEnabled" name="ioEmailBodyEnabled" checked > <label class="custom-control-label" for="ioEmailBodyEnabled">Sertakan blok teks utama</label> </div> </div> <div class="form-group"> <label for="ioEmailBodyText">Teks Utama</label> <div class="input-group"> <textarea class="form-control" name="ioEmailBodyText" id="ioEmailBodyText" rows="4" data-rules="[{"name":"ioEmailBodyEnabled","value":["on"]}]" >Click the button below to finish setting up your account. It only takes a couple of minutes and you will be up and running in no time. If you have any questions, reply to this email and someone on our team will get back to you.</textarea> </div> <small class="form-text form__help-text text-muted"> Setiap baris kosong memulai paragraf baru. </small> </div> <p class="h5 blue mb-3">Blok Tombol</p> <div class="form-group"> <div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" id="ioEmailButtonEnabled" name="ioEmailButtonEnabled" checked > <label class="custom-control-label" for="ioEmailButtonEnabled">Sertakan tombol ajakan bertindak</label> </div> </div> <div class="form-group form-group--horizontal form-group--horizontal-3"> <label for="ioEmailButtonLabel">Label Tombol</label> <div class="input-group"> <input type="text" name="ioEmailButtonLabel" id="ioEmailButtonLabel" class="form-control" value="Get Started" data-rules="[{"name":"ioEmailButtonEnabled","value":["on"]}]" > </div> </div> <div class="form-group form-group--horizontal form-group--horizontal-3"> <label for="ioEmailButtonUrl">URL Tombol</label> <div class="input-group"> <input type="url" name="ioEmailButtonUrl" id="ioEmailButtonUrl" class="form-control" value="https://example.com/getting-started" data-rules="[{"name":"ioEmailButtonEnabled","value":["on"]}]" > </div> </div> <p class="h5 blue mb-3">Pembagi & Footer</p> <div class="form-group"> <div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" id="ioEmailDividerEnabled" name="ioEmailDividerEnabled" checked > <label class="custom-control-label" for="ioEmailDividerEnabled">Sertakan pembagi antara isi dan footer</label> </div> </div> <div class="form-group"> <div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" id="ioEmailFooterEnabled" name="ioEmailFooterEnabled" checked > <label class="custom-control-label" for="ioEmailFooterEnabled">Sertakan blok footer</label> </div> </div> <div class="form-group"> <label for="ioEmailFooterText">Teks Footer</label> <div class="input-group"> <textarea class="form-control" name="ioEmailFooterText" id="ioEmailFooterText" rows="2" data-rules="[{"name":"ioEmailFooterEnabled","value":["on"]}]" >You are receiving this email because you signed up at example.com.</textarea> </div> </div> <div class="form-group"> <label for="ioEmailFooterAddress">Alamat Footer</label> <div class="input-group"> <textarea class="form-control" name="ioEmailFooterAddress" id="ioEmailFooterAddress" rows="2" data-rules="[{"name":"ioEmailFooterEnabled","value":["on"]}]" >Acme Inc. - 123 Market Street, Suite 100, San Francisco, CA 94105</textarea> </div> </div> <input type="hidden" name="trp-form-language" value="id"/></form> </div> <div class="card-footer"> <form action="#" id="html-email-template-generator-in_footer" autocomplete="off" onsubmit="return false;" class="html-email-template-generator d-flex flex--rtl gap-2" data-trp-original-action="#"> <button class="btn btn-default" data-toggle="tooltip" title="Hapus masukan dan setel ulang semua opsi" data-name="ioClearInputs" onclick="IOTools.resetForm('form.form-in'); return false;" > <span class="btn__icons"> <i class="ti ti-refresh" data-no-translation=""></i> </span> Mengatur ulang </button> <input type="hidden" name="trp-form-language" value="id"/></form> </div> </div> </div> <div class="col-md-6" data-cols="6"> <div class="card sticky-top"> <div class="card-header"> <div class="h3 card-title font-weight-bold">KELUARAN</div> <div class="card-tools"> <span data-toggle="tooltip" data-placement="left" title="Alat ini bekerja langsung di perangkat atau peramban Anda. Jangan khawatir, alat ini tidak akan mengirimkan data masukan Anda melalui internet atau menyimpan apa pun di server kami." class="badge badge-pill badge-success"><i class="ti ti-device-desktop" data-no-translation=""></i> Sisi klien</span> <div class="dropdown d-inline-block ml-1"> <a href="#" role="button" data-toggle="dropdown" aria-expanded="false" aria-label="Pengaturan Alat"> <i class="ti ti-settings" data-no-translation=""><i class="ti ti-chevron-down small" data-no-translation=""></i></i> </a> <div class="dropdown-menu"><a href="#" class="dropdown-item" onclick="IOTools.toggleFullwidth();return false;"><i class="ti ti-arrow-autofit-width" data-no-translation=""></i> <span>Beralih Lebar</span></a><a href="#" class="dropdown-item" data-card-widget="maximize"><i class="ti ti-maximize" data-no-translation=""></i> <span>Masuk/Keluar Layar Penuh</span></a></div> </div> </div> </div> <div class="card-body"> <form action="#" id="html-email-template-generator-out" autocomplete="off" onsubmit="return false;" class="html-email-template-generator form-out" data-trp-original-action="#"> <div class="form-group" id="ioEmailPreview" data-name="ioEmailPreview"> <div class="email-preview-empty">Konfigurasikan blok di kiri untuk melihat pratinjau langsung di sini.</div> </div> <div class="form-group"> <label for="ioEmailHtml">HTML Email dengan CSS Inline</label> <div class="input-group"> <pre class="form-control" ><code data-name="ioEmailHtml" id="ioEmailHtml" class="language-html" data-no-translation="" ></code></pre> <div class="input-group-append"> <button class="btn btn-primary" type="button" onclick="IOTools.copyCode('#ioEmailHtml'); return false;" data-toggle="tooltip" title="Salin HTML" aria-label="Salin HTML" > <i class="ti ti-copy" data-no-translation=""></i> </button> <button class="btn btn-primary" type="button" onclick="IOTools.downloadEmailHtml(); return false;" data-toggle="tooltip" title="Unduh .html" aria-label="Unduh .html" > <i class="ti ti-download" data-no-translation=""></i> </button> </div> </div> <small class="form-text form__help-text text-muted"> HTML siap diproduksi dengan kondisi MSO dan gaya inline untuk klien email. </small> </div> <input type="hidden" name="trp-form-language" value="id"/></form> </div> </div> </div> </div> <script defer> setTimeout(() => { const highlight = () => document.querySelectorAll('pre code').forEach(el => hljs.highlightElement(el)); document.readyState === 'complete' ? highlight() : document.addEventListener('DOMContentLoaded', highlight); }, 1000); </script> <div class="aw aw-below_tool text-center mb-4"><div style="text-align: center;color: #9f9f9f;font-size: 9px;letter-spacing: 1px;line-height: 25px;height: 25px;width: 100%;">IKLAN · <a tabindex="-1" target="_blank" href="https://iotools.cloud/id/pricing/" title="Bebas Iklan" style="text-decoration: underline;color: #9f9f9f;">HAPUS?</a></div>  <style> @media only screen and (min-width: 0px) and (min-height: 0px) { div[id^="bsa-zone_1741343828950-4_123456"] { min-width: 300px; min-height: 50px; } } @media only screen and (min-width: 900px) and (min-height: 0px) { div[id^="bsa-zone_1741343828950-4_123456"] { min-width: 468px; min-height: 90px; } } </style> <div id="bsa-zone_1741343828950-4_123456"></div> </div> <div class="card card--related card--has-list"> <div class="card-header card-header--heading"> <h2 class="card-title" data-card-widget="collapse"><i class="ti ti-circles-relation" data-no-translation=""></i> Alat Terkait</h2> <div class="card-tools"> <button type="button" class="btn btn-tool" data-card-widget="collapse" aria-label="Alihkan Judul" title="Beralih"> <i class="fas fa-minus"></i> </button> </div> </div> <div class="card-body pb-md-3 pt-0"> <p>Beberapa alat lain serupa dengan <b>Generator Templat Email HTML</b> yang mungkin berguna bagi Anda.</p> <div class="row"> <div class="col col-lg-4"> <div class="card card--tool card--tool-compact elevation-0 border card--tool-has-icon"> <a href="https://iotools.cloud/id/tool/css-email-inliner/" class="card-image card-image--icon" aria-label="Pengaturan Email CSS (Pengaturan Atribut Gaya)"> <i class="ti blue" style="--icon-hex:'\eae5'" data-no-translation=""></i> </a> <a class="card-body" href="https://iotools.cloud/id/tool/css-email-inliner/"> <h3 class="h5 mb-0 black">Pengaturan Email CSS (Pengaturan Atribut Gaya)<span class="io-badge io-badge--new" style="background-color: #f59e0b30;color:#f59e0b" data-toggle="tooltip" title="Baru" data-content="New"></span></h3> </a> <div class="card-footer text-muted text-xs"> <div class="d-flex"> <span data-tag-slug="developer" class="badge badge-pill mr-2 tag-ico tag-ico--orange"><i class="ti ti-tag" data-no-translation=""></i>Pengembang</span><span data-tag-slug="text" class="badge badge-pill mr-2 tag-ico tag-ico--green"><i class="ti ti-tag" data-no-translation=""></i>Teks</span> </div> <span class="io-compact-bookmark ml-auto position-relative" title="Penanda buku"> <span class="io-compact-bookmark__count" data-favorites-post-count-id="319352" data-siteid></span> <button class="io-favorite-button" aria-label="Penanda buku" data-toggle="modal" data-target="#io-modal-login"><i class="sf-icon-bookmark"></i></button> </span> </div> </div> </div> <div class="col col-lg-4"> <div class="card card--tool card--tool-compact elevation-0 border card--tool-has-icon"> <a href="https://iotools.cloud/id/tool/zig-language-formatter/" class="card-image card-image--icon" aria-label="Pengatur Format Bahasa Zig"> <i class="ti blue" style="--icon-hex:'\ea77'" data-no-translation=""></i> </a> <a class="card-body" href="https://iotools.cloud/id/tool/zig-language-formatter/"> <h3 class="h5 mb-0 black">Pengatur Format Bahasa Zig<span class="io-badge io-badge--new" style="background-color: #f59e0b30;color:#f59e0b" data-toggle="tooltip" title="Baru" data-content="New"></span></h3> </a> <div class="card-footer text-muted text-xs"> <div class="d-flex"> <span data-tag-slug="developer" class="badge badge-pill mr-2 tag-ico tag-ico--orange"><i class="ti ti-tag" data-no-translation=""></i>Pengembang</span><span data-tag-slug="text" class="badge badge-pill mr-2 tag-ico tag-ico--green"><i class="ti ti-tag" data-no-translation=""></i>Teks</span> </div> <span class="io-compact-bookmark ml-auto position-relative" title="Penanda buku"> <span class="io-compact-bookmark__count" data-favorites-post-count-id="317623" data-siteid></span> <button class="io-favorite-button" aria-label="Penanda buku" data-toggle="modal" data-target="#io-modal-login"><i class="sf-icon-bookmark"></i></button> </span> </div> </div> </div> <div class="col col-lg-4"> <div class="card card--tool card--tool-compact elevation-0 border card--tool-has-icon"> <a href="https://iotools.cloud/id/tool/apache-avro-schema-formatter-validator/" class="card-image card-image--icon" aria-label="Pengaturan dan Validasi Schema Apache Avro"> <i class="ti blue" style="--icon-hex:'\ebcc'" data-no-translation=""></i> </a> <a class="card-body" href="https://iotools.cloud/id/tool/apache-avro-schema-formatter-validator/"> <h3 class="h5 mb-0 black">Formatr dan Validator Skema Apache Avro<span class="io-badge io-badge--new" style="background-color: #f59e0b30;color:#f59e0b" data-toggle="tooltip" title="Baru" data-content="New"></span></h3> </a> <div class="card-footer text-muted text-xs"> <div class="d-flex"> <span data-tag-slug="data" class="badge badge-pill mr-2 tag-ico tag-ico--gray"><i class="ti ti-tag" data-no-translation=""></i>Data</span><span data-tag-slug="developer" class="badge badge-pill mr-2 tag-ico tag-ico--orange"><i class="ti ti-tag" data-no-translation=""></i>Pengembang</span> </div> <span class="io-compact-bookmark ml-auto position-relative" title="Penanda buku"> <span class="io-compact-bookmark__count" data-favorites-post-count-id="315350" data-siteid></span> <button class="io-favorite-button" aria-label="Penanda buku" data-toggle="modal" data-target="#io-modal-login"><i class="sf-icon-bookmark"></i></button> </span> </div> </div> </div> </div> </div> </div> <div class="card generic-content" id="tool-doc"> <div class="card-header card-header--heading"> <h2 class="card-title" data-card-widget="collapse"><i class="ti ti-book" data-no-translation=""></i> Memandu</h2> <div class="card-tools"> <button type="button" class="btn btn-tool" data-card-widget="collapse" aria-label="Alihkan Judul" title="Beralih"> <i class="fas fa-minus"></i> </button> </div> </div> <div class="card-body pt-0"> <div class="toc-wrapper position-relative" style="overflow: hidden;border-radius: 10px"> <div class="position-absolute toc-image"> <img decoding="async" class="exclude--lazy-load" src="https://iotools.cloud/wp-content/uploads/2026/06/html-email-template-generator-featured-400x512.jpg" alt="Generator Template Email HTML" title="Generator Template Email HTML 1"> </div> <div class="toc-content position-relative" style="z-index: 1"> </div> </div> <h3 class="wp-block-heading">Generator Templat Email HTML</h3> <p>Buat email HTML yang responsif dengan CSS inline melalui penggabungan blok modular – header, hero, gambar, teks tubuh, tombol, pembagi, dan footer – dengan tampilan desktop dan mobile yang langsung. Output menggunakan tata letak berbasis tabel dan kondisional MSO sehingga tampilan konsisten di Outlook, Gmail, Apple Mail, dan klien email lainnya.</p> <h3 class="wp-block-heading">Cara Penggunaan</h3> <ul class="wp-block-list"> <li>Tetapkan baris subjek, preheader, keluarga font, merek, warna latar belakang, dan warna teks di bagian atas formulir.</li> <li>Aktifkan blok yang ingin Anda sertakan dan isi konten per-blok – logo dan tagline, judul hero dan subjudul, URL gambar, paragraf tubuh, tombol ajak bertindak, pembagi, dan footer.</li> <li>Perhatikan perubahan tampilan langsung di kanan. Beralih antara lebar desktop dan mobile untuk memverifikasi kedua tampilan.</li> <li>Klik <strong>Salin HTML</strong> untuk mengambil HTML dengan CSS inline, atau <strong>Unduh .html</strong> untuk menyimpannya sebagai file siap dipasang ke dalam sistem pengiriman email (ESP), pengirim transaksi, atau alat kampanye.</li> </ul> <h3 class="wp-block-heading">Fitur</h3> <ul class="wp-block-list"> <li><strong>Blok modular</strong> – Aktifkan atau nonaktifkan secara terpisah header, hero, gambar, teks tubuh, tombol, pembagi, dan footer.</li> <li><strong>Output CSS inline</strong> – Setiap gaya disisipkan secara langsung dan berbasis tabel, sehingga tidak ada stylesheet eksternal dan tidak ada tampilan yang rusak di Outlook atau Gmail.</li> <li><strong>Kondisional MSO</strong> – Markup khusus Outlook (Word engine) dimasukkan untuk mempertahankan lebar dan jarak di Windows Outlook.</li> <li><strong>Pratinjau langsung</strong> – Tampilan desktop (600px) dan mobile (360px) dihasilkan dalam frame yang terisolasi (sandboxed iframe).</li> <li><strong>Kustomisasi merek</strong> – Pilihan warna untuk akent, latar belakang, dan teks, ditambah empat preset font stack.</li> <li><strong>Ekspor satu klik</strong> – Salin HTML ke clipboard atau unduh versi siap dikirim <code data-no-translation="">.html</code> file.</li> <li><strong>Berjalan di browser Anda</strong> – Tidak ada yang diunggah atau disimpan. Penghasilan terjadi sepenuhnya di sisi klien.</li> </ul> </p> </div> </div> <div class="card generic-content" id="tool-faq"> <div class="card-header card-header--heading"> <h3 class="card-title" data-card-widget="collapse"><i class="ti" data-no-translation=""></i> Tanya Jawab Umum</h3> <div class="card-tools"> <button type="button" class="btn btn-tool" data-card-widget="collapse" aria-label="Alihkan Judul" title="Beralih"> <i class="fas fa-minus"></i> </button> </div> </div> <div class="card-body pt-0"> <div id="rank-math-faq" class="rank-math-block"> <ol class="rank-math-list"> <li id="faq-question-1780668428000" class="rank-math-list-item"> <h4 class="rank-math-question">Mengapa email HTML menggunakan tabel alih-alih tata letak modern seperti flexbox atau grid?</h4> <div class="rank-math-answer"> <p>Banyak klien email – terutama Microsoft Outlook di Windows – menampilkan pesan dengan mesin Word, yang memiliki dukungan CSS yang sangat terbatas dan mengabaikan flexbox, grid, serta sebagian besar aturan posisi. Tabel HTML yang saling bersarang tetap menjadi satu-satunya sistem tata letak yang dapat diprediksi di seluruh klien, termasuk Gmail, Outlook, Apple Mail, Yahoo, dan email web mobile. Karena itu, email produksi tetap terlihat seperti markup web dari tahun 2003: ini adalah nilai terendah yang bertahan di setiap mesin tampilan.</p> </div> </li> <li id="faq-question-1780668428001" class="rank-math-list-item"> <h4 class="rank-math-question">Apa itu kondisional MSO dan mengapa email membutuhkannya?</h4> <div class="rank-math-answer"> <p>Kondisional MSO adalah komentar HTML yang hanya diparsing oleh Microsoft Outlook (mesin Word). Mereka terlihat seperti <code data-no-translation=""></code> dan memungkinkan Anda mengirim markup atau gaya yang ditargetkan khusus untuk Outlook tanpa memengaruhi klien lain. Mereka umum digunakan untuk menetapkan lebar kontainer tetap dengan tabel fiktif, memperbaiki VML untuk tombol dan latar belakang, serta menonaktifkan fitur yang ditampilkan secara salah oleh Outlook. Tanpa kondisional ini, tata letak seringkali runtuh atau memanjang secara tidak nyaman di Outlook bahkan ketika tampilan sempurna di tempat lain.</p> </div> </li> <li id="faq-question-1780668428002" class="rank-math-list-item"> <h4 class="rank-math-question">Mengapa CSS email harus disisipkan alih-alih dideklarasikan dalam tag style?</h4> <div class="rank-math-answer"> <p>Beberapa klien email utama – terutama Gmail sejarahnya – menghapus <code data-no-translation=""><style></code> blok atau menerapkannya secara tidak konsisten, terutama di perangkat mobile dan pesan yang dikirim ulang. Sisipan memindahkan setiap aturan ke elemen yang ditargetkan melalui atribut <code data-no-translation="">style</code> , yang dihormati oleh setiap klien. Kompromi ini adalah kepadatan dan pemeliharaan yang lebih sulit, yang sebabnya alat bantu – termasuk generator ini – ada untuk menyisipkan gaya secara otomatis dari template tingkat lebih tinggi.</p> </div> </li> <li id="faq-question-1780668428003" class="rank-math-list-item"> <h4 class="rank-math-question">Apa itu preheader dan bagaimana preheader memengaruhi tingkat pembukaan email?</h4> <div class="rank-math-answer"> <p>Preheader adalah potongan singkat teks yang ditampilkan setelah baris subjek di sebagian besar tampilan kotak surat. Secara default, ini diambil dari teks pertama yang terlihat di tubuh email, yang sering kali adalah salam atau boilerplate yang membuang slot tersebut. Menyisipkan elemen preheader tersembunyi di bagian atas HTML memungkinkan Anda mengontrol tepatnya apa yang muncul di sana. Preheader yang ditulis dengan baik melengkapi baris subjek dan dikorelasikan dengan tingkat pembukaan yang lebih tinggi dalam sebagian besar uji A/B yang dijalankan oleh penyedia layanan email utama.</p> </div> </li> </ol> </div> </div> </div> </div> <div class="col aw--col-300 side-content"> <a href="https://iotools.cloud/id/pricing/" class="info-box mb-3" style="background-color: var(--io-color-blue, #464aff);letter-spacing:0;min-height:70px;padding-top:5px;"> <div class="info-box-content"> <span class="info-box-text text-sm white">Ingin bebas iklan?</span> <span class="info-box-number white" style="font-weight: 500;"> <span class="white"><u>Bebas Iklan Hari Ini</u></span> </span> </div> <span class="info-box-icon white" style="width:50px"> <i class="ti" data-no-translation=""></i> </span> </a> <div class="card card-body pb-0"> <h2 class="h5 blue mb-1"> <i class="ti" data-no-translation=""></i> Instal Ekstensi Kami </h2> <p class="mb-2"> Tambahkan alat IO ke browser favorit Anda untuk akses instan dan pencarian lebih cepat </p> <div class="text-center pt-1 pb-3"> <div id="io-browser-extension-d41d8cd9" class="d-none d-lg-block"> <div class="io-browser-extension-container d-flex justify-content-center"> <a href="https://chromewebstore.google.com/detail/io-tools-quick-access/ngfigjoligkblljadlbojinhoiofkdld" target="_blank" rel="noopener" class="io-browser-extension-btn" data-toggle="tooltip" data-placement="top" title="Tambahkan ke Chrome" style="cursor: pointer;"> Ke <img src="https://iotools.cloud/wp-content/themes/iotools/assets/images/browsers/chrome.svg" width="18" height="18" alt="Ekstensi Chrome" class="img-fluid"> </a> <a href="https://microsoftedge.microsoft.com/addons/detail/io-tools-quick-access/daapkanhnnjodjpobfmkopolagbkcccb" target="_blank" rel="noopener" class="io-browser-extension-btn" data-toggle="tooltip" data-placement="top" title="Tambahkan ke Edge" style="cursor: pointer;"> Ke <img src="https://iotools.cloud/wp-content/themes/iotools/assets/images/browsers/edge.svg" width="18" height="18" alt="Ekstensi Tepi" class="img-fluid"> </a> <a href="https://addons.mozilla.org/en-US/firefox/addon/iotools-quick-access/" target="_blank" rel="noopener" class="io-browser-extension-btn" data-toggle="tooltip" data-placement="top" title="Tambahkan ke Firefox" style="cursor: pointer;"> Ke <img src="https://iotools.cloud/wp-content/themes/iotools/assets/images/browsers/firefox.svg" width="18" height="18" alt="Ekstensi Firefox" class="img-fluid"> </a> <a href="https://addons.opera.com/en/extensions/details/io-tools-quick-access/" target="_blank" rel="noopener" class="io-browser-extension-btn" data-toggle="tooltip" data-placement="top" title="Tambahkan ke Opera" style="cursor: pointer;"> Ke <img src="https://iotools.cloud/wp-content/themes/iotools/assets/images/browsers/opera.svg" width="18" height="18" alt="Ekstensi Opera" class="img-fluid"> </a> <style> #io-browser-extension-d41d8cd9 .io-browser-extension-container { gap: 10px; margin-left: -1px; } #io-browser-extension-d41d8cd9 .io-browser-extension-btn { display: flex; padding: 3px 5px 1px 6px;; background-color: white; border: 1px solid #dee2e6; border-radius: 12px; text-decoration: none; transition: all 0.2s ease; font-size: 12px;; color: #000!important; align-items: center; justify-content: center; gap: 2px; flex-grow: 1;; } #io-browser-extension-d41d8cd9 .io-browser-extension-btn img { transform: translateY(-1px); } #io-browser-extension-d41d8cd9 .io-browser-extension-btn:hover { background-color: #f8f9fa; border-color: #ced4da; color: #333; text-decoration: none; } </style> </div> </div> </div> </div> <div class="card card-body pb-0"> <h2 class="h5 blue mb-1"> <i class="ti" data-no-translation="">恵</i><a href="https://scoreboard.iotools.cloud/" target="_blank" rel="noopener"> Papan Skor Telah Tiba!</a> </h2> <p class="mb-2"> <a href="https://scoreboard.iotools.cloud/" target="_blank" rel="noopener">Papan Skor</a> adalah cara yang menyenangkan untuk melacak permainan Anda, semua data disimpan di browser Anda. Lebih banyak fitur akan segera hadir! </p> </div> <div class="aw aw-side_content_1_desktop text-center mb-4"><div style="text-align: center;color: #9f9f9f;font-size: 9px;letter-spacing: 1px;line-height: 25px;height: 25px;width: 100%;">IKLAN · <a tabindex="-1" target="_blank" href="https://iotools.cloud/id/pricing/" title="Bebas Iklan" style="text-decoration: underline;color: #9f9f9f;">HAPUS?</a></div>  <style> @media only screen and (min-width: 0px) and (min-height: 0px) { div[id^="bsa-zone_1741342473519-9_123456"] { min-width: 0px; min-height: 0px; } } @media only screen and (min-width: 1370px) and (min-height: 0px) { div[id^="bsa-zone_1741342473519-9_123456"] { min-width: 200px; min-height: 250px; } } </style> <div id="bsa-zone_1741342473519-9_123456"></div> </div> <div class="card card-body pb-0"> <div class="d-flex justify-content-between align-items-center mb-3"> <h2 class="h5 blue mb-0"><i class="ti" data-no-translation=""></i> Alat Wajib Coba</h2> <a class="text-muted small blue" href="https://iotools.cloud/id/tags/must-try/"><u>Lihat semua</u></a> </div> <div class="card card--tool card--tool-compact card--tool-compact--mini elevation-0 border card--tool-has-icon"> <a href="https://iotools.cloud/id/tool/imagekit/background-remover/" class="card-image card-image--icon" aria-label="Penghapus Latar Belakang"> <i class="ti blue" style="--icon-hex:'\f360'" data-no-translation=""></i> </a> <span class="card-image card-image--icon" data-toggle="tooltip" title="Perangkat: ImageKit" ><i class="ti blue" style="--icon-hex:'\f360'" data-no-translation=""></i></span> <a class="card-body flex-row align-items-center h6 mb-0 black" href="https://iotools.cloud/id/tool/imagekit/background-remover/"> Penghapus Latar Belakang </a> </div> <div class="card card--tool card--tool-compact card--tool-compact--mini elevation-0 border card--tool-has-icon"> <a href="https://iotools.cloud/id/tool/ai-image-editor/" class="card-image card-image--icon" aria-label="Editor Gambar AI"> <i class="ti blue" style="--icon-hex:'\fa32'" data-no-translation=""></i> </a> <a class="card-body flex-row align-items-center h6 mb-0 black" href="https://iotools.cloud/id/tool/ai-image-editor/"> Editor Gambar AI<span class="io-badge io-badge--toolset" style="background-color: #92ff9580;color:#10a581" data-toggle="tooltip" title="Perangkat" data-content="Toolset"></span> </a> </div> <div class="card card--tool card--tool-compact card--tool-compact--mini elevation-0 border card--tool-has-icon"> <a href="https://iotools.cloud/id/tool/ai-image-generator/" class="card-image card-image--icon" aria-label="Generator Gambar AI"> <i class="ti blue" style="--icon-hex:'\ffb0'" data-no-translation=""></i> </a> <a class="card-body flex-row align-items-center h6 mb-0 black" href="https://iotools.cloud/id/tool/ai-image-generator/"> Generator Gambar AI </a> </div> <div class="card card--tool card--tool-compact card--tool-compact--mini elevation-0 border card--tool-has-icon"> <a href="https://iotools.cloud/id/tool/imagekit/" class="card-image card-image--icon" aria-label="Kit Gambar"> <i class="ti blue" style="--icon-hex:'\f360'" data-no-translation=""></i> </a> <a class="card-body flex-row align-items-center h6 mb-0 black" href="https://iotools.cloud/id/tool/imagekit/"> Kit Gambar<span class="io-badge io-badge--toolset" style="background-color: #92ff9580;color:#10a581" data-toggle="tooltip" title="Perangkat" data-content="Toolset"></span> </a> </div> <div class="card card--tool card--tool-compact card--tool-compact--mini elevation-0 border card--tool-has-icon"> <a href="https://iotools.cloud/id/tool/pdf-converter/compress-pdf/" class="card-image card-image--icon" aria-label="Kompresor PDF"> <i class="ti blue" style="--icon-hex:'\ed44'" data-no-translation=""></i> </a> <span class="card-image card-image--icon" data-toggle="tooltip" title="Toolset: Konverter PDF" ><i class="ti blue" style="--icon-hex:'\f7ac'" data-no-translation=""></i></span> <a class="card-body flex-row align-items-center h6 mb-0 black" href="https://iotools.cloud/id/tool/pdf-converter/compress-pdf/"> Kompresor PDF </a> </div> <div class="card card--tool card--tool-compact card--tool-compact--mini elevation-0 border card--tool-has-icon"> <a href="https://iotools.cloud/id/tool/image-converter/" class="card-image card-image--icon" aria-label="Konverter Gambar"> <i class="ti blue" style="--icon-hex:'\fd9f'" data-no-translation=""></i> </a> <a class="card-body flex-row align-items-center h6 mb-0 black" href="https://iotools.cloud/id/tool/image-converter/"> Konverter Gambar<span class="io-badge io-badge--toolset" style="background-color: #92ff9580;color:#10a581" data-toggle="tooltip" title="Perangkat" data-content="Toolset"></span> </a> </div> <div class="card card--tool card--tool-compact card--tool-compact--mini elevation-0 border card--tool-has-icon"> <a href="https://iotools.cloud/id/tool/one-time-link/" class="card-image card-image--icon" aria-label="Tautan Satu Kali"> <i class="ti blue" style="--icon-hex:'\f7bd'" data-no-translation=""></i> </a> <a class="card-body flex-row align-items-center h6 mb-0 black" href="https://iotools.cloud/id/tool/one-time-link/"> Tautan Satu Kali </a> </div> </div> <div class="aw aw-side_content_2_desktop text-center mb-4"><div style="text-align: center;color: #9f9f9f;font-size: 9px;letter-spacing: 1px;line-height: 25px;height: 25px;width: 100%;">IKLAN · <a tabindex="-1" target="_blank" href="https://iotools.cloud/id/pricing/" title="Bebas Iklan" style="text-decoration: underline;color: #9f9f9f;">HAPUS?</a></div>  <style> @media only screen and (min-width: 0px) and (min-height: 0px) { div[id^="bsa-zone_1741342696932-0_123456"] { min-width: 0px; min-height: 0px; } } @media only screen and (min-width: 1370px) and (min-height: 0px) { div[id^="bsa-zone_1741342696932-0_123456"] { min-width: 200px; min-height: 250px; } } </style> <div id="bsa-zone_1741342696932-0_123456"></div> </div> <div class="card card-body pb-0"> <div class="d-flex justify-content-between align-items-center mb-3"> <h2 class="h5 blue mb-0"> <i class="ti" data-no-translation=""></i> Pendatang baru </h2> <a class="text-muted small blue" href="https://iotools.cloud/id/tools/"><u>Lihat semua</u></a> </div> <div class="card card--tool card--tool-compact card--tool-compact--mini elevation-0 border card--tool-has-icon"> <a href="https://iotools.cloud/id/tool/css-email-inliner/" class="card-image card-image--icon" aria-label="Pengaturan Email CSS (Pengaturan Atribut Gaya)"> <i class="ti blue" style="--icon-hex:'\eae5'" data-no-translation=""></i> </a> <a class="card-body flex-row align-items-center h6 mb-0 black" href="https://iotools.cloud/id/tool/css-email-inliner/"> Pengaturan Email CSS (Pengaturan Atribut Gaya) </a> </div> <div class="card card--tool card--tool-compact card--tool-compact--mini elevation-0 border card--tool-has-icon"> <a href="https://iotools.cloud/id/tool/dns-record-ttl-expiry-calculator/" class="card-image card-image--icon" aria-label="Kalkulator Expired TTL Rekam DNS"> <i class="ti blue" style="--icon-hex:'\f316'" data-no-translation=""></i> </a> <a class="card-body flex-row align-items-center h6 mb-0 black" href="https://iotools.cloud/id/tool/dns-record-ttl-expiry-calculator/"> Kalkulator Expired TTL Rekam DNS </a> </div> <div class="card card--tool card--tool-compact card--tool-compact--mini elevation-0 border card--tool-has-icon"> <a href="https://iotools.cloud/id/tool/geojson-wkt-converter/" class="card-image card-image--icon" aria-label="Pengubah Data Spatial GeoJSON ↔ WKT"> <i class="ti blue" style="--icon-hex:'\f38e'" data-no-translation=""></i> </a> <a class="card-body flex-row align-items-center h6 mb-0 black" href="https://iotools.cloud/id/tool/geojson-wkt-converter/"> Pengubah Data Spatial GeoJSON ↔ WKT </a> </div> <div class="card card--tool card--tool-compact card--tool-compact--mini elevation-0 border card--tool-has-icon"> <a href="https://iotools.cloud/id/tool/weighted-grade-average-calculator/" class="card-image card-image--icon" aria-label="Kalkulator Rata-rata Nilai Berbobot"> <i class="ti blue" style="--icon-hex:'\eb67'" data-no-translation=""></i> </a> <a class="card-body flex-row align-items-center h6 mb-0 black" href="https://iotools.cloud/id/tool/weighted-grade-average-calculator/"> Kalkulator Rata-rata Nilai Berbobot </a> </div> <div class="card card--tool card--tool-compact card--tool-compact--mini elevation-0 border card--tool-has-icon"> <a href="https://iotools.cloud/id/tool/jwk-set-generator/" class="card-image card-image--icon" aria-label="Penghasil Set Kunci Web JSON (JWK)"> <i class="ti blue" style="--icon-hex:'\eac7'" data-no-translation=""></i> </a> <a class="card-body flex-row align-items-center h6 mb-0 black" href="https://iotools.cloud/id/tool/jwk-set-generator/"> Penghasil Set Kunci Web JSON (JWK) </a> </div> <div class="card card--tool card--tool-compact card--tool-compact--mini elevation-0 border card--tool-has-icon"> <a href="https://iotools.cloud/id/tool/zig-language-formatter/" class="card-image card-image--icon" aria-label="Pengatur Format Bahasa Zig"> <i class="ti blue" style="--icon-hex:'\ea77'" data-no-translation=""></i> </a> <a class="card-body flex-row align-items-center h6 mb-0 black" href="https://iotools.cloud/id/tool/zig-language-formatter/"> Pengatur Format Bahasa Zig </a> </div> <div class="card card--tool card--tool-compact card--tool-compact--mini elevation-0 border card--tool-has-icon"> <a href="https://iotools.cloud/id/tool/sewing-fabric-yardage-calculator/" class="card-image card-image--icon" aria-label="Kalkulator Pengukuran Benang dan Kain"> <i class="ti blue" style="--icon-hex:'\f507'" data-no-translation=""></i> </a> <a class="card-body flex-row align-items-center h6 mb-0 black" href="https://iotools.cloud/id/tool/sewing-fabric-yardage-calculator/"> Kalkulator Pengukuran Kain dan Pemotongan Kain </a> </div> <p class="small text-muted mb-3 text-center"><b>Memperbarui:</b> Kita <a href="https://iotools.cloud/id/tool/css-email-inliner/" class="text-muted"><u>alat terbaru</u></a> ditambahkan pada 15 Juni 2026</p> </div> <div class="aw aw-dashboard_sidebar text-center mb-4"><div style="text-align: center;color: #9f9f9f;font-size: 9px;letter-spacing: 1px;line-height: 25px;height: 25px;width: 100%;">IKLAN · <a tabindex="-1" target="_blank" href="https://iotools.cloud/id/pricing/" title="Bebas Iklan" style="text-decoration: underline;color: #9f9f9f;">HAPUS?</a></div>  <style> @media only screen and (min-width: 0px) and (min-height: 0px) { div[id^="bsa-zone_1741781122639-0_123456"] { min-width: 300px; min-height: 50px; } } @media only screen and (min-width: 900px) and (min-height: 0px) { div[id^="bsa-zone_1741781122639-0_123456"] { min-width: 200px; min-height: 200px; } } </style> <div id="bsa-zone_1741781122639-0_123456"></div> </div> <div class="card card-body io-no-scrollbar" style="max-height:700px;"> <h2 class="h5 blue mb-3"><i class="ti" data-no-translation=""></i> Pojok Berita <small class="black">dengan Sorotan Teknologi</small></h2> <div data-load-more-id="side-news" class="exclude--translation" data-no-translation=""> <div class="io-loading mb-3"> <div class="io-loading__item title"></div> <div class="io-loading__item"></div> <div class="io-loading__item"></div> <div class="io-loading__item"></div> </div> <div class="io-loading mb-3"> <div class="io-loading__item title"></div> <div class="io-loading__item"></div> <div class="io-loading__item"></div> <div class="io-loading__item"></div> </div> <div class="io-loading mb-3"> <div class="io-loading__item title"></div> <div class="io-loading__item"></div> <div class="io-loading__item"></div> <div class="io-loading__item"></div> </div> </div> <script class="exclude--lazy-load" async> // Immediately load news from session storage document.querySelectorAll('[data-load-more-id="side-news"]').forEach(function(element) { const dailyNewsHtml = sessionStorage.getItem(`dailyNewsHtml`); if (dailyNewsHtml) { element.innerHTML = dailyNewsHtml; } }); </script> <p class="text-center"> <button class="btn--load-more" data-load-more="{"target":"side-news","postType":"wprss_feed_item","offset":3}">Tunjukkan Lebih Banyak!</button> </p> </div> <h2 class="h5 blue text-right mt-5"><i class="ti ti-heart-handshake" data-no-translation=""></i> Terlibat</h2> <div class="text-right mb-4"> <p>Bantu kami untuk terus menyediakan alat gratis yang berharga</p> <div class="d-lg-flex justify-content-end"> <a href="https://buymeacoffee.com/iotools" target="_blank" rel="noopener"><img width="180" height="50" src="https://iotools.cloud/wp-content/themes/iotools/assets/images/yellow-button.png" alt="Belikan aku kopi" class="img-fluid"></a> </div> </div> <div class="aw aw-side_content_sticky_desktop sticky-top text-center"><div style="text-align: center;color: #9f9f9f;font-size: 9px;letter-spacing: 1px;line-height: 25px;height: 25px;width: 100%;">IKLAN · <a tabindex="-1" target="_blank" href="https://iotools.cloud/id/pricing/" title="Bebas Iklan" style="text-decoration: underline;color: #9f9f9f;">HAPUS?</a></div>  <style> @media only screen and (min-width: 0px) and (min-height: 0px) { div[id^="bsa-zone_1741342751312-1_123456"] { min-width: 0px; min-height: 0px; } } @media only screen and (min-width: 1370px) and (min-height: 0px) { div[id^="bsa-zone_1741342751312-1_123456"] { min-width: 120px; min-height: 600px; } } </style> <div id="bsa-zone_1741342751312-1_123456"></div> </div> </div> </div> </div> </main>  <footer class="main-footer text-sm text-center text-xl-left d-flex flex-xl-nowrap flex-column-reverse flex-xl-row"> <span>Hak Cipta © 2026 <a href="https://iotools.cloud/id/" class="exclude--translation" data-no-translation=""><u>iotools.cloud</u></a>. Seluruh hak cipta.</span>  <ul class="navbar-nav d-flex flex-row ml-xl-auto justify-content-center flex-wrap"> <li class="nav-item"> <a href="https://iotools.cloud/id/" class="text-muted">Rumah</a> </li> <li class="nav-item"> <a href="https://iotools.cloud/id/about/" class="text-muted">Tentang</a> </li> <li class="nav-item"> <a href="https://iotools.cloud/id/contact/" class="text-muted">Kontak</a> </li> <li class="nav-item"> <a href="https://iotools.cloud/id/pricing/" class="text-muted">Harga</a> </li> <li class="nav-item blue mb-2 mb-xl-0"> • </li> <li class="nav-item"><a href="https://iotools.cloud/id/community-tools/" rel="nofollow" class="text-muted">Alat Komunitas</a></li> <li class="nav-item"><a href="https://iotools.cloud/id/journal/" class="text-muted">Pusat Jurnal</a></li> <li class="nav-item blue mb-2 mb-xl-0"> • </li> <li class="nav-item"><a href="https://iotools.cloud/id/privacy-policy/" class="text-muted">Kebijakan pribadi</a></li> <li class="nav-item"><a href="https://iotools.cloud/id/terms-of-service/" class="text-muted">Ketentuan Layanan</a></li> <li class="nav-item"><a href="https://iotools.statuspage.io/" target="_blank" rel="noopener" class="text-muted">Status Sistem</a></li> <li class="nav-item"><a href="https://iotools.cloud/id/sitemap/" class="text-muted">Peta Situs</a></li> <li class="nav-item blue mb-2 mb-xl-0 d-none d-lg-block"> • </li> <li class="d-block w-100 d-lg-none"></li> <li class="nav-item"><a href="https://x.com/io_tools" target="_blank" rel="noopener" class="text-muted" aria-label="X"><i class="ti ti-brand-x" data-no-translation=""></i></a></li> <li class="nav-item"><a href="https://www.facebook.com/iotools.cloud" target="_blank" rel="noopener" class="text-muted" aria-label="Facebook"><i class="ti" data-no-translation=""></i></a></li> <li class="nav-item"><a href="https://www.youtube.com/@io-tools" target="_blank" rel="noopener" class="text-muted" aria-label="Youtube"><i class="ti" data-no-translation=""></i></a></li> <li class="nav-item"><a href="https://www.tiktok.com/@iotools" target="_blank" rel="noopener" class="text-muted" aria-label="TIK tok"><i class="ti" data-no-translation=""></i></a></li> <li class="nav-item"><a href="https://www.linkedin.com/company/io-tools/" target="_blank" rel="noopener" class="text-muted" aria-label="terkait"><i class="ti ti-brand-linkedin" data-no-translation=""></i></a></li> <li class="nav-item"><a href="https://www.producthunt.com/products/io-tools" target="_blank" rel="noopener" class="text-muted" aria-label="perburuan produk"><i class="ti ti-brand-producthunt" data-no-translation=""></i></a></li> </ul> </footer> <div class="bsa-gap d-none d-xl-block" style="height: 110px;"> </div> <div class="bsa-gap d-xl-none" style="height: 60px;"> </div> <style> body:has(>.bsa_fixed-leaderboard[style*="display: none"]) .bsa-gap { display: none !important; } </style> </div> <template id="tp-language" data-tp-language="id_ID"></template><script type="speculationrules"> {"prerender":[{"source":"document","where":{"and":[{"href_matches":"/id/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/iotools/*","/id/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prerender, .no-prerender a"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"moderate"}]} </script> <style> #ioEmailHtml { font-size: 12px; line-height: 1.5; max-height: 320px; overflow: auto; } #ioEmailPreview { margin-bottom: 14px; border: 1px solid #ced4da; border-radius: 12px; background-color: #fff; overflow: hidden; min-height: 360px; } #ioEmailPreview .email-preview-empty { color: #6c757d; font-style: italic; padding: 24px 18px; text-align: center; font-family: var(--bs-font-sans-serif), sans-serif; } #ioEmailPreview .email-preview-header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background-color: #f8f9fa; border-bottom: 1px solid #e9ecef; font-family: var(--bs-font-sans-serif), sans-serif; font-size: 0.8rem; color: #495057; } #ioEmailPreview .email-preview-header strong { font-weight: 600; color: #212529; } #ioEmailPreview .email-preview-toolbar { margin-left: auto; display: flex; gap: 4px; } #ioEmailPreview .email-preview-btn { font-size: 0.75rem; padding: 2px 8px; border: 1px solid #adb5bd; background-color: #fff; border-radius: 4px; cursor: pointer; color: #212529; } #ioEmailPreview .email-preview-btn:hover { background-color: #f1f3f5; } #ioEmailPreview .email-preview-btn.is-active { background-color: #464aff; border-color: #464aff; color: #fff; } #ioEmailPreview iframe { display: block; width: 100%; border: 0; background-color: #fff; transition: max-width 0.15s ease; } #ioEmailPreview .email-preview-stage { background-color: #eef0f3; padding: 12px; } #ioEmailPreview .email-preview-stage iframe { margin: 0 auto; background-color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.08); } </style> <script type="text/javascript" src="https://iotools.cloud/wp-content/plugins/duracelltomi-google-tag-manager/dist/js/gtm4wp-form-move-tracker.js?ver=1.22.3" id="gtm4wp-form-move-tracker-js"></script> <script type="text/javascript" src="https://iotools.cloud/wp-content/plugins/translatepress-multilingual/assets/js/trp-clickable-ls.js?ver=2.9.12" id="trp-clickable-ls-js-js"></script> <script type="text/javascript" src="https://iotools.cloud/wp-includes/js/underscore.min.js?ver=1.13.7" id="underscore-js"></script> <script type="text/javascript" id="theme-js-js-extra"> /* <![CDATA[ */ var IOTools = {"ajaxUrl":"https://iotools.cloud/wp-admin/admin-ajax.php","assetsUrl":"https://iotools.cloud/wp-content/themes/iotools/assets/","homeUrl":"https://iotools.cloud/id/","isMobile":"","currentPostId":"314379","turnstileSiteKey":"0x4AAAAAABroE5_aI0mWeJ_q","algoliaAppId":"1P44EFZA6Z","algoliaApiKey":"430f43bbda2ef03c2d61fbdf33bae284","urlRequests":"/requests/","creditsCap":"10","pondUploader":null,"tagColors":{"Accessibility":"indigo","AI":"red","arithmetic":"blue","Art":"orange","Backend":"red","base conversion":"blue","Base64":"blue","Beta":"red","Binary":"blue","Calculator":"blue","Character Classes":"blue","Color":"yellow","Couple":"blue","Creator":"blue","Cryptography":"yellow","CSS":"indigo","CSV":"green","Data":"gray","decimal":"blue","Decode":"yellow","Decrypt":"red","Designer":"cyan","Developer":"orange","devops":"blue","DnD":"blue","Education":"lime","Encode":"indigo","Encoding":"blue","Encryption":"blue","evaluation":"blue","Fantasy":"lime","Fiction":"blue","Finance":"green","Frontend":"red","Fun":"violet","Gaming":"blue","Generator":"blue","Git":"blue","Graphics":"red","Health":"orange","hex":"blue","History":"green","HTML":"green","Ideas":"orange","Identity":"lime","Image":"orange","instant calculation":"blue","integer":"blue","IPv6":"blue","Javascript":"orange","JPG":"blue","JSON":"yellow","logarithm":"blue","Lookup":"gray","MAC address":"blue","Magic":"yellow","Markdown":"blue","Marketing":"orange","mask":"blue","Match":"blue","Math":"yellow","MD5":"indigo","Minecraft":"blue","Music":"blue","Must Try":"red","Mythical":"blue","Networking":"blue","number systems":"blue","obfuscate":"blue","octal":"blue","PDF":"yellow","Performance":"green","Planning":"yellow","PNG":"blue","privacy":"blue","Productivity":"green","programming":"blue","Random":"red","Scheduling":"blue","Science":"blue","Security":"yellow","SEO":"orange","Social":"indigo","Sports":"blue","Statistics":"green","string":"blue","SVG":"orange","sysadmin":"blue","Testing":"orange","Text":"green","Time":"blue","trigonometry":"blue","ULA":"blue","Utilities":"blue","Video":"indigo","Wellness":"orange","Wizard":"blue","World":"blue","XML":"orange","YAML":"blue"},"translations":{"copiedDeepLink":"Menyalin tautan dalam ke papan klip!","copiedText":"Disalin ke papan klip!","copiedImage":"Salin gambar ke papan klip!","generatedContentAppearsHere":"Hasilnya akan muncul di sini...","confirmOverwriteContent":"Konten saat ini akan diganti?","invalidBase64String":"String base64 tidak valid","timeoutReached":"Batas waktu tercapai sebelum menemukan hash.","allCombinationsTried":"Semua kombinasi dicoba, tetapi hash tidak ditemukan. Sesuaikan pengaturan dan coba lagi.","useThisFont":"Gunakan font ini","noFileTypesDetected":"Tidak ada jenis berkas yang terdeteksi. Konten asli mungkin hanya berupa berkas teks atau string.","noResults":"Tidak ada hasil ditemukan","loadMore":"Muat lebih banyak","decodedString":"String yang didekodekan","yes":"Ya","no":"TIDAK","team":"Tim","detectedFile":"File terdeteksi","download":"Unduh","converting":"Mengonversi...","compressing":"Mengompresi...","tapToRemove":"Ketuk untuk menghapus","serverUploaded":"Diunggah ke server","validationPassed":"Lulus validasi","validationFailed":"Validasi gagal","validationIndependently":"Kode yang dihasilkan divalidasi secara independen","pokemon":{"generation":"Generasi","hp":"HP","speed":"Kecepatan","attack":"Menyerang","defense":"Pertahanan","spAttack":"Serangan Khusus","spDefense":"Pertahanan Khusus"},"browserInfo":{"userAgent":"Agen Pengguna","language":"Bahasa","windowSize":"Ukuran Jendela","pdfViewerEnabled":"Penampil PDF Diaktifkan","javascriptEnabled":"Javascript Diaktifkan","cookiesEnabled":"Cookie Diaktifkan","browser":"Peramban","browserMajorVersion":"Versi Utama Browser","browserVersion":"Versi Peramban","layoutEngine":"Mesin Tata Letak","deviceMemory":"Memori Perangkat","maxTouchPoints":"Titik Sentuh Maksimum","screenSize":"Ukuran Layar","orientation":"Orientasi","colorDepth":"Kedalaman Warna","pixelRatio":"Rasio Piksel","os":"Sistem Operasi","osVersion":"Versi OS","deviceType":"Jenis Perangkat","deviceVendor":"Vendor Perangkat","deviceModel":"Model Perangkat"},"splits":"Perpecahan","noImagesSelected":"Harap unggah setidaknya satu berkas.","errorOccurredAI":"Gagal mendapatkan konten AI. Silakan coba lagi.","errorOccurredExtractText":"Gagal mengekstrak konten berkas. Silakan coba lagi.","errorOccurredPokemon":"Tidak ada Pok\u00e9mon yang ditemukan dengan kriteria yang diberikan.","errorCannotConvert":"Tidak dapat dikonversi","autoComplete":{"Tools":"Peralatan","Modules":"Modul","SearchForATool":"Cari alat, kategori, atau tag...","NoToolsFoundForThisQuery":"Tidak ada alat yang ditemukan untuk kueri ini.","SubmitARequest":"Kirimkan permintaan","WeWillMakeIt":"dan kami akan berhasil!","CategoriesFilter":"Filter Kategori","NoCategoriesFoundForThisQuery":"Tidak ada kategori yang ditemukan untuk kueri ini.","TagsFilter":"Filter Tag","NoTagsFoundForThisQuery":"Tidak ada tag yang ditemukan untuk kueri ini.","ToNavigate":"untuk menavigasi","ToSelect":"untuk memilih","ToClose":"untuk menutup","ToCancel":"Membatalkan"}},"defaultSwatches":["#264653","#2a9d8f","#e9c46a","rgb(244,162,97)","#e76f51","#d62828","navy","#07b","#0096c7","#00b4d880","rgba(0,119,182,0.8)"]}; //# sourceURL=theme-js-js-extra /* ]]> */ </script> <script type="text/javascript" src="https://iotools.cloud/wp-content/themes/iotools/dist/main.min.js?ver=a1389f69c44704bc20e58ad961beebbc" id="theme-js-js"></script> <script type="text/javascript" src="https://iotools.cloud/wp-content/themes/iotools/dist/modules/61ea48838d56c794fb1748cfb9bebdfd.min.js?ver=7db719a04edace60a1f31a6bbee55646" id="theme-js-61ea48838d56c794fb1748cfb9bebdfd-js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js?ver=a1389f69c44704bc20e58ad961beebbc" id="highlight-js-js"></script> <script type="text/javascript" src="https://iotools.cloud/wp-content/themes/iotools/assets/libraries/Coloris-0.24.0/dist/coloris.min.js?ver=a1389f69c44704bc20e58ad961beebbc" id="coloris-js-js"></script> <script id="wp-emoji-settings" type="application/json"> {"baseUrl":"https://s.w.org/images/core/emoji/17.0.2/72x72/","ext":".png","svgUrl":"https://s.w.org/images/core/emoji/17.0.2/svg/","svgExt":".svg","source":{"concatemoji":"https://iotools.cloud/wp-includes/js/wp-emoji-release.min.js?ver=6.9.1"}} </script> <script type="module"> /* <![CDATA[ */ /*! This file is auto-generated */ const a=JSON.parse(document.getElementById("wp-emoji-settings").textContent),o=(window._wpemojiSettings=a,"wpEmojiSettingsSupports"),s=["flag","emoji"];function i(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function c(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0);const a=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);return t.every((e,t)=>e===a[t])}function p(e,t){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var n=e.getImageData(16,16,1,1);for(let e=0;e<n.data.length;e++)if(0!==n.data[e])return!1;return!0}function u(e,t,n,a){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\udde8\ud83c\uddf6","\ud83c\udde8\u200b\ud83c\uddf6")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!a(e,"\ud83e\u1fac8")}return!1}function f(e,t,n,a){let r;const o=(r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):document.createElement("canvas")).getContext("2d",{willReadFrequently:!0}),s=(o.textBaseline="top",o.font="600 32px Arial",{});return e.forEach(e=>{s[e]=t(o,e,n,a)}),s}function r(e){var t=document.createElement("script");t.src=e,t.defer=!0,document.head.appendChild(t)}a.supports={everything:!0,everythingExceptFlag:!0},new Promise(t=>{let n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(s),u.toString(),c.toString(),p.toString()].join(",")+"));",a=new Blob([e],{type:"text/javascript"});const r=new Worker(URL.createObjectURL(a),{name:"wpTestEmojiSupports"});return void(r.onmessage=e=>{i(n=e.data),r.terminate(),t(n)})}catch(e){}i(n=f(s,u,c,p))}t(n)}).then(e=>{for(const n in e)a.supports[n]=e[n],a.supports.everything=a.supports.everything&&a.supports[n],"flag"!==n&&(a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&a.supports[n]);var t;a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&!a.supports.flag,a.supports.everything||((t=a.source||{}).concatemoji?r(t.concatemoji):t.wpemoji&&t.twemoji&&(r(t.twemoji),r(t.wpemoji)))}); //# sourceURL=https://iotools.cloud/wp-includes/js/wp-emoji-loader.min.js /* ]]> */ </script> <script type="text/javascript">(function (undefined) {let scriptOptions={"_localizedStrings":{"redirect_overlay_title":"Hold On","redirect_overlay_text":"You are being redirected to another page,<br>it may take a few seconds.","webview_notification_text":"The selected provider doesn't support embedded browsers!"},"_targetWindow":"prefer-popup","_redirectOverlay":"overlay-with-spinner-and-message","_unsupportedWebviewBehavior":""}; /** * Used when Cross-Origin-Opener-Policy blocked the access to the opener. We can't have a reference of the opened windows, so we should attempt to refresh only the windows that has opened popups. */ window._nslHasOpenedPopup = false; window._nslWebViewNoticeElement = null; window.NSLPopup = function (url, title, w, h) { /** * Cross-Origin-Opener-Policy blocked the access to the opener */ if (typeof BroadcastChannel === "function") { const _nslLoginBroadCastChannel = new BroadcastChannel('nsl_login_broadcast_channel'); _nslLoginBroadCastChannel.onmessage = (event) => { if (window?._nslHasOpenedPopup && event.data?.action === 'redirect') { window._nslHasOpenedPopup = false; const url = event.data?.href; _nslLoginBroadCastChannel.close(); if (typeof window.nslRedirect === 'function') { window.nslRedirect(url); } else { window.opener.location = url; } } }; } const userAgent = navigator.userAgent, mobile = function () { return /\b(iPhone|iP[ao]d)/.test(userAgent) || /\b(iP[ao]d)/.test(userAgent) || /Android/i.test(userAgent) || /Mobile/i.test(userAgent); }, screenX = window.screenX !== undefined ? window.screenX : window.screenLeft, screenY = window.screenY !== undefined ? window.screenY : window.screenTop, outerWidth = window.outerWidth !== undefined ? window.outerWidth : document.documentElement.clientWidth, outerHeight = window.outerHeight !== undefined ? window.outerHeight : document.documentElement.clientHeight - 22, targetWidth = mobile() ? null : w, targetHeight = mobile() ? null : h, left = parseInt(screenX + (outerWidth - targetWidth) / 2, 10), right = parseInt(screenY + (outerHeight - targetHeight) / 2.5, 10), features = []; if (targetWidth !== null) { features.push('width=' + targetWidth); } if (targetHeight !== null) { features.push('height=' + targetHeight); } features.push('left=' + left); features.push('top=' + right); features.push('scrollbars=1'); const newWindow = window.open(url, title, features.join(',')); if (window.focus) { newWindow.focus(); } window._nslHasOpenedPopup = true; return newWindow; }; let isWebView = null; function checkWebView() { if (isWebView === null) { function _detectOS(ua) { if (/Android/.test(ua)) { return "Android"; } else if (/iPhone|iPad|iPod/.test(ua)) { return "iOS"; } else if (/Windows/.test(ua)) { return "Windows"; } else if (/Mac OS X/.test(ua)) { return "Mac"; } else if (/CrOS/.test(ua)) { return "Chrome OS"; } else if (/Firefox/.test(ua)) { return "Firefox OS"; } return ""; } function _detectBrowser(ua) { let android = /Android/.test(ua); if (/Opera Mini/.test(ua) || / OPR/.test(ua) || / OPT/.test(ua)) { return "Opera"; } else if (/CriOS/.test(ua)) { return "Chrome for iOS"; } else if (/Edge/.test(ua)) { return "Edge"; } else if (android && /Silk\//.test(ua)) { return "Silk"; } else if (/Chrome/.test(ua)) { return "Chrome"; } else if (/Firefox/.test(ua)) { return "Firefox"; } else if (android) { return "AOSP"; } else if (/MSIE|Trident/.test(ua)) { return "IE"; } else if (/Safari\//.test(ua)) { return "Safari"; } else if (/AppleWebKit/.test(ua)) { return "WebKit"; } return ""; } function _detectBrowserVersion(ua, browser) { if (browser === "Opera") { return /Opera Mini/.test(ua) ? _getVersion(ua, "Opera Mini/") : / OPR/.test(ua) ? _getVersion(ua, " OPR/") : _getVersion(ua, " OPT/"); } else if (browser === "Chrome for iOS") { return _getVersion(ua, "CriOS/"); } else if (browser === "Edge") { return _getVersion(ua, "Edge/"); } else if (browser === "Chrome") { return _getVersion(ua, "Chrome/"); } else if (browser === "Firefox") { return _getVersion(ua, "Firefox/"); } else if (browser === "Silk") { return _getVersion(ua, "Silk/"); } else if (browser === "AOSP") { return _getVersion(ua, "Version/"); } else if (browser === "IE") { return /IEMobile/.test(ua) ? _getVersion(ua, "IEMobile/") : /MSIE/.test(ua) ? _getVersion(ua, "MSIE ") : _getVersion(ua, "rv:"); } else if (browser === "Safari") { return _getVersion(ua, "Version/"); } else if (browser === "WebKit") { return _getVersion(ua, "WebKit/"); } return "0.0.0"; } function _getVersion(ua, token) { try { return _normalizeSemverString(ua.split(token)[1].trim().split(/[^\w\.]/)[0]); } catch (o_O) { } return "0.0.0"; } function _normalizeSemverString(version) { const ary = version.split(/[\._]/); return (parseInt(ary[0], 10) || 0) + "." + (parseInt(ary[1], 10) || 0) + "." + (parseInt(ary[2], 10) || 0); } function _isWebView(ua, os, browser, version, options) { switch (os + browser) { case "iOSSafari": return false; case "iOSWebKit": return _isWebView_iOS(options); case "AndroidAOSP": return false; case "AndroidChrome": return parseFloat(version) >= 42 ? /; wv/.test(ua) : /\d{2}\.0\.0/.test(version) ? true : _isWebView_Android(options); } return false; } function _isWebView_iOS(options) { const document = (window["document"] || {}); if ("WEB_VIEW" in options) { return options["WEB_VIEW"]; } return !("fullscreenEnabled" in document || "webkitFullscreenEnabled" in document || false); } function _isWebView_Android(options) { if ("WEB_VIEW" in options) { return options["WEB_VIEW"]; } return !("requestFileSystem" in window || "webkitRequestFileSystem" in window || false); } const options = {}, nav = window.navigator || {}, ua = nav.userAgent || "", os = _detectOS(ua), browser = _detectBrowser(ua), browserVersion = _detectBrowserVersion(ua, browser); isWebView = _isWebView(ua, os, browser, browserVersion, options); } return isWebView; } function isAllowedWebViewForUserAgent(provider) { const facebookAllowedWebViews = [ 'Instagram', 'FBAV', 'FBAN' ]; let whitelist = []; if (provider && provider === 'facebook') { whitelist = facebookAllowedWebViews; } const nav = window.navigator || {}, ua = nav.userAgent || ""; if (whitelist.length && ua.match(new RegExp(whitelist.join('|')))) { return true; } return false; } function disableButtonInWebView(providerButtonElement) { if (providerButtonElement) { providerButtonElement.classList.add('nsl-disabled-provider'); providerButtonElement.setAttribute('href', '#'); providerButtonElement.addEventListener('pointerdown', (e) => { if (!window._nslWebViewNoticeElement) { window._nslWebViewNoticeElement = document.createElement('div'); window._nslWebViewNoticeElement.id = "nsl-notices-fallback"; window._nslWebViewNoticeElement.addEventListener('pointerdown', function (e) { this.parentNode.removeChild(this); window._nslWebViewNoticeElement = null; }); const webviewNoticeHTML = '<div class="error"><p>' + scriptOptions._localizedStrings.webview_notification_text + '</p></div>'; window._nslWebViewNoticeElement.insertAdjacentHTML("afterbegin", webviewNoticeHTML); document.body.appendChild(window._nslWebViewNoticeElement); } }); } } window._nslDOMReady(function () { window.nslRedirect = function (url) { if (scriptOptions._redirectOverlay) { const overlay = document.createElement('div'); overlay.id = "nsl-redirect-overlay"; let overlayHTML = ''; const overlayContainer = "<div id='nsl-redirect-overlay-container'>", overlayContainerClose = "</div>", overlaySpinner = "<div id='nsl-redirect-overlay-spinner'></div>", overlayTitle = "<p id='nsl-redirect-overlay-title'>" + scriptOptions._localizedStrings.redirect_overlay_title + "</p>", overlayText = "<p id='nsl-redirect-overlay-text'>" + scriptOptions._localizedStrings.redirect_overlay_text + "</p>"; switch (scriptOptions._redirectOverlay) { case "overlay-only": break; case "overlay-with-spinner": overlayHTML = overlayContainer + overlaySpinner + overlayContainerClose; break; default: overlayHTML = overlayContainer + overlaySpinner + overlayTitle + overlayText + overlayContainerClose; break; } overlay.insertAdjacentHTML("afterbegin", overlayHTML); document.body.appendChild(overlay); } window.location = url; }; let targetWindow = scriptOptions._targetWindow || 'prefer-popup', lastPopup = false; document.addEventListener('click', function (e) { if (e.target) { const buttonLinkElement = e.target.closest('a[data-plugin="nsl"][data-action="connect"]') || e.target.closest('a[data-plugin="nsl"][data-action="link"]'); if (buttonLinkElement) { if (lastPopup && !lastPopup.closed) { e.preventDefault(); lastPopup.focus(); } else { let href = buttonLinkElement.href, success = false; if (href.indexOf('?') !== -1) { href += '&'; } else { href += '?'; } const redirectTo = buttonLinkElement.dataset.redirect; if (redirectTo === 'current') { href += 'redirect=' + encodeURIComponent(window.location.href) + '&'; } else if (redirectTo && redirectTo !== '') { href += 'redirect=' + encodeURIComponent(redirectTo) + '&'; } if (targetWindow !== 'prefer-same-window' && checkWebView()) { targetWindow = 'prefer-same-window'; } if (targetWindow === 'prefer-popup') { lastPopup = NSLPopup(href + 'display=popup', 'nsl-social-connect', buttonLinkElement.dataset.popupwidth, buttonLinkElement.dataset.popupheight); if (lastPopup) { success = true; e.preventDefault(); } } else if (targetWindow === 'prefer-new-tab') { const newTab = window.open(href + 'display=popup', '_blank'); if (newTab) { if (window.focus) { newTab.focus(); } success = true; window._nslHasOpenedPopup = true; e.preventDefault(); } } if (!success) { window.location = href; e.preventDefault(); } } } } }); let buttonCountChanged = false; const googleLoginButtons = document.querySelectorAll(' a[data-plugin="nsl"][data-provider="google"]'); if (googleLoginButtons.length && checkWebView()) { googleLoginButtons.forEach(function (googleLoginButton) { if (scriptOptions._unsupportedWebviewBehavior === 'disable-button') { disableButtonInWebView(googleLoginButton); } else { googleLoginButton.remove(); buttonCountChanged = true; } }); } const facebookLoginButtons = document.querySelectorAll(' a[data-plugin="nsl"][data-provider="facebook"]'); if (facebookLoginButtons.length && checkWebView() && /Android/.test(window.navigator.userAgent) && !isAllowedWebViewForUserAgent('facebook')) { facebookLoginButtons.forEach(function (facebookLoginButton) { if (scriptOptions._unsupportedWebviewBehavior === 'disable-button') { disableButtonInWebView(facebookLoginButton); } else { facebookLoginButton.remove(); buttonCountChanged = true; } }); } const separators = document.querySelectorAll('div.nsl-separator'); if (buttonCountChanged && separators.length) { separators.forEach(function (separator) { const separatorParentNode = separator.parentNode; if (separatorParentNode) { const separatorButtonContainer = separatorParentNode.querySelector('div.nsl-container-buttons'); if (separatorButtonContainer && !separatorButtonContainer.hasChildNodes()) { separator.remove(); } } }) } });})();</script> <div id="io-modal-login" class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog modal-dialog-scrollable modal-md" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Diperlukan Masuk</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Menutup"> <i class="ti ti-x" aria-hidden="true" data-no-translation=""></i> </button> </div> <div class="modal-body"> Silakan <a class="white bg-blue rounded p-1 pl-1 pr-2" rel="nofollow" href="https://iotools.cloud/id/account/"><i class="ti ti-user-circle" data-no-translation=""></i> masuk</a> atau <a rel="nofollow" href="https://iotools.cloud/id/register/"><u>daftar</u></a> untuk mengelola bookmark Anda. Gratis! </div> </div> </div> </div> <div id="io-modal-request" class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog modal-dialog-scrollable modal-md" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Diperlukan Masuk</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Menutup"> <i class="ti ti-x" aria-hidden="true" data-no-translation=""></i> </button> </div> <div class="modal-body"> Silakan <a class="white bg-blue rounded p-1 pl-1 pr-2" rel="nofollow" href="https://iotools.cloud/id/account/?redirect_to=https://iotools.cloud/id/account/request-tool/"><i class="ti ti-user-circle" data-no-translation=""></i> masuk</a> atau <a rel="nofollow" href="https://iotools.cloud/id/register/?redirect_to=https://iotools.cloud/id/account/request-tool/"><u>daftar</u></a> untuk mengajukan permintaan alat. Gratis! </div> </div> </div> </div> <div id="io-modal-community" class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog modal-dialog-scrollable modal-md" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Diperlukan Masuk</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Menutup"> <i class="ti ti-x" aria-hidden="true" data-no-translation=""></i> </button> </div> <div class="modal-body"> Silakan <a class="white bg-blue rounded p-1 pl-1 pr-2" rel="nofollow" href="https://iotools.cloud/id/account/?redirect_to=https://iotools.cloud/id/account/byo/"><i class="ti ti-user-circle" data-no-translation=""></i> masuk</a> atau <a rel="nofollow" href="https://iotools.cloud/id/register/?redirect_to=https://iotools.cloud/id/account/byo/"><u>daftar</u></a> untuk membuat alat Anda sendiri. Gratis! <div class="card mt-4 mb-0"> <div class="card-body"> <h5><i class="ti ti-info-circle" data-no-translation=""></i> Tentang Build Your Own (BYO) Builder</h5> <p>Fitur BYO Builder kami memungkinkan Anda membuat alat khusus tanpa pengetahuan pemrograman. Anda dapat:</p> <ul> <li>Buat alat bertenaga AI menggunakan antarmuka sederhana kami</li> <li>Bagikan alat Anda dengan komunitas</li> <li>Dapatkan umpan balik dan tingkatkan alat Anda</li> <li>Bantu orang lain memecahkan masalah dengan kreasi Anda</li> </ul> <p class="mb-0">Bergabunglah dengan kami <a href="https://iotools.cloud/id/community-tools/"><u>masyarakat</u></a> hari ini dan mulailah membangun alat yang membuat perbedaan!</p> </div> </div> </div> </div> </div> </div> <div id="cf-turnstile" data-sitekey="0x4AAAAAABroE5_aI0mWeJ_q" data-appearance="execute"></div> </body> </html>