65 Contoh Kode HTML Sederhana dan Penjelasannya

Highlights

Kode HTML dasar yang wajib dipelajari: elemen teks dan heading, list dan daftar, link dan navigasi, media gambar dan video, form dan input, serta tabel dan data
Memahami peran HTML sebagai “tulang punggung” web melalui struktur deklaratif yang tepat.
Pentingnya hierarki konten (Heading h1-h6) dalam memperkuat struktur informasi sekaligus optimasi SEO.
Implementasi media interaktif seperti gambar, video, dan iframe untuk meningkatkan visualisasi website.

Pernahkah kamu merasa penasaran bagaimana sebuah halaman website bisa tampil begitu rapi dan fungsional di layar perangkatmu? Jawabannya ada pada “tulang punggung” internet, yaitu HTML (HyperText Markup Language).

Belajar coding tidak harus langsung pusing dengan logika yang rumit, lho. Terkadang, cara terbaik untuk belajar adalah dengan melihat contoh langsung dan mempraktikkannya.

Nah, kali ini kita akan membedah 65 contoh kode HTML sederhana yang paling sering digunakan dalam pembuatan website. Yuk, siapkan kopi dan mari kita mulai petualangan coding ini.

Pengen Punya Website Sendiri? Tanya Qwords Aja Dulu

Daftar Isi show

Memahami Kode HTML Dasar: Struktur Global

Sebelum masuk ke daftar panjang, Sahabat Qwords perlu tahu bahwa setiap file HTML selalu diawali dengan struktur dasar. Bayangkan ini sebagai fondasi rumah. Berikut kode HTML dasar yang perlu diingat:

: Deklarasi untuk memberi tahu browser bahwa ini adalah dokumen HTML5.
: Tag pembuka yang membungkus seluruh konten.
: Berisi metadata yang tidak tampil langsung di halaman, seperti judul tab.
</code>: Mengatur teks yang muncul di tab browser.</li> <li><code><body></code>: Tempat semua konten visual (teks, gambar, video) diletakkan.</li> </ol> <p>Dari kode di atas, kamu bisa membuat berbagai karya sederhana dari script HTML, seperti <a href="https://www.qwords.com/blog/script-html-ulang-tahun/">script ucapan ulang tahun</a> hingga <a href="https://www.qwords.com/blog/script-html-bucin/">script untuk para bucin</a>.</p> <h3><span id="1_Kode_HTML_Elemen_Teks_dan_Heading">1. Kode HTML Elemen Teks dan Heading</span></h3> <p>Teks adalah bagian paling vital dari sebuah konten. HTML menyediakan berbagai cara untuk memformatnya:</p> <ol start="6"> <li><code><h1>Teks Utama</h1></code>: Heading level 1, biasanya untuk judul artikel.</li> <li><code><h2>Subjudul</h2></code>: Heading level 2, untuk poin-poin besar.</li> <li><code><h3>Poin Pendukung</h3></code>: Digunakan untuk sub-bagian di bawah H2.</li> <li><code><p>Ini adalah paragraf.</p></code>: Tag dasar untuk menulis teks panjang.</li> <li><code><b>Teks Tebal</b></code>: Memberikan efek tebal secara visual.</li> <li><code><strong>Teks Penting</strong></code>: Menebalkan teks dengan penekanan makna (penting untuk SEO).</li> <li><code><i>Teks Miring</i></code>: Memberikan efek miring (italic).</li> <li><code><em>Teks Penekanan</em></code>: Mirip miring, tapi memberikan penekanan emosional/makna.</li> <li><code><mark>Teks Highlight</mark></code>: Memberikan efek stabilo kuning.</li> <li><code><small>Teks Kecil</small></code>: Biasanya digunakan untuk catatan kaki atau hak cipta.</li> </ol> <h3><span id="2_Kode_HTML_List_dan_Daftar">2. Kode HTML List dan Daftar</span></h3> <p>Menyajikan informasi dalam bentuk daftar membuat pembaca lebih nyaman, bukan? Ini pilihan kode HTML untuk membuat tulisan dalam format daftar:</p> <ol start="16"> <li><code><ul></code>: Unordered List (daftar dengan simbol bullet).</li> <li><code><ol></code>: Ordered List (daftar dengan angka/urutan).</li> <li><code><li>Item Daftar</li></code>: Tag wajib di dalam <ul> atau <ol>.</li> <li><code><dl></code>: Description List (daftar penjelasan).</li> <li><code><dt></code>: Description Term (istilah yang dijelaskan).</li> <li><code><dd></code>: Description Details (penjelasan dari istilah).</li> <li><code><ol type="A"></code>: Daftar urutan menggunakan huruf kapital.</li> <li><code><ol type="i"></code>: Daftar urutan menggunakan angka romawi kecil.</li> <li><code><ul style="list-style-type:square"></code>: Mengubah bullet menjadi kotak.</li> <li><code><li> di dalam <li></code>: Membuat daftar bersarang (nested list).</li> </ol> <h3><span id="3_Kode_HTML_Link_dan_Navigasi">3. Kode HTML Link dan Navigasi</span></h3> <p>Website tidak akan menjadi “web” tanpa adanya jembatan antar halaman. Gunakan kode di bawah ini untuk menautkan URL tertentu di halaman:</p> <ol start="26"> <li><code><a href="https://qwords.com">Klik Sini</a></code>: Link standar menuju URL tertentu.</li> <li><code><a href="page2.html">Halaman 2</a></code>: Link internal menuju file di folder yang sama.</li> <li><code><a href="https://google.com" target="_blank"></code>: Membuka link di tab baru.</li> <li><code><a href="mailto:admin@qwords.com">Email Kami</a></code>: Membuka aplikasi email secara otomatis.</li> <li><code><a href="#bagian-bawah">Ke Bawah</a></code>: Link menuju ID tertentu di halaman yang sama (jangkar).</li> <li><code><a href="tel:+62812345">Telepon</a></code>: Link untuk melakukan panggilan telepon.</li> <li><code><nav></code>: Tag semantik untuk membungkus menu navigasi.</li> <li><code><a download="file.pdf">Unduh</a></code>: Mengunduh file saat diklik.</li> <li><code><a href="javascript:void(0)">Link Mati</a></code>: Digunakan untuk keperluan scripting.</li> <li><code><a title="Info Tambahan">Teks</a></code>: Menampilkan tooltip saat kursor diarahkan.</li> </ol> <h3><span id="4_Kode_HTML_Media_Gambar_dan_Video">4. Kode HTML Media: Gambar dan Video</span></h3> <p>Visualisasi sangat penting, jadi jangan biarkan websitemu hanya berisi teks. Gunakan kode di bawah untuk menyisipkan gambar atau video:</p> <ol start="36"> <li><code><img src="gambar.jpg"></code>: Menampilkan gambar.</li> <li><code><img alt="Deskripsi"></code>: Deskripsi gambar (penting untuk aksesibilitas dan SEO).</li> <li><code><img width="300" height="200"></code>: Mengatur ukuran gambar langsung di HTML.</li> <li><code><video controls></code>: Menampilkan pemutar video dengan tombol kontrol.</li> <li><code><source src="movie.mp4"></code>: Menentukan sumber file video di dalam tag <video>.</li> <li><code><audio controls></code>: Menampilkan pemutar suara/musik.</li> <li><code><figure></code>: Membungkus elemen media seperti gambar agar lebih terstruktur.</li> <li><code><figcaption></code>: Memberikan keterangan teks di bawah gambar/media.</li> <li><code><iframe src="url"></code>: Menampilkan halaman web lain di dalam halamanmu (misal: Google Maps).</li> <li><code><picture></code>: Digunakan untuk gambar responsif (memilih gambar berbeda berdasarkan ukuran layar).</li> </ol> <h3><span id="5_Kode_HTML_Form_dan_Input">5. Kode HTML Form dan Input</span></h3> <p>Ingin berinteraksi dengan pengunjung? Gunakan elemen form ini.</p> <ol start="46"> <li><code><form></code>: Wadah utama untuk semua elemen input.</li> <li><code><input type="text"></code>: Kotak teks satu baris biasa.</li> <li><code><input type="password"></code>: Karakter yang diketik akan disamarkan menjadi titik-titik.</li> <li><code><input type="email"></code>: Input khusus yang memvalidasi format alamat email.</li> <li><code><textarea></code>: Kotak teks besar untuk pesan atau komentar.</li> <li><code><input type="checkbox"></code>: Kotak centang untuk memilih lebih dari satu opsi.</li> <li><code><input type="radio"></code>: Tombol bulat untuk memilih salah satu dari beberapa opsi.</li> <li><code><select></code>: Membuat menu dropdown.</li> <li><code><option></code>: Pilihan yang ada di dalam menu dropdown.</li> <li><code><button type="submit">Kirim</button></code>: Tombol untuk mengirimkan data form.</li> </ol> <h3><span id="6_Kode_HTML_Tabel_dan_Data">6. Kode HTML Tabel dan Data</span></h3> <p>Untuk menyajikan data statistik atau perbandingan, gunakan tabel yang bisa dibuat dengan kode berikut:</p> <ol start="56"> <li><code><table></code>: Pembungkus utama tabel.</li> <li><code><tr></code>: Table Row (membuat baris baru).</li> <li><code><th></code>: Table Header (judul kolom, biasanya otomatis tebal dan tengah).</li> <li><code><td></code>: Table Data (isi sel dalam tabel).</li> <li><code><thead></code>: Mengelompokkan bagian kepala tabel.</li> <li><code><tbody></code>: Mengelompokkan bagian isi utama tabel.</li> <li><code><tfoot></code>: Bagian kaki tabel (biasanya untuk total harga).</li> <li><code><table border="1"></code>: Memberikan garis tepi pada tabel.</li> <li><code><td colspan="2"></code>: Menggabungkan dua kolom menjadi satu.</li> <li><code><td rowspan="2"></code>: Menggabungkan dua baris menjadi satu.</li> </ol> <p>Nah berikut untuk hasil dari implementasi dari semua daftar tag di atas</p> <figure id="attachment_40170" aria-describedby="caption-attachment-40170" style="width: 823px" class="wp-caption aligncenter"><img decoding="async" class="wp-image-40170 size-full" src="https://www.qwords.com/blog/wp-content/uploads/2026/01/hasil.jpg" alt="Hasil implementasi dari daftar tag html" width="823" height="878" srcset="https://www.qwords.com/blog/wp-content/uploads/2026/01/hasil.jpg 823w, https://www.qwords.com/blog/wp-content/uploads/2026/01/hasil-800x853.jpg 800w, https://www.qwords.com/blog/wp-content/uploads/2026/01/hasil-281x300.jpg 281w, https://www.qwords.com/blog/wp-content/uploads/2026/01/hasil-768x819.jpg 768w" sizes="(max-width: 823px) 100vw, 823px"><figcaption id="caption-attachment-40170" class="wp-caption-text">Hasil implementasi dari daftar tag html</figcaption></figure> <h2><span id="Mengapa_Memahami_Kode_Sederhana_Ini_Penting">Mengapa Memahami Kode Sederhana Ini Penting?</span></h2> <p>Mungkin Sahabat Qwords bertanya, “Kan sekarang sudah ada Website Builder atau CMS seperti WordPress, kenapa harus belajar kode-kode ini?”</p> <p>Meskipun teknologi sudah sangat instan, memahami HTML dasar akan memberikan keuntungan besar:</p> <ul> <li><strong>Kustomisasi Tanpa Batas:</strong> Kamu bisa memperbaiki layout yang berantakan tanpa menunggu bantuan developer.</li> <li><strong>Optimasi SEO:</strong> Kamu tahu tag mana yang harus digunakan agar Google lebih mudah merayapi websitemu.</li> <li><strong>Kecepatan:</strong> Terkadang, kode HTML bersih jauh lebih ringan daripada plugin yang berat.</li> </ul> <h2><span id="Belajar_HTML_Hari_Ini_Bangun_Website_Besok">Belajar HTML Hari Ini, Bangun Website Besok</span></h2> <p>Belajar HTML adalah langkah pertama yang paling menarik dalam dunia pengembangan web.</p> <p>Dari 65 contoh di atas, Sahabat Qwords kini sudah memiliki modal yang cukup untuk mulai membangun struktur halaman web sederhana secara mandiri. Jangan takut salah, karena setiap error adalah pelajaran baru.</p> <p>Kuncinya hanya satu: Praktik! Jika kamu ingin memulai, kamu bisa mencoba dari memiliki website sederhana sendiri seperti website WordPress. Pastikan website-mu tetap lancar dan online tanpa kendala bersama hosting untuk WordPress dari Qwords.</p> <p>Hosting WordPress cocok untuk kamu yang ingin belajar mengelola website sendiri dari 0, termasuk mempraktikkan hasil belajar HTML. Coba cek paket hosting WordPress mana yang paling cocok untukmu hari ini!</p> <p style="text-align: center;"></p><div class="cta-btn--article"><a class="wp-block-button__link has-white-color has-luminous-vivid-orange-background-color has-text-color has-background" href="https://portal.qwords.com/link.php?id=6?utm_source=cta+button+artikel&utm_medium=link&utm_campaign=65+contoh+kode+html+sederhana+dan+penjelasannya" target="_blank">Cek Paket Hosting WordPress Paling Oke di Sini</a></div> <div class="ads-promo-akhir" style="text-align:center; margin:30px 0;"><a href="https://www.qwords.com/hosting-murah/" target="_blank"><img decoding="async" src="https://www.qwords.com/blog/wp-content/uploads/2025/05/Diskon-50-Cloud-Hosting-Qwords.webp" style="max-width:100%; height:auto; border-radius:8px;"></a></div> </div> <div class="border-top mt-5 mb-1"></div> <div class="d-flex flex-wrap gap-4 align-items-center justify-content-between mb-4 mt-3">  <div class="d-flex align-items-center gap-2 post-tags"> <span><a href="https://www.qwords.com/blog/tag/atribut/" rel="tag">Atribut</a></span><span><a href="https://www.qwords.com/blog/tag/css/" rel="tag">css</a></span><span><a href="https://www.qwords.com/blog/tag/front-end-development/" rel="tag">Front-end Development</a></span><span><a href="https://www.qwords.com/blog/tag/kode-html/" rel="tag">kode html</a></span><span><a href="https://www.qwords.com/blog/tag/notepad/" rel="tag">Notepad++</a></span><span><a href="https://www.qwords.com/blog/tag/source-code/" rel="tag">source code</a></span><span><a href="https://www.qwords.com/blog/tag/syntax/" rel="tag">Syntax</a></span><span><a href="https://www.qwords.com/blog/tag/tag-elemen/" rel="tag">Tag & Elemen</a></span><span><a href="https://www.qwords.com/blog/tag/text-editor/" rel="tag">Text Editor</a></span><span><a href="https://www.qwords.com/blog/tag/vs-code/" rel="tag">VS Code</a></span><span><a href="https://www.qwords.com/blog/tag/web-browser/" rel="tag">Web Browser</a></span> </div>  <div class="d-flex align-items-center gap-2"> <span class="text-dark">Share:</span> <div class="d-flex align-items-center gap-2"> <div class="d-inline-flex group-social-icons mt-0 rounded-8"> <a href="https://www.facebook.com/sharer/sharer.php?u=https://www.qwords.com/blog/contoh-kode-html/" class="icon-shape icon-46"> <svg class="dark-mode-invert" xmlns="http://www.w3.org/2000/svg" width="10" height="17" viewBox="0 0 10 17" fill="none"> <path d="M8.84863 9.20312H6.5415V16.0938H3.46533V9.20312H0.942871V6.37305H3.46533V4.18896C3.46533 1.72803 4.94189 0.34375 7.1875 0.34375C8.26416 0.34375 9.40234 0.559082 9.40234 0.559082V2.98926H8.14111C6.91064 2.98926 6.5415 3.72754 6.5415 4.52734V6.37305H9.2793L8.84863 9.20312Z" fill="black"></path> </svg> </a> <a href="https://twitter.com/home?status=https://www.qwords.com/blog/contoh-kode-html/" class="icon-shape icon-46"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-twitter-x" viewBox="0 0 16 16"> <path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z"></path> </svg> </a> <a href="http://www.linkedin.com/shareArticle?mini=true&url=https://www.qwords.com/blog/contoh-kode-html/" class="icon-shape icon-46"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16"> <path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z"></path> </svg> </a>        <a href="https://api.whatsapp.com/send?text=65+Contoh+Kode+HTML+Sederhana+dan+Penjelasannya+https%3A%2F%2Fwww.qwords.com%2Fblog%2Fcontoh-kode-html%2F" target="_blank" rel="noopener noreferrer" class="icon-shape icon-46"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M13.601 2.326A7.855 7.855 0 0 0 8.003 0C3.582 0 0 3.582 0 8.003c0 1.414.369 2.792 1.07 4.006L0 16l4.095-1.07a7.963 7.963 0 0 0 3.908 1.006h.001c4.421 0 8.003-3.582 8.003-8.003a7.94 7.94 0 0 0-2.406-5.607M8.003 14.5a6.48 6.48 0 0 1-3.305-.9l-.236-.14-2.43.635.648-2.37-.154-.243A6.46 6.46 0 0 1 1.5 8.003c0-3.584 2.919-6.503 6.503-6.503 1.735 0 3.366.675 4.59 1.9a6.45 6.45 0 0 1 1.9 4.603c0 3.584-2.919 6.503-6.503 6.503m3.588-4.86c-.196-.098-1.16-.572-1.34-.637-.18-.066-.31-.098-.44.098-.13.196-.506.637-.62.768-.114.13-.228.147-.424.049-.196-.098-.828-.305-1.578-.974-.584-.52-.978-1.16-1.093-1.356-.114-.196-.012-.302.086-.4.088-.087.196-.228.294-.342.098-.114.13-.196.196-.326.066-.13.033-.245-.016-.342-.049-.098-.44-1.062-.604-1.456-.16-.385-.324-.333-.44-.34-.114-.006-.245-.007-.375-.007-.13 0-.342.049-.521.245-.18.196-.687.672-.687 1.637 0 .964.704 1.895.802 2.026.098.13 1.386 2.116 3.36 2.967.47.203.837.324 1.123.415.472.15.902.129 1.242.078.379-.057 1.16-.474 1.324-.932.163-.458.163-.85.114-.932-.049-.081-.179-.13-.375-.228"/> </svg> </a> </div> </div> </div> </div> </div> </article> <div class="block-subscribe h-100 d-flex flex-column flex-md-row gap-3 justify-content-start bg-white wow img-custom-anim-top"> <div class="author-bio-avatar"> <a href="https://www.qwords.com/blog/author/shakila/"> <img src="https://www.qwords.com/blog/wp-content/uploads/2025/11/Shakila-Zahra-P_Pas-Foto-Terbaru-2025-150x150.jpg" width="96" height="96" srcset="https://www.qwords.com/blog/wp-content/uploads/2025/11/Shakila-Zahra-P_Pas-Foto-Terbaru-2025-600x600.jpg 2x" alt="Shakila Zahra Previa" class="avatar avatar-96 wp-user-avatar wp-user-avatar-96 alignnone photo" /> </a> </div> <div class="author-bio-content"> <h5 class="mb-2 mt-0"> <a href="https://www.qwords.com/blog/author/shakila/">Shakila Zahra Previa</a> </h5> <p class="mt-0">I'm Shakila, a Content Writer & Copywriter specializing in creating impactful, reader-friendly content that helps brands communicate with clarity and purpose.</p> </div> </div> <div id="comments" class="blog-post-comment"> <div id="respond" class="comment-respond"> <div id="reply-title" class="comment-reply-title">Leave a comment <small><a rel="nofollow" id="cancel-comment-reply-link" href="/blog/contoh-kode-html/#respond" style="display:none;">Cancel reply</a></small></div><form action="https://www.qwords.com/blog/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Alamat email Anda tidak akan dipublikasikan.</span> <span class="required-field-message">Ruas yang wajib ditandai <span class="required">*</span></span></p> <div class="row post-input"> <div class="col-md-12 "> <div class="form-group"><textarea class="tp-form-control style-border style2 msg-box" placeholder="Enter Your Comment" id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea> </div></div> </div> <div class="row"> <div class="col-md-6"> <div class="form-group"> <input placeholder="Enter Name" id="author" class="tp-form-control style-border" name="author" type="text" value="" size="30" aria-required='true' /> </div> </div> <div class="col-md-6"> <div class="form-group"> <input placeholder="Enter Email" id="email" name="email" class="tp-form-control style-border" type="email" value="" size="30" aria-required='true' /> </div> </div> <div class="col-md-12"> <div class="form-group"> <input placeholder="Enter Website" id="url" name="url" class="tp-form-control style-border" type="url" value="" size="30" /> </div> </div> </div> <p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /> <label for="wp-comment-cookies-consent">Simpan nama, email, dan situs web saya pada peramban ini untuk komentar saya berikutnya.</label></p> <p class="form-submit"> <div class="col-xl-12"> <button class="btn btn-dark rounded-8 gap-2 button-effect-1" type="submit">Post Comment<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M8 15L15 8L8 1M15 8L1 8" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </svg></button> </div> <input type='hidden' name='comment_post_ID' value='40157' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p><p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="6ab3449814" /></p><p style="display: none !important;" class="akismet-fields-container" data-prefix="ak_"><label>Δ<textarea name="ak_hp_textarea" cols="45" rows="8" maxlength="100"></textarea></label><input type="hidden" id="ak_js_1" name="ak_js" value="79"/><script> document.getElementById( "ak_js_1" ).setAttribute( "value", ( new Date() ).getTime() ); </script> </p></form> </div> </div> </div> </div> <div class="col-lg-4 ps-lg-5"> <aside class="main_sidebar"> <div id="block-2" class="sidebar_widget widget widget_block widget_media_image"> <figure class="wp-block-image size-large"><a href="https://portal.qwords.com/link.php?id=5" target="_blank" rel=" noreferrer noopener"><img loading="lazy" decoding="async" width="576" height="1024" src="https://www.qwords.com/blog/wp-content/uploads/2026/04/Banner-Promo-Qwords-Performa-dan-Kecepatan-Rev-1080x1920-1-576x1024.jpg" alt="Pilih Qwords" class="wp-image-42594" srcset="https://www.qwords.com/blog/wp-content/uploads/2026/04/Banner-Promo-Qwords-Performa-dan-Kecepatan-Rev-1080x1920-1-576x1024.jpg 576w, https://www.qwords.com/blog/wp-content/uploads/2026/04/Banner-Promo-Qwords-Performa-dan-Kecepatan-Rev-1080x1920-1-169x300.jpg 169w, https://www.qwords.com/blog/wp-content/uploads/2026/04/Banner-Promo-Qwords-Performa-dan-Kecepatan-Rev-1080x1920-1-768x1365.jpg 768w, https://www.qwords.com/blog/wp-content/uploads/2026/04/Banner-Promo-Qwords-Performa-dan-Kecepatan-Rev-1080x1920-1-864x1536.jpg 864w, https://www.qwords.com/blog/wp-content/uploads/2026/04/Banner-Promo-Qwords-Performa-dan-Kecepatan-Rev-1080x1920-1.jpg 1080w" sizes="(max-width: 576px) 100vw, 576px" /></a></figure> </div><div id="magzin-latest-posts-3" class="sidebar_widget widget widget_magzin-latest-posts"><div class="sidebar_widget_title mb-3"> Artikel Trending </div> <div class="rc-post-wrap"> <div class="d-flex flex-wrap gap-3"> <div class="hover-up w-100"> <div class="article card-10 style-2"> <div class="hover-effect-1"> <a href="https://www.qwords.com/blog/promo-ramadan/" class="card-img"> <img class="w-100" src="https://www.qwords.com/blog/wp-content/uploads/2026/02/Promo-Ramadan-Qwords.webp" alt="Promo Ramadan 2026: Diskon Domain dan Hosting Qwords"> </a> </div> <div class="card-body"> <a href="https://www.qwords.com/blog/promo-ramadan/"> <div class="fs-7 mb-2 text-truncate-2 sidebar-post-title">Promo Ramadan 2026: Diskon Domain dan Hosting Qwords</div> </a> <div class="d-flex align-items-center text-600"> <span class="fs-8">10 Feb, 2026</span> <ul class="ps-4 m-0"> <li> <span class="fs-8">6</span> </li> </ul> </div> </div> </div> </div> <div class="hover-up w-100"> <div class="article card-10 style-2"> <div class="hover-effect-1"> <a href="https://www.qwords.com/blog/panduan-promo-domain-id/" class="card-img"> <img class="w-100" src="https://www.qwords.com/blog/wp-content/uploads/2025/11/promo-domain-id-qwords.webp" alt="Panduan Lengkap Promo Domain .ID dan Diskon Terbaru Qwords"> </a> </div> <div class="card-body"> <a href="https://www.qwords.com/blog/panduan-promo-domain-id/"> <div class="fs-7 mb-2 text-truncate-2 sidebar-post-title">Panduan Lengkap Promo Domain .ID dan Diskon Terbaru</div> </a> <div class="d-flex align-items-center text-600"> <span class="fs-8">20 Nov, 2025</span> <ul class="ps-4 m-0"> <li> <span class="fs-8">6</span> </li> </ul> </div> </div> </div> </div> <div class="hover-up w-100"> <div class="article card-10 style-2"> <div class="hover-effect-1"> <a href="https://www.qwords.com/blog/qwords-jadi-registrar-terakreditasi-icann/" class="card-img"> <img class="w-100" src="https://www.qwords.com/blog/wp-content/uploads/2022/07/Qwords-Registrar-ICANNx-1.webp" alt="Qwords Jadi Registrar Terakreditasi ICANN, Apa Untungnya?"> </a> </div> <div class="card-body"> <a href="https://www.qwords.com/blog/qwords-jadi-registrar-terakreditasi-icann/"> <div class="fs-7 mb-2 text-truncate-2 sidebar-post-title">Qwords Jadi Registrar Terakreditasi ICANN, Apa Untungnya?</div> </a> <div class="d-flex align-items-center text-600"> <span class="fs-8">27 Jul, 2022</span> <ul class="ps-4 m-0"> <li> <span class="fs-8">3</span> </li> </ul> </div> </div> </div> </div> <div class="hover-up w-100"> <div class="article card-10 style-2"> <div class="hover-effect-1"> <a href="https://www.qwords.com/blog/arsitektur-dedicated-server-rahasia-aplikasi-bebas-latensi/" class="card-img"> <img class="w-100" src="https://www.qwords.com/blog/wp-content/uploads/2026/06/16-Arsitektur-Dedicated-Server-Rahasia-Aplikasi-Bebas-Latensi-150x115.jpg" alt="Arsitektur Dedicated Server: Rahasia Aplikasi Bebas Latensi"> </a> </div> <div class="card-body"> <a href="https://www.qwords.com/blog/arsitektur-dedicated-server-rahasia-aplikasi-bebas-latensi/"> <div class="fs-7 mb-2 text-truncate-2 sidebar-post-title">Arsitektur Dedicated Server: Rahasia Aplikasi Bebas Latensi</div> </a> <div class="d-flex align-items-center text-600"> <span class="fs-8">06 Jun, 2026</span> <ul class="ps-4 m-0"> <li> <span class="fs-8">4</span> </li> </ul> </div> </div> </div> </div> <div class="hover-up w-100"> <div class="article card-10 style-2"> <div class="hover-effect-1"> <a href="https://www.qwords.com/blog/private-vs-public-cloud-pilihan-aman-enterprise/" class="card-img"> <img class="w-100" src="https://www.qwords.com/blog/wp-content/uploads/2026/06/15-Private-vs-Public-Cloud-Pilihan-Aman-Enterprise-150x115.jpg" alt="Private vs Public Cloud: Pilihan Aman Enterprise?"> </a> </div> <div class="card-body"> <a href="https://www.qwords.com/blog/private-vs-public-cloud-pilihan-aman-enterprise/"> <div class="fs-7 mb-2 text-truncate-2 sidebar-post-title">Private vs Public Cloud: Pilihan Aman Enterprise?</div> </a> <div class="d-flex align-items-center text-600"> <span class="fs-8">05 Jun, 2026</span> <ul class="ps-4 m-0"> <li> <span class="fs-8">3</span> </li> </ul> </div> </div> </div> </div> <div class="hover-up w-100"> <div class="article card-10 style-2"> <div class="hover-effect-1"> <a href="https://www.qwords.com/blog/keamanan-server-vps-5-trik-jitu-tangkal-serangan-ddos/" class="card-img"> <img class="w-100" src="https://www.qwords.com/blog/wp-content/uploads/2026/06/Keamanan-Server-VPS-5-Trik-Jitu-Tangkal-Serangan-DDoS-150x115.jpg" alt="Keamanan Server VPS: 5 Trik Jitu Tangkal Serangan DDoS"> </a> </div> <div class="card-body"> <a href="https://www.qwords.com/blog/keamanan-server-vps-5-trik-jitu-tangkal-serangan-ddos/"> <div class="fs-7 mb-2 text-truncate-2 sidebar-post-title">Keamanan Server VPS: 5 Trik Jitu Tangkal Serangan</div> </a> <div class="d-flex align-items-center text-600"> <span class="fs-8">04 Jun, 2026</span> <ul class="ps-4 m-0"> <li> <span class="fs-8">3</span> </li> </ul> </div> </div> </div> </div> </div> </div> </div> <div id="tag_cloud-2" class="sidebar_widget widget widget_tag_cloud"><div class="sidebar_widget_title mb-3">Topik Populer</div><div class="tagcloud"><a href="https://www.qwords.com/blog/tag/qwords/" class="tag-cloud-link tag-link-78 tag-link-position-1" style="font-size: 22pt;" aria-label="qwords (366 item)">qwords<span class="tag-link-count"> (366)</span></a> <a href="https://www.qwords.com/blog/tag/hosting-murah/" class="tag-cloud-link tag-link-736 tag-link-position-2" style="font-size: 12.344827586207pt;" aria-label="hosting murah (57 item)">hosting murah<span class="tag-link-count"> (57)</span></a> <a href="https://www.qwords.com/blog/tag/domain/" class="tag-cloud-link tag-link-70 tag-link-position-3" style="font-size: 12.103448275862pt;" aria-label="domain (54 item)">domain<span class="tag-link-count"> (54)</span></a> <a href="https://www.qwords.com/blog/tag/wordpress/" class="tag-cloud-link tag-link-43 tag-link-position-4" style="font-size: 12.103448275862pt;" aria-label="Wordpress (54 item)">Wordpress<span class="tag-link-count"> (54)</span></a> <a href="https://www.qwords.com/blog/tag/hosting/" class="tag-cloud-link tag-link-801 tag-link-position-5" style="font-size: 11.5pt;" aria-label="Hosting (48 item)">Hosting<span class="tag-link-count"> (48)</span></a> <a href="https://www.qwords.com/blog/tag/website/" class="tag-cloud-link tag-link-41 tag-link-position-6" style="font-size: 11.137931034483pt;" aria-label="website (45 item)">website<span class="tag-link-count"> (45)</span></a> <a href="https://www.qwords.com/blog/tag/cloud-hosting/" class="tag-cloud-link tag-link-55 tag-link-position-7" style="font-size: 10.896551724138pt;" aria-label="cloud hosting (43 item)">cloud hosting<span class="tag-link-count"> (43)</span></a> <a href="https://www.qwords.com/blog/tag/email-marketing/" class="tag-cloud-link tag-link-1027 tag-link-position-8" style="font-size: 9.3275862068966pt;" aria-label="email marketing (31 item)">email marketing<span class="tag-link-count"> (31)</span></a> <a href="https://www.qwords.com/blog/tag/nama-domain/" class="tag-cloud-link tag-link-77 tag-link-position-9" style="font-size: 8.9655172413793pt;" aria-label="nama domain (29 item)">nama domain<span class="tag-link-count"> (29)</span></a> <a href="https://www.qwords.com/blog/tag/hosting-indonesia/" class="tag-cloud-link tag-link-59 tag-link-position-10" style="font-size: 8.9655172413793pt;" aria-label="hosting indonesia (29 item)">hosting indonesia<span class="tag-link-count"> (29)</span></a> <a href="https://www.qwords.com/blog/tag/bisnis-online/" class="tag-cloud-link tag-link-47 tag-link-position-11" style="font-size: 8.3620689655172pt;" aria-label="bisnis online (26 item)">bisnis online<span class="tag-link-count"> (26)</span></a> <a href="https://www.qwords.com/blog/tag/hosting-bisnis/" class="tag-cloud-link tag-link-5026 tag-link-position-12" style="font-size: 8pt;" aria-label="hosting bisnis (24 item)">hosting bisnis<span class="tag-link-count"> (24)</span></a></div> </div> </aside> </div> </div> </div> </div> </section>  <section class="related-post py-5 bg-white mt-5"> <div class="container"> <div class="row g-4"> <div class="col-12"> <h5 class="mb-0">Rekomendasi Artikel</h5> </div> <div class="col-md-6 col-lg-3"> <div class="article card-5"> <div class="post-link"> <div class="hover-effect-1"> <div class="position-relative card-img-top thumbnail"> <a href="https://www.qwords.com/blog/alternatif-browser-ringan-yang-cepat-dan-aman/"> <img width="300" height="223" src="https://www.qwords.com/blog/wp-content/uploads/2025/03/alternatif-browser-01-300x223.jpg" class="cover-image wp-post-image" alt="8 Alternatif Browser Ringan yang Cepat dan Aman Selain Chrome" decoding="async" srcset="https://www.qwords.com/blog/wp-content/uploads/2025/03/alternatif-browser-01-300x223.jpg 300w, https://www.qwords.com/blog/wp-content/uploads/2025/03/alternatif-browser-01-800x595.jpg 800w, https://www.qwords.com/blog/wp-content/uploads/2025/03/alternatif-browser-01-1024x762.jpg 1024w, https://www.qwords.com/blog/wp-content/uploads/2025/03/alternatif-browser-01-768x572.jpg 768w, https://www.qwords.com/blog/wp-content/uploads/2025/03/alternatif-browser-01.jpg 1333w" sizes="(max-width: 300px) 100vw, 300px" /> </a> <a href="https://www.qwords.com/blog/category/website/" class="badge bg-1 fs-8"> Website </a> </div> </div> <div class="card-corner white no-border"> <a href="https://www.qwords.com/blog/alternatif-browser-ringan-yang-cepat-dan-aman/" class="arrow-box" aria-label="View more"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> <path d="M13.75 6.75L19.25 12L13.75 17.25" stroke="#0E0E0F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M19 12H4.75" stroke="#0E0E0F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </a> <div class="curve-one"></div> <div class="curve-two"></div> </div> </div> <div class="card-body mt-4"> <a href="https://www.qwords.com/blog/alternatif-browser-ringan-yang-cepat-dan-aman/" class="hover-underline"> <h6 class="card-title mb-0">8 Alternatif Browser Ringan yang Cepat dan Aman Selain Chrome</h6> </a> </div> </div> </div> <div class="col-md-6 col-lg-3"> <div class="article card-5"> <div class="post-link"> <div class="hover-effect-1"> <div class="position-relative card-img-top thumbnail"> <a href="https://www.qwords.com/blog/template-website-koperasi/"> <img width="300" height="223" src="https://www.qwords.com/blog/wp-content/uploads/2025/09/Template-Website-Koperasi-dengan-Fitur-Lengkap-qwords-300x223.webp" class="cover-image wp-post-image" alt="5 Template Website Koperasi dengan Fitur Lengkap" decoding="async" srcset="https://www.qwords.com/blog/wp-content/uploads/2025/09/Template-Website-Koperasi-dengan-Fitur-Lengkap-qwords-300x223.webp 300w, https://www.qwords.com/blog/wp-content/uploads/2025/09/Template-Website-Koperasi-dengan-Fitur-Lengkap-qwords-800x595.webp 800w, https://www.qwords.com/blog/wp-content/uploads/2025/09/Template-Website-Koperasi-dengan-Fitur-Lengkap-qwords-1024x762.webp 1024w, https://www.qwords.com/blog/wp-content/uploads/2025/09/Template-Website-Koperasi-dengan-Fitur-Lengkap-qwords-768x572.webp 768w, https://www.qwords.com/blog/wp-content/uploads/2025/09/Template-Website-Koperasi-dengan-Fitur-Lengkap-qwords.webp 1333w" sizes="(max-width: 300px) 100vw, 300px" /> </a> <a href="https://www.qwords.com/blog/category/website/" class="badge bg-1 fs-8"> Website </a> </div> </div> <div class="card-corner white no-border"> <a href="https://www.qwords.com/blog/template-website-koperasi/" class="arrow-box" aria-label="View more"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> <path d="M13.75 6.75L19.25 12L13.75 17.25" stroke="#0E0E0F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M19 12H4.75" stroke="#0E0E0F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </a> <div class="curve-one"></div> <div class="curve-two"></div> </div> </div> <div class="card-body mt-4"> <a href="https://www.qwords.com/blog/template-website-koperasi/" class="hover-underline"> <h6 class="card-title mb-0">5 Template Website Koperasi dengan Fitur Lengkap</h6> </a> </div> </div> </div> <div class="col-md-6 col-lg-3"> <div class="article card-5"> <div class="post-link"> <div class="hover-effect-1"> <div class="position-relative card-img-top thumbnail"> <a href="https://www.qwords.com/blog/apa-itu-website/"> <img width="300" height="223" src="https://www.qwords.com/blog/wp-content/uploads/2022/09/Apa-itu-website-300x223.jpg" class="cover-image wp-post-image" alt="Apa Itu Website? Definisi, Contoh, dan Manfaatnya" decoding="async" srcset="https://www.qwords.com/blog/wp-content/uploads/2022/09/Apa-itu-website-300x223.jpg 300w, https://www.qwords.com/blog/wp-content/uploads/2022/09/Apa-itu-website-768x571.jpg 768w, https://www.qwords.com/blog/wp-content/uploads/2022/09/Apa-itu-website.jpg 1000w" sizes="(max-width: 300px) 100vw, 300px" /> </a> <a href="https://www.qwords.com/blog/category/website/" class="badge bg-1 fs-8"> Website </a> </div> </div> <div class="card-corner white no-border"> <a href="https://www.qwords.com/blog/apa-itu-website/" class="arrow-box" aria-label="View more"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> <path d="M13.75 6.75L19.25 12L13.75 17.25" stroke="#0E0E0F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M19 12H4.75" stroke="#0E0E0F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </a> <div class="curve-one"></div> <div class="curve-two"></div> </div> </div> <div class="card-body mt-4"> <a href="https://www.qwords.com/blog/apa-itu-website/" class="hover-underline"> <h6 class="card-title mb-0">Apa Itu Website? Definisi, Contoh, dan Manfaatnya</h6> </a> </div> </div> </div> <div class="col-md-6 col-lg-3"> <div class="article card-5"> <div class="post-link"> <div class="hover-effect-1"> <div class="position-relative card-img-top thumbnail"> <a href="https://www.qwords.com/blog/apa-itu-whitespace/"> <img width="300" height="223" src="https://www.qwords.com/blog/wp-content/uploads/2025/09/Memahami-Whitespace-pada-Desain-Website-qwords-300x223.webp" class="cover-image wp-post-image" alt="Memahami Whitespace pada Desain Website, Apa Fungsinya?" decoding="async" srcset="https://www.qwords.com/blog/wp-content/uploads/2025/09/Memahami-Whitespace-pada-Desain-Website-qwords-300x223.webp 300w, https://www.qwords.com/blog/wp-content/uploads/2025/09/Memahami-Whitespace-pada-Desain-Website-qwords-800x595.webp 800w, https://www.qwords.com/blog/wp-content/uploads/2025/09/Memahami-Whitespace-pada-Desain-Website-qwords-1024x762.webp 1024w, https://www.qwords.com/blog/wp-content/uploads/2025/09/Memahami-Whitespace-pada-Desain-Website-qwords-768x572.webp 768w, https://www.qwords.com/blog/wp-content/uploads/2025/09/Memahami-Whitespace-pada-Desain-Website-qwords.webp 1333w" sizes="(max-width: 300px) 100vw, 300px" /> </a> <a href="https://www.qwords.com/blog/category/website/" class="badge bg-1 fs-8"> Website </a> </div> </div> <div class="card-corner white no-border"> <a href="https://www.qwords.com/blog/apa-itu-whitespace/" class="arrow-box" aria-label="View more"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> <path d="M13.75 6.75L19.25 12L13.75 17.25" stroke="#0E0E0F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M19 12H4.75" stroke="#0E0E0F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </a> <div class="curve-one"></div> <div class="curve-two"></div> </div> </div> <div class="card-body mt-4"> <a href="https://www.qwords.com/blog/apa-itu-whitespace/" class="hover-underline"> <h6 class="card-title mb-0">Memahami Whitespace pada Desain Website, Apa Fungsinya?</h6> </a> </div> </div> </div> </div> </div> </section> </main>   <footer> <div class="section-footer-2 overflow-hidden"> <div class="container"> <div class="footer-top pt-5 pb-3"> <div class="row"> <div class="col-lg-4 col-sm-6"><div id="magzin_info_widget-2" class="footer-widget mt-3 mt-lg-0 column-1 widget_magzin_info_widget">  <div class=""> <a class="dark-mode-invert" href="https://www.qwords.com/blog/"> <img src="https://www.qwords.com/blog/wp-content/uploads/2026/03/Logo_Qwords-no_key-small1.png" alt="Qwords Blog"> </a> </div>  <p class="fs-7 text-dark mt-4 mb-0">Cloud Web Hosting. Domain & hosting terbaik dengan akses cepat yang didukung layanan support 24/7</p>  </div> </div><div class="col-lg-4 col-sm-6"><div id="categories-3" class="footer-widget mt-3 mt-lg-0 column-2 widget_categories"><div class="sidebar_widget_title mb-3">Topik Artikel</div> <ul> <li class="cat-item cat-item-9416"><a href="https://www.qwords.com/blog/category/artificial-intelligence/">Artificial Intelligence</a> <span class="float-right">(30)</span> </li> <li class="cat-item cat-item-1"><a href="https://www.qwords.com/blog/category/artikel-terbaru/">Artikel Terbaru</a> <span class="float-right">(14)</span> </li> <li class="cat-item cat-item-9389"><a href="https://www.qwords.com/blog/category/berita/">Berita</a> <span class="float-right">(139)</span> </li> <li class="cat-item cat-item-9388"><a href="https://www.qwords.com/blog/category/bisnis/">Bisnis</a> <span class="float-right">(334)</span> </li> <li class="cat-item cat-item-10471"><a href="https://www.qwords.com/blog/category/berita/client-story/">Client Story</a> <span class="float-right">(1)</span> </li> <li class="cat-item cat-item-9406"><a href="https://www.qwords.com/blog/category/hosting/cloud-hosting/">Cloud Hosting</a> <span class="float-right">(8)</span> </li> <li class="cat-item cat-item-9400"><a href="https://www.qwords.com/blog/category/hosting/dedicated-hosting/">Dedicated Hosting</a> <span class="float-right">(3)</span> </li> <li class="cat-item cat-item-9401"><a href="https://www.qwords.com/blog/category/hosting/dedicated-server/">Dedicated Server</a> <span class="float-right">(10)</span> </li> <li class="cat-item cat-item-7296"><a href="https://www.qwords.com/blog/category/design/">Design</a> <span class="float-right">(51)</span> </li> <li class="cat-item cat-item-3"><a href="https://www.qwords.com/blog/category/digital-marketing/">Digital Marketing</a> <span class="float-right">(147)</span> </li> <li class="cat-item cat-item-4626"><a href="https://www.qwords.com/blog/category/domain/">Domain</a> <span class="float-right">(174)</span> </li> <li class="cat-item cat-item-8"><a href="https://www.qwords.com/blog/category/ebook/">eBook</a> <span class="float-right">(8)</span> </li> <li class="cat-item cat-item-9393"><a href="https://www.qwords.com/blog/category/email/">Email</a> <span class="float-right">(52)</span> </li> <li class="cat-item cat-item-9394"><a href="https://www.qwords.com/blog/category/email/email-client/">Email Client</a> <span class="float-right">(2)</span> </li> <li class="cat-item cat-item-9395"><a href="https://www.qwords.com/blog/category/email/email-marketing/">Email Marketing</a> <span class="float-right">(15)</span> </li> <li class="cat-item cat-item-4627"><a href="https://www.qwords.com/blog/category/hosting/">Hosting</a> <span class="float-right">(178)</span> </li> <li class="cat-item cat-item-9404"><a href="https://www.qwords.com/blog/category/website/javascript/">JavaScript</a> <span class="float-right">(8)</span> </li> <li class="cat-item cat-item-9397"><a href="https://www.qwords.com/blog/category/email/microsoft365/">Microsoft365</a> <span class="float-right">(2)</span> </li> <li class="cat-item cat-item-9403"><a href="https://www.qwords.com/blog/category/website/php/">PHP</a> <span class="float-right">(13)</span> </li> <li class="cat-item cat-item-10381"><a href="https://www.qwords.com/blog/category/berita/produk-update/">Produk Update</a> <span class="float-right">(1)</span> </li> <li class="cat-item cat-item-4573"><a href="https://www.qwords.com/blog/category/promo/">Promo</a> <span class="float-right">(19)</span> </li> <li class="cat-item cat-item-4630"><a href="https://www.qwords.com/blog/category/security/">Security</a> <span class="float-right">(145)</span> </li> <li class="cat-item cat-item-9391"><a href="https://www.qwords.com/blog/category/digital-marketing/sem/">SEM</a> <span class="float-right">(21)</span> </li> <li class="cat-item cat-item-9326"><a href="https://www.qwords.com/blog/category/digital-marketing/seo/">SEO</a> <span class="float-right">(111)</span> </li> <li class="cat-item cat-item-9905"><a href="https://www.qwords.com/blog/category/server/">Server</a> <span class="float-right">(26)</span> </li> <li class="cat-item cat-item-9398"><a href="https://www.qwords.com/blog/category/hosting/shared-hosting/">Shared Hosting</a> <span class="float-right">(6)</span> </li> <li class="cat-item cat-item-9392"><a href="https://www.qwords.com/blog/category/digital-marketing/social-media/">Social Media</a> <span class="float-right">(69)</span> </li> <li class="cat-item cat-item-9407"><a href="https://www.qwords.com/blog/category/teknologi/">Teknologi</a> <span class="float-right">(182)</span> </li> <li class="cat-item cat-item-5"><a href="https://www.qwords.com/blog/category/tips/">Tips</a> <span class="float-right">(237)</span> </li> <li class="cat-item cat-item-9396"><a href="https://www.qwords.com/blog/category/email/titan-mail/">Titan Mail</a> <span class="float-right">(2)</span> </li> <li class="cat-item cat-item-10379"><a href="https://www.qwords.com/blog/category/berita/tren-industri/">Tren Industri</a> <span class="float-right">(4)</span> </li> <li class="cat-item cat-item-9405"><a href="https://www.qwords.com/blog/category/tutorial/">Tutorial</a> <span class="float-right">(278)</span> </li> <li class="cat-item cat-item-9399"><a href="https://www.qwords.com/blog/category/hosting/vps/">VPS</a> <span class="float-right">(43)</span> </li> <li class="cat-item cat-item-9390"><a href="https://www.qwords.com/blog/category/website/">Website</a> <span class="float-right">(290)</span> </li> <li class="cat-item cat-item-9402"><a href="https://www.qwords.com/blog/category/website/wordpress/">WordPress</a> <span class="float-right">(124)</span> </li> </ul> </div></div><div class="col-lg-4 col-sm-6"><div id="magzin_most_viewed_posts-2" class="footer-widget mt-3 mt-lg-0 column-3 widget_magzin_most_viewed_posts"><div class="sidebar_widget_title mb-3">Artikel Trending</div><div class="magzin-most-viewed-posts"> <div class="hover-up mb-3"> <div class="article card-10 style-1"> <div class="hover-effect-1"> <a href="https://www.qwords.com/blog/promo-ramadan/" class="card-img"> <img class="w-100" src="https://www.qwords.com/blog/wp-content/uploads/2026/02/Promo-Ramadan-Qwords-300x225.webp" alt="Promo Ramadan 2026: Diskon Domain dan Hosting Qwords"> </a> </div> <div class="card-body"> <a href="https://www.qwords.com/blog/promo-ramadan/"> <div class="fs-7 mb-2 text-truncate-2 sidebar-post-title">Promo Ramadan 2026: Diskon Domain dan Hosting Qwords</div> </a> <div class="d-flex align-items-center text-600 gap-3"> <span class="fs-8">6 mins read</span> <span class="fs-8">•</span> <span class="fs-8">2763 views</span> </div> </div> </div> </div> <div class="hover-up mb-3"> <div class="article card-10 style-1"> <div class="hover-effect-1"> <a href="https://www.qwords.com/blog/panduan-promo-domain-id/" class="card-img"> <img class="w-100" src="https://www.qwords.com/blog/wp-content/uploads/2025/11/promo-domain-id-qwords-300x223.webp" alt="Panduan Lengkap Promo Domain .ID dan Diskon Terbaru Qwords"> </a> </div> <div class="card-body"> <a href="https://www.qwords.com/blog/panduan-promo-domain-id/"> <div class="fs-7 mb-2 text-truncate-2 sidebar-post-title">Panduan Lengkap Promo Domain .ID dan Diskon Terbaru Qwords</div> </a> <div class="d-flex align-items-center text-600 gap-3"> <span class="fs-8">6 mins read</span> <span class="fs-8">•</span> <span class="fs-8">2761 views</span> </div> </div> </div> </div> <div class="hover-up mb-3"> <div class="article card-10 style-1"> <div class="hover-effect-1"> <a href="https://www.qwords.com/blog/qwords-jadi-registrar-terakreditasi-icann/" class="card-img"> <img class="w-100" src="https://www.qwords.com/blog/wp-content/uploads/2022/07/Qwords-Registrar-ICANNx-1-300x223.webp" alt="Qwords Jadi Registrar Terakreditasi ICANN, Apa Untungnya?"> </a> </div> <div class="card-body"> <a href="https://www.qwords.com/blog/qwords-jadi-registrar-terakreditasi-icann/"> <div class="fs-7 mb-2 text-truncate-2 sidebar-post-title">Qwords Jadi Registrar Terakreditasi ICANN, Apa Untungnya?</div> </a> <div class="d-flex align-items-center text-600 gap-3"> <span class="fs-8">3 mins read</span> <span class="fs-8">•</span> <span class="fs-8">2280 views</span> </div> </div> </div> </div> <div class="hover-up mb-3"> <div class="article card-10 style-1"> <div class="card-body"> <a href="https://www.qwords.com/blog/cara-melacak-hp-yang-hilang/"> <div class="fs-7 mb-2 text-truncate-2 sidebar-post-title">Cara Melacak HP yang Hilang dalam Keadaan Mati atau Menyala</div> </a> <div class="d-flex align-items-center text-600 gap-3"> <span class="fs-8">5 mins read</span> <span class="fs-8">•</span> <span class="fs-8">48061 views</span> </div> </div> </div> </div> <div class="hover-up mb-3"> <div class="article card-10 style-1"> <div class="hover-effect-1"> <a href="https://www.qwords.com/blog/dns-server-terbaik/" class="card-img"> <img class="w-100" src="https://www.qwords.com/blog/wp-content/uploads/2024/12/Cover-Blog-Qwords-DNS-Server-Terbaik-300x223.webp" alt="10 DNS Server Terbaik di 2026 (Terupdate)"> </a> </div> <div class="card-body"> <a href="https://www.qwords.com/blog/dns-server-terbaik/"> <div class="fs-7 mb-2 text-truncate-2 sidebar-post-title">10 DNS Server Terbaik di 2026 (Terupdate)</div> </a> <div class="d-flex align-items-center text-600 gap-3"> <span class="fs-8">8 mins read</span> <span class="fs-8">•</span> <span class="fs-8">35666 views</span> </div> </div> </div> </div> <div class="hover-up mb-3"> <div class="article card-10 style-1"> <div class="hover-effect-1"> <a href="https://www.qwords.com/blog/aplikasi-random-video-call/" class="card-img"> <img class="w-100" src="https://www.qwords.com/blog/wp-content/uploads/2022/02/Random-Video-Call-300x223.webp" alt="8+ Aplikasi Random Video Call Terbaik, Bantu Belajar Bahasa Asing!"> </a> </div> <div class="card-body"> <a href="https://www.qwords.com/blog/aplikasi-random-video-call/"> <div class="fs-7 mb-2 text-truncate-2 sidebar-post-title">8+ Aplikasi Random Video Call Terbaik, Bantu Belajar Bahasa Asing!</div> </a> <div class="d-flex align-items-center text-600 gap-3"> <span class="fs-8">6 mins read</span> <span class="fs-8">•</span> <span class="fs-8">31678 views</span> </div> </div> </div> </div> </div></div></div> </div> </div> </div> <div class="footer-bottom"> <div class="container"> <div class="row align-items-center"> <div class="col-12"> <div class="bottom-footer3 d-flex flex-wrap justify-content-lg-between justify-content-center align-items-center gap-lg-5 gap-3"> <p class="mb-0 mt-0 fs-7">Copyright © 2026 Qwords</p>  </div> </div> </div> </div> </div> </div> </footer> <div class="btn-scroll-top"> <svg class="progress-square svg-content" width="100%" height="100%" viewBox="0 0 40 40"> <path d="M20 1a19 19 0 1 1 0 38 19 19 0 0 1 0-38" /> </svg> </div> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/blog/*"},{"not":{"href_matches":["/blog/wp-*.php","/blog/wp-admin/*","/blog/wp-content/uploads/*","/blog/wp-content/*","/blog/wp-content/plugins/*","/blog/wp-content/themes/magzin-child/*","/blog/wp-content/themes/magzin/*","/blog/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <script>(function(w, d, t, h, s, n) { w.FlodeskObject = n; var fn = function() { (w[n].q = w[n].q || []).push(arguments); }; w[n] = w[n] || fn; var f = d.getElementsByTagName(t)[0]; var v = '?v=' + Math.floor(new Date().getTime() / (120 * 1000)) * 60; var sm = d.createElement(t); sm.async = true; sm.type = 'module'; sm.src = h + s + '.mjs' + v; f.parentNode.insertBefore(sm, f); var sn = d.createElement(t); sn.async = true; sn.noModule = true; sn.src = h + s + '.js' + v; f.parentNode.insertBefore(sn, f); })(window, document, 'script', 'https://assets.flodesk.com', '/universal', 'fd');</script> <script id='kirki-viewport-lists'>var kirkiViewports = {"md":{"value":1200,"scale":1,"minWidth":1200,"maxWidth":1200,"title":"Desktop","icon":"desktop","activeIcon":"desktop-hover","id":"md","type":"max"},"tablet":{"value":991,"scale":1,"minWidth":991,"maxWidth":991,"title":"Tablet","icon":"tablet-default","activeIcon":"tablet-hover","type":"max","id":"tablet"},"mobileLandscape":{"value":767,"scale":1,"minWidth":767,"maxWidth":767,"title":"Landscape","icon":"phone-hr-default","activeIcon":"phone-hr-hover","type":"max","id":"mobileLandscape"},"mobile":{"value":575,"scale":1,"minWidth":575,"maxWidth":575,"title":"Mobile","icon":"phone-vr-default","activeIcon":"phone-vr-hover","type":"max","id":"mobile"}};</script><script id='kirki-variable-lists'>var kirkiCSSVariable = {"data":[{"title":"Colors","key":"color","modes":[{"title":"Default","key":"default"}],"variables":[]},{"title":"Numbers","key":"size","modes":[{"title":"Default","key":"default"}],"variables":[]},{"title":"Text Styles","key":"text-style","modes":[{"title":"Default","key":"default"}],"variables":[]},{"title":"Font Family","key":"font-family","modes":[{"title":"Default","key":"default"}],"variables":[]}]};</script><script id="kirki-api-and-nonce"> window.wp_kirki = { ajaxUrl: "https://www.qwords.com/blog/wp-admin/admin-ajax.php", restUrl: "https://www.qwords.com/blog/wp-json/", siteUrl: "https://www.qwords.com/blog", apiVersion: "v1", postId: "40157", nonce: "3273b895a9", call_from: "", templateId: "", context: {"id":40157,"type":"post"} }; </script><script src="https://assets.flodesk.com/universal.js"></script> <link href="https://client-chat.genio.id/static/css/main.css" rel="stylesheet"> <div id="root-client-chatvolution"></div> <script defer="defer" id="qchat-client" src="https://client-chat.genio.id/static/js/bundle.js?api_key=$2y$10$xmfKbGDdNIxT8WvMdb.lTeLaHfZImDEl0SuNbgNeCCVyG5f4fHazi"></script> <style> #root-client-chatvolution { position: fixed !important; right: 30px !important; /* Naikkan posisi agar berada di atas tombol UP */ bottom: 200px !important; z-index: 10000 !important; } @media (max-width: 480px) { #root-client-chatvolution { bottom: 150px !important; right: 15px !important; } } </style> <script> (function() { function initializeChat() { const checkExist = setInterval(function() { if (document.getElementById('root-client-chatvolution')) { console.log("Chat Genio Ready!"); clearInterval(checkExist); } }, 500); setTimeout(() => clearInterval(checkExist), 10000); } window.addEventListener('load', initializeChat); })(); </script> <script> const lazyloadRunObserver = () => { const lazyloadBackgrounds = document.querySelectorAll( `.e-con.e-parent:not(.e-lazyloaded)` ); const lazyloadBackgroundObserver = new IntersectionObserver( ( entries ) => { entries.forEach( ( entry ) => { if ( entry.isIntersecting ) { let lazyloadBackground = entry.target; if( lazyloadBackground ) { lazyloadBackground.classList.add( 'e-lazyloaded' ); } lazyloadBackgroundObserver.unobserve( entry.target ); } }); }, { rootMargin: '200px 0px 200px 0px' } ); lazyloadBackgrounds.forEach( ( lazyloadBackground ) => { lazyloadBackgroundObserver.observe( lazyloadBackground ); } ); }; const events = [ 'DOMContentLoaded', 'elementor/lazyload/observe', ]; events.forEach( ( event ) => { document.addEventListener( event, lazyloadRunObserver ); } ); </script> <link data-optimized="1" rel='stylesheet' id='lwptoc-main-css' href='https://www.qwords.com/blog/wp-content/litespeed/css/be8005bd44e009ca6accb0e21cfccbf3.css?ver=c6d8f' media='all' /> <script data-optimized="1" id="wp-hooks-js" src="https://www.qwords.com/blog/wp-content/litespeed/js/fc6b8c1e3d0c2837937af2750f0b53e9.js?ver=9d75f"></script> <script data-optimized="1" id="wp-i18n-js" src="https://www.qwords.com/blog/wp-content/litespeed/js/98af34b7080a2c58b8b9a9311b584be3.js?ver=0614d"></script> <script id="wp-i18n-js-after"> wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } ); //# sourceURL=wp-i18n-js-after </script> <script data-optimized="1" id="swv-js" src="https://www.qwords.com/blog/wp-content/litespeed/js/ac401c6c3ecda1912cba71dbaa3b2d3b.js?ver=5acde"></script> <script id="contact-form-7-js-translations"> ( function( domain, translations ) { var localeData = translations.locale_data[ domain ] || translations.locale_data.messages; localeData[""].domain = domain; wp.i18n.setLocaleData( localeData, domain ); } )( "contact-form-7", {"translation-revision-date":"2025-08-05 08:34:12+0000","generator":"GlotPress\/4.0.3","domain":"messages","locale_data":{"messages":{"":{"domain":"messages","plural-forms":"nplurals=2; plural=n > 1;","lang":"id"},"Error:":["Eror:"]}},"comment":{"reference":"includes\/js\/index.js"}} ); //# sourceURL=contact-form-7-js-translations </script> <script id="contact-form-7-js-before"> var wpcf7 = { "api": { "root": "https:\/\/www.qwords.com\/blog\/wp-json\/", "namespace": "contact-form-7\/v1" }, "cached": 1 }; //# sourceURL=contact-form-7-js-before </script> <script data-optimized="1" id="contact-form-7-js" src="https://www.qwords.com/blog/wp-content/litespeed/js/8ab970a1cee0b6c0d248d3c9d27e93c5.js?ver=21ff3"></script> <script data-optimized="1" id="scroll-to-top-js" src="https://www.qwords.com/blog/wp-content/litespeed/js/d177b6cb74c3caf08010b9a82e21d512.js?ver=c9c37"></script> <script id="color-modes-js-before"> window.magzinThemeConfig = {"defaultDarkMode":false};(function() { "use strict"; var defaultTheme = window.magzinThemeConfig?.defaultDarkMode ? "dark" : "light"; var storedTheme = localStorage.getItem("theme") || defaultTheme; document.documentElement.setAttribute("data-bs-theme", storedTheme); })(); //# sourceURL=color-modes-js-before </script> <script data-optimized="1" id="color-modes-js" src="https://www.qwords.com/blog/wp-content/litespeed/js/194ad720998cd5e16f3d0eaaa853ada3.js?ver=4856f"></script> <script data-optimized="1" id="smart-stick-nav-js" src="https://www.qwords.com/blog/wp-content/litespeed/js/9cbca880ce04a739d74a01ef6467e0a0.js?ver=b5fa6"></script> <script data-optimized="1" id="swiper-js" src="https://www.qwords.com/blog/wp-content/litespeed/js/f8e4ee42cb565e373a9b3f111767246b.js?ver=21003"></script> <script data-optimized="1" id="aos-js" src="https://www.qwords.com/blog/wp-content/litespeed/js/d684b6459199bfa35af0ae92f5842dda.js?ver=91d96"></script> <script data-optimized="1" id="wow-js" src="https://www.qwords.com/blog/wp-content/litespeed/js/20a9be27e0da0b884a4b2c77770d4a06.js?ver=a3495"></script> <script data-optimized="1" id="headhesive-js" src="https://www.qwords.com/blog/wp-content/litespeed/js/a75fabce87a2df8dd6f9b10c9540b6e7.js?ver=e387e"></script> <script data-optimized="1" id="magnific-popup-js" src="https://www.qwords.com/blog/wp-content/litespeed/js/e5f05d6562b4b289bb9ddaf40d690b78.js?ver=7d4b8"></script> <script data-optimized="1" id="gsap-js" src="https://www.qwords.com/blog/wp-content/litespeed/js/560714a47032d1e9b68093bf032a0ea6.js?ver=e0b20"></script> <script data-optimized="1" id="scroll-to-js" src="https://www.qwords.com/blog/wp-content/litespeed/js/d177b6cb74c3caf08010b9a82e21d512.js?ver=c9c37"></script> <script data-optimized="1" id="scroll-trigger-js" src="https://www.qwords.com/blog/wp-content/litespeed/js/11c0916e4a064dc3baa7ba3c3a146fa0.js?ver=f0cf5"></script> <script data-optimized="1" id="splite-text-js" src="https://www.qwords.com/blog/wp-content/litespeed/js/590447e200ef55e69b91d5502cb8165b.js?ver=28698"></script> <script data-optimized="1" id="howler-js" src="https://www.qwords.com/blog/wp-content/litespeed/js/aedcd970405b56f4d38a803f76455314.js?ver=d41b1"></script> <script data-optimized="1" id="carousel-ticker-js" src="https://www.qwords.com/blog/wp-content/litespeed/js/d899c7b0aef316d1e28fdeaa4e4dee36.js?ver=50ef6"></script> <script data-optimized="1" id="odometer-js" src="https://www.qwords.com/blog/wp-content/litespeed/js/e214671bfa5d6e45c3206c744814af66.js?ver=bfb46"></script> <script data-optimized="1" id="appear-js" src="https://www.qwords.com/blog/wp-content/litespeed/js/40fef01d2d6b1e8cbd7fc850eb1d2bc3.js?ver=6175d"></script> <script data-optimized="1" id="gsap-custom-js" src="https://www.qwords.com/blog/wp-content/litespeed/js/382424f16e4d87727dcc4026c00d498e.js?ver=a3735"></script> <script data-optimized="1" id="image-hover-effects-js" src="https://www.qwords.com/blog/wp-content/litespeed/js/93d45005fdee2108a20b3f0da8d8acad.js?ver=36657"></script> <script data-optimized="1" id="magzin-main-js" src="https://www.qwords.com/blog/wp-content/litespeed/js/464899e35109eb8c6d9f7d7b95c50fb2.js?ver=0ff06"></script> <script data-optimized="1" async data-wp-strategy="async" fetchpriority="low" id="comment-reply-js" src="https://www.qwords.com/blog/wp-content/litespeed/js/954deca46a056057ff57dc73609b36d7.js?ver=ab238"></script> <script id="EasyTickerJS-js" src="https://cdn.jsdelivr.net/gh/vaakash/jquery-easy-ticker@master/dist/jquery.easy-ticker.min.js?ver=1780722027"></script> <script data-optimized="1" id="enlighterjs-js" src="https://www.qwords.com/blog/wp-content/litespeed/js/727a1263b91f82ba1d0ec7689dc55cde.js?ver=91957"></script> <script id="enlighterjs-js-after"> !function(e,n){if("undefined"!=typeof EnlighterJS){var o={"selectors":{"block":"pre.EnlighterJSRAW","inline":"code.EnlighterJSRAW"},"options":{"indent":-1,"ampersandCleanup":true,"linehover":true,"rawcodeDbclick":true,"textOverflow":"break","linenumbers":true,"theme":"enlighter","language":"generic","retainCssClasses":false,"collapse":false,"toolbarOuter":"","toolbarTop":"{BTN_RAW}{BTN_COPY}{BTN_WINDOW}{BTN_WEBSITE}","toolbarBottom":""}};(e.EnlighterJSINIT=function(){EnlighterJS.init(o.selectors.block,o.selectors.inline,o.options)})()}else{(n&&(n.error||n.log)||function(){})("Error: EnlighterJS resources not loaded yet!")}}(window,console); //# sourceURL=enlighterjs-js-after </script> <script data-optimized="1" id="lwptoc-main-js" src="https://www.qwords.com/blog/wp-content/litespeed/js/6dedc9dc216499c2b984b7fe75c75ff1.js?ver=e23dd"></script> <script data-optimized="1" defer id="akismet-frontend-js" src="https://www.qwords.com/blog/wp-content/litespeed/js/41e73dc7d8008a43fb004b1c4e6b5829.js?ver=a59cf"></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://www.qwords.com/blog/wp-includes/js/wp-emoji-release.min.js?ver=7.0"}} </script> <script type="module"> /*! 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://www.qwords.com/blog/wp-includes/js/wp-emoji-loader.min.js </script> <style>.lwptoc .lwptoc_i{background-color:#f9f9f9;}</style> <style> /* Wrapper luar untuk memastikan layout block */ .tutorial-wrapper { display: block; width: 100%; margin: 25px 0; clear: both; } .tutorial-container { background: #1e1e1e; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.25); font-family: 'Consolas', 'Monaco', 'Courier New', monospace; overflow: hidden; /* Penting agar anak elemen tidak keluar */ display: flex; flex-direction: column; text-align: left; position: relative; border: 1px solid #333; } /* HEADER */ .tutorial-header { background: #252526; padding: 10px 15px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #333; width: 100%; box-sizing: border-box; } .dots-wrapper { display: flex; gap: 6px; } .dot { height: 11px; width: 11px; border-radius: 50%; } .red { background: #ff5f56; } .yellow { background: #ffbd2e; } .green { background: #27c93f; } /* BODY KODE */ .code-wrapper { background: #1e1e1e; display: block; width: 100%; box-sizing: border-box; position: relative; } .code-wrapper pre { margin: 0 !important; padding: 20px !important; background: transparent !important; border: none !important; color: #d4d4d4; font-family: inherit; font-size: 13px; line-height: 1.5; overflow-x: auto; /* Scroll jika kepanjangan */ white-space: pre !important; /* Mencegah wrap paksa */ width: 100%; } .code-wrapper code { font-family: inherit !important; color: inherit !important; background: none !important; padding: 0 !important; white-space: pre !important; } .copy-btn-tutorial { background: #444; color: #fff; border: 1px solid #555; padding: 4px 10px; font-size: 11px; border-radius: 3px; cursor: pointer; line-height: normal; } .copy-btn-tutorial:hover { background: #555; } </style> <script> function copyCode(button) { const container = button.closest('.tutorial-container'); const codeText = container.querySelector('code').innerText; // Gunakan elemen textarea temp untuk menyalin format baris baru dengan benar const el = document.createElement('textarea'); el.value = codeText; document.body.appendChild(el); el.select(); document.execCommand('copy'); document.body.removeChild(el); const oldText = button.innerText; button.innerText = 'Copied!'; setTimeout(() => { button.innerText = oldText; }, 2000); } </script> </body> </html>