Memilih tema yang cocok untuk situs web WordPress Anda adalah langkah kunci menuju keberhasilan proyek. Sebuah tema yang berkualitas tidak hanya akan memberikan tampilan yang menarik, tetapi juga akan memastikan kestabilan, kecepatan, dan keamanan situs web tersebut. Dengan begitu banyak tema gratis maupun berbayar yang tersedia di pasaran, bagaimana cara membuat pilihan yang bijak? Panduan ini akan memberikan kerangka penilaian yang komprehensif kepada Anda dari berbagai aspek, seperti fitur inti, kinerja, keamanan, dan pemeliharaan jangka panjang.
Sebelum memulai menelusuri topik tertentu, sangat penting untuk menentukan tujuan dari situs web Anda terlebih dahulu. Tujuan yang berbeda akan menentukan kebutuhan akan fitur-fitur yang berbeda pula.
Pertama-tama, tentukan jenis situs web Anda: apakah itu blog, situs web perusahaan, toko e-commerce, platform kursus online, atau kumpulan karya (portfolio)? Misalnya, sebuah situs toko e-commerce harus memiliki fitur dan struktur yang khusus sesuai dengan kebutuhan bisnis tersebut. WooCommerce Plugin sangat kompatibel, sedangkan blog lebih menekankan pada pengalaman membaca dan tata letak kategorisasi. Buat daftar fitur yang harus Anda miliki, seperti template halaman tertentu (formulir kontak, profil tim), integrasi media sosial, dan dukungan multibahasa (mungkin diperlukan). WPML 或 Polylang Plugin, dll.
推荐阅读 Panduan Lengkap untuk Analisis Kinerja dan Optimasi Mendalam Situs WordPress.。
Desain tidak hanya harus menarik secara visual, tetapi juga harus sesuai dengan citra merek dan memberikan pengalaman pengguna yang berkualitas. Memilih tema yang menyediakan berbagai contoh tampilan (demo site) akan memungkinkan Anda dengan cepat mengimpor tata letak yang mendekati hasil akhir yang diinginkan. Desain responsif sangat penting, untuk memastikan situs web dapat ditampilkan dengan baik di ponsel, tablet, dan komputer. Periksa apakah tema tersebut menyediakan cukup opsi untuk penyesuaian, misalnya melalui alat pengaturan (customizer) WordPress.CustomizerAnda dapat dengan mudah mengubah warna, font, dan tata letak melalui panel opsi tema.
UltaHost – Hosting untuk WordPress Jaminan pengembalian uang dalam 30 hari, bandwidth dan basis data yang tidak terbatas, perlindungan DDoS gratis, diskon 50% untuk pembelian selama 3 tahun (dari harga normal: 50%).
Ada dua jenis tema: gratis dan berbayar. Tema gratis cocok untuk pemula dan proyek kecil, namun fitur dan dukungannya mungkin terbatas. Tema berbayar (umumnya harganya antara 30 hingga 100 dolar AS) biasanya menawarkan lebih banyak fitur, dukungan yang lebih profesional, serta pembaruan secara berkala. Pastikan Anda membaca syarat lisensi (License) dari tema tersebut untuk memastikan apakah tema tersebut hanya dapat digunakan untuk satu situs web atau untuk beberapa situs web, serta durasi pembaruan dan dukungannya.
Sebuah tema yang memiliki tampilan yang menarik namun proses pengunduhannya lambat akan langsung menyebabkan kehilangan pengguna dan mempengaruhi peringkat situs di mesin pencari. Kinerja teknis merupakan indikator yang tidak boleh dikompromikan.
Kode tema harus mengikuti standar pengkodean WordPress. Anda dapat menguji kinerja kecepatan tema tersebut dengan menggunakan alat online seperti Google PageSpeed Insights. Tema yang berat biasanya mengandung banyak skrip dan file gaya yang sebenarnya tidak diperlukan. Pilihlah tema yang ringan dan termodulasi, yang hanya memuat kode yang benar-benar diperlukan. Pastikan tema tersebut mendukung atau mengintegrasikan fitur seperti pengunduhan gambar secara lambat (lazy loading), pemadatan kode CSS/JavaScript, serta pengunduhan yang bersifat asinkron (async loading).
Struktur kode dari suatu tema sebaiknya mendukung optimalisasi untuk mesin pencari (SEO). Tema tersebut harus menghasilkan tag HTML5 yang bersifat semantik dan jelas (misalnya, dengan penggunaan tag yang sesuai dengan fungsinya). <header>、<article>、<section> Ini memungkinkan Anda untuk menambahkan tag meta (seperti tag
dan <meta)), dan memungkinkan Anda untuk dengan mudah mengatur judul SEO untuk halaman dan artikel.<code data-no-auto-translation="">SEO Title</code>Meta tags dan meta deskripsi<code data-no-auto-translation="">Meta Description</code>Banyak tema berkualitas tinggi cocok digunakan bersama dengan plugin SEO populer seperti… <code data-no-auto-translation="">Yoast SEO</code> 或 <code data-no-auto-translation="">Rank Math</code> Kompatibel dengan baik.</p> <p>推荐阅读 <a href="https://www.likacloud.com/tr/knowledge/seo/6-seo-tips-to-boost-organic-search-rankings/">6 Trik Optimisasi SEO yang Memberikan Efek Langsung, Meningkatkan Peringkat Situs Web dalam Pencarian Alami dengan Cepat</a>。</p> <h3 class="wp-block-heading cont-scroll-top" id="H-2-3">Browser Compatibility</h3> <p>Pastikan tema tersebut dapat ditampilkan dan berfungsi dengan benar di semua browser modern utama, seperti Chrome, Firefox, Safari, dan Edge. Meskipun pengembang tema biasanya melakukan pengujian, tetaplah merupakan kebiasaan yang baik untuk melakukan pemeriksaan singkat di lingkungan Anda sendiri.</p> <h2 class="wp-block-heading cont-scroll-top" id="H-3">Pastikan keamanan dan dukungan bagi para pengembang.</h2> <p>Keamanan suatu topik, serta tim pendukung yang berada di baliknya, menentukan kesehatan jangka panjang suatu situs web.</p> <h3 class="wp-block-heading cont-scroll-top" id="H-3-1">Pemeriksaan keamanan topik (Topic Security Review)</h3> <p>Tema harus berasal dari sumber yang terpercaya, seperti direktori tema resmi WordPress (WordPress.org), toko tema terkenal (seperti ThemeForest, Elegant Themes), atau pengembang independen yang memiliki reputasi baik. Hindari menggunakan tema versi “nulled” (versi yang telah diubah secara ilegal), karena biasanya mengandung kode berbahaya. <code data-no-auto-translation="">style.css</code> Pada bagian header dan deskripsi file, periksa tanggal pembaruan terbaru serta versi WordPress yang kompatibel dengannya. Tema yang diperbarui secara teratur memiliki kemungkinan lebih besar untuk memperbaiki kerentanan keamanan yang sudah diketahui.</p> <div class="flex justify-between items-center flex-col lg:flex-row xl:flex-col 2xl:flex-row gap-6 sm:gap-8 rounded-lg border border-gray-200 dark:border-gray-700 p-4 mb-8 lg:mb-10 sm:p-6 bg-white dark:bg-gray-750 shadow-md transition-colors duration-300" data-link="https://www.likacloud.com/id/tolink/hosting-shared-hosting/"> <div class="flex flex-col gap-3 gap-4 sm:gap-6 w-full"> <strong class="text-2xl font-semibold text-gray-900 dark:text-gray-200"> hosting.com hosting bersama </strong> <div class="text-gray-600 dark:text-gray-300 word-word">Kinerja tinggi, dilengkapi dengan CPU AMD EPYC, penyimpanan SSD NVMe, dan LiteSpeed, dukungan internal ahli 24 jam sehari, langkah-langkah keamanan canggih termasuk SSL, brute force, malware, dan perlindungan DDoS, menghemat hingga 731 TB/bulan.</div> </div> <div class="flex items-center flex-col md:flex-row lg:flex-col xl:flex-row 2xl:flex-col gap-6 shrink-0"> <a href="https://www.likacloud.com/id/tolink/hosting-shared-hosting/"> <img decoding="async" src="https://static.likacloud.com/data/attachment/2025/09/20250901222940.svg" alt="LOGO hosting.com" class="content-promotion-card-icon h-9 min-h-9 dark:hidden" title="Cara Memilih Tema WordPress Terbaik: Panduan Lengkap Dari Fungsi hingga Kinerja"> <img decoding="async" src="https://static.likacloud.com/data/attachment/2025/12/20251228220957.webp" alt="LOGO hosting.com" class="content-promotion-card-icon h-9 min-h-9 hidden dark:block" title="Cara Memilih Tema WordPress Terbaik: Panduan Lengkap Dari Fungsi hingga Kinerja"> </a> <a href="https://www.likacloud.com/id/tolink/hosting-shared-hosting/" class="bg-blue-500 w-full md:w-auto lg:w-full xl:w-auto 2xl:w-full text-center !text-white dark:!text-gray-200 !px-5 !py-1.5 rounded-full hover:bg-blue-600 transition-colors"> halaman akses </a> </div> </div> <h3 class="wp-block-heading cont-scroll-top" id="H-3-2">Dukungan pengembang dan frekuensi pembaruan.</h3> <p>Lihat forum dukungan atau sistem tiket terkait topik tersebut untuk mengetahui seberapa cepat para pengembang merespons dan seberapa baik kualitas penyelesaian masalah yang mereka lakukan. Catatan pembaruan yang aktif juga sangat penting untuk diikuti.<code data-no-auto-translation="">Changelog</code>Hal tersebut menunjukkan bahwa pengembang aktif memelihara produk tersebut, agar dapat beradaptasi dengan versi terbaru dari WordPress dan PHP, serta memperbaiki bug-bug yang ada. Tema yang tidak diperbarui dalam jangka waktu yang lama berisiko terhadap masalah keamanan dan masalah kompatibilitas.</p> <h3 class="wp-block-heading cont-scroll-top" id="H-3-3">Plugin Compatibility Testing</h3> <p>Situs web Anda kemungkinan besar memerlukan penginstalan berbagai plugin. Tema yang digunakan sebaiknya tidak bertentangan dengan plugin-plugin yang umum digunakan, seperti plugin formulir kontak, plugin cache, dan plugin keamanan. Cari petunjuk terkait di dokumen atau komentar tentang tema tersebut, lalu lakukan pengujian kompatibilitas baik di lingkungan lokal maupun di lingkungan pengujian.</p> <h2 class="wp-block-heading cont-scroll-top" id="H-4">Praktik: Pengujian dan Pengambilan Keputusan Akhir</h2> <p>Sebelum diterapkan dalam proyek nyata, melakukan pengujian yang menyeluruh merupakan langkah kunci untuk menghindari masalah di kemudian hari.</p> <p>推荐阅读 <a href="https://www.likacloud.com/tr/knowledge/cdn/cdn-acceleration-service-guide-principles-selection-best-practices/">Analisis Mendalam Layanan Akselerasi CDN di Seluruh Jaringan: Prinsip, Pemilihan Solusi, dan Panduan Praktik Terbaik</a>。</p> <h3 class="wp-block-heading cont-scroll-top" id="H-4-1">Membangun lingkungan pengujian lokal</h3> <p>Gunakan perangkat lunak server lokal seperti Local by Flywheel, XAMPP, atau DesktopServer untuk menginstal WordPress di komputer Anda. Setelah itu, instal tema yang Anda sukai dan ujilah fungsinya. Dengan cara ini, Anda dapat dengan aman mencoba semua fitur WordPress tanpa mempengaruhi situs web Anda yang berada di internet.</p> <h3 class="wp-block-heading cont-scroll-top" id="H-4-2">Impor konten presentasi dan sesuaikan sesuai keinginan Anda.</h3> <p>Impor konten demonstrasi yang disediakan oleh tema tersebut, dan lihat efeknya secara langsung. Setelah itu, cobalah melakukan modifikasi sesuai keinginan Anda, misalnya dengan menambahkan fitur tambahan (atau “gadget”).<code data-no-auto-translation="">Widgets</code>Gunakan menu editasi, serta alat pembangun halaman (page builder) (jika tema tersebut telah terintegrasi) untuk membuat halaman baru. Rasakan betapa lancar dan fleksibelnya proses penyesuaian (customization) tersebut.</p> <div class="flex justify-between items-center flex-col lg:flex-row xl:flex-col 2xl:flex-row gap-6 sm:gap-8 rounded-lg border border-gray-200 dark:border-gray-700 p-4 mb-8 lg:mb-10 sm:p-6 bg-white dark:bg-gray-750 shadow-md transition-colors duration-300" data-link="https://www.likacloud.com/id/tolink/interserver-webhosting/"> <div class="flex flex-col gap-3 gap-4 sm:gap-6 w-full"> <strong class="text-2xl font-semibold text-gray-900 dark:text-gray-200"> Hosting bersama InterServer. </strong> <div class="text-gray-600 dark:text-gray-300 word-word">Hosting bersama seharga $2,50 USD per bulan, diskon $0,1 USD untuk bulan pertama dengan kode promo tryinterserver, serta 461 skrip aplikasi cloud yang dapat diinstal dengan sekali klik.</div> </div> <div class="flex items-center flex-col md:flex-row lg:flex-col xl:flex-row 2xl:flex-col gap-6 shrink-0"> <a href="https://www.likacloud.com/id/tolink/interserver-webhosting/"> <img decoding="async" src="https://static.likacloud.com/data/attachment/2025/12/20251228045033.svg" alt="Logo InterServer." class="content-promotion-card-icon h-9 min-h-9 dark:hidden" title="Cara Memilih Tema WordPress Terbaik: Panduan Lengkap Dari Fungsi hingga Kinerja"> <img decoding="async" src="https://static.likacloud.com/data/attachment/2025/12/20251229054830.webp" alt="Logo InterServer." class="content-promotion-card-icon h-9 min-h-9 hidden dark:block" title="Cara Memilih Tema WordPress Terbaik: Panduan Lengkap Dari Fungsi hingga Kinerja"> </a> <a href="https://www.likacloud.com/id/tolink/interserver-webhosting/" class="bg-blue-500 w-full md:w-auto lg:w-full xl:w-auto 2xl:w-full text-center !text-white dark:!text-gray-200 !px-5 !py-1.5 rounded-full hover:bg-blue-600 transition-colors"> halaman akses </a> </div> </div> <h3 class="wp-block-heading cont-scroll-top" id="H-4-3">Periksa dokumen tema dan sumber dayanya.</h3> <p>Sebuah dokumen yang lengkap dan jelas merupakan ciri khas dari sebuah tema (theme) yang berkualitas. Dokumen tersebut seharusnya mencakup langkah-langkah pemasangan, petunjuk penggunaan untuk mengimpor data, penjelasan mengenai opsi-opsi yang tersedia dalam tema, serta jawaban atas pertanyaan-pertanyaan umum yang sering muncul. Beberapa tema bahkan menyediakan tutorial berbentuk video, yang sangat membantu terutama bagi pemula. Dokumen yang baik dapat secara signifikan mengurangi biaya dan waktu yang diperlukan untuk proses pembelajaran serta penggunaan tema tersebut.</p> <h2 class="wp-block-heading cont-scroll-top" id="H-5">Menyimpulkan.</h2> <p>Memilih tema WordPress yang terbaik merupakan proses pengambilan keputusan yang sistematis, yang memerlukan keseimbangan antara fitur, desain, kinerja, keamanan, dan dukungan. Mulailah dengan menentukan kebutuhan Anda sendiri, utamakan kualitas kode dan kecepatan pengunduhan (loading speed), periksa dengan teliti aspek keamanan serta reputasi pengembangnya, dan akhirnya verifikasi pilihan Anda melalui pengujian yang menyeluruh. Ingatlah bahwa tema merupakan fondasi dari sebuah situs web; fondasi yang dipilih dengan hati-hati akan memberikan dasar yang kuat untuk penciptaan konten di masa depan, pengembangan fitur, dan pengalaman pengguna.</p> <h2 class="wp-block-heading cont-scroll-top" id="H-6">FAQ - Pertanyaan yang Sering Diajukan.</h2> <h3 class="wp-block-heading cont-scroll-top" id="H-6-1">Apa perbedaan utama antara tema gratis dan tema berbayar?</h3> <p>Tema gratis umumnya memiliki fitur yang lebih dasar, dengan sedikit pilihan desain dan penyesuaian. Dukungan resmi terutama bergantung pada forum komunitas, dan pembaruan mungkin tidak selalu tepat waktu. Tema berbayar, di sisi lain, menawarkan fitur yang lebih lengkap, dukungan teknis yang lebih profesional dan lebih cepat, pembaruan keamanan serta fitur yang lebih sering, serta desain dan template halaman yang lebih berkualitas dan beragam. Untuk proyek komersial atau pengguna yang memiliki persyaratan khusus terhadap situs web, menginvestasikan uang untuk tema berbayar yang berkualitas biasanya merupakan pilihan yang lebih aman.</p> <h3 class="wp-block-heading cont-scroll-top" id="H-6-2">Bagaimana cara menentukan apakah sebuah tema bersifat ringan (lightweight) dan cepat dalam penggunaannya?</h3> <p>Anda dapat menentukannya melalui beberapa langkah. Pertama, lihat deskripsi tema dan daftar fiturnya, dan hindari memilih tema yang mengklaim memiliki “ratusan kode singkat” atau “banyak situs demonstrasi”. Kedua, gunakan alat seperti Google PageSpeed Insights atau GTmetrix untuk menguji situs demonstrasi resmi tema tersebut. Terakhir, setelah menginstal tema di lingkungan pengujian lokal, gunakan plugin pemantauan kueri (seperti Query Monitor) untuk memeriksa jumlah kueri database yang dijalankan dan jumlah file skrip yang digunakan oleh tema tersebut.</p> <h3 class="wp-block-heading cont-scroll-top" id="H-6-3">Apa hubungan antara tema dan plugin pembangun halaman (seperti Elementor)?</h3> <p>Kedua komponen tersebut dapat bekerja sama dengan baik. Banyak tema modern dirancang untuk berintegrasi dengan pembangun halaman (page builder) tertentu, seperti… <code data-no-auto-translation="">Elementor</code>、<code data-no-auto-translation="">WPBakery</code>、<code data-no-auto-translation="">Beaver Builder</code>Integrasi yang mendalam, bahkan penjualan dalam bentuk paket bersama dengan alat pembangun (builder) lainnya. Tema-tema jenis ini biasanya menyediakan modul dan template yang dirancang khusus untuk digunakan bersama alat pembangun tersebut. Ada juga tema yang bersifat “umum” atau “ringan” (lightweight”), yang tidak bergantung pada alat pembangun apa pun, dan hanya menyediakan gaya tampilan (style) serta tata letak (layout) dasar; Anda bebas memilih untuk menginstal plugin apa pun sesuai dengan kebutuhan Anda. Pilihlah jenis tema yang sesuai dengan rencana Anda dalam menggunakan alat pembangun halaman (page builder).</p> <h3 class="wp-block-heading cont-scroll-top" id="H-6-4">Apakah aman untuk mengganti tema situs web yang sudah terpublikasi?</h3> <p>Mengganti tema memiliki risiko, sehingga harus dilakukan dengan hati-hati. Sebelum mengganti tema, pastikan untuk melakukan uji coba terlebih dahulu di lingkungan pengujian (Staging Environment) atau lingkungan lokal. Penggantian tema dapat mempengaruhi tata letak situs web, fungsionalitas (terutama kode singkat atau modul yang bergantung pada fitur tertentu dari tema tersebut), serta posisi berbagai alat bantu (widgets). Setelah mengganti tema, periksa dengan cermat apakah tampilan dan fungsi semua halaman penting, artikel, dan fitur lainnya berjalan dengan benar. Sangat disarankan untuk melakukan backup lengkap terhadap situs web dan basis data sebelum melakukan proses penggantian tema.</p> <div class="ai-tail-links-wrapper"><h2>Selanjutnya, apa yang harus kita lakukan selanjutnya?</h2><p class="ai-tail-next-steps-intro">Jika Anda sedang membangun atau mengoptimalkan situs web WordPress, langkah selanjutnya adalah terus membaca tentang optimasi kinerja, konfigurasi plugin, dan kustomisasi tema.</p><ul class="ai-tail-next-steps-list"><li style="margin: 18px 0;"><a href="https://www.likacloud.com/id/knowledge/wordpress/10-woocommerce-performance-tips/">10 Tips dan Praktik Terbaik untuk Meningkatkan Kinerja Situs Web WooCommerce</a></li><li style="margin: 18px 0;"><a href="https://www.likacloud.com/id/knowledge/wordpress/wordpress-speed-optimization-cache-guide/">Panduan Akhir untuk Meningkatkan Kinerja Situs Web WordPress: Dari Optimisasi Dasar hingga Strategi Caching Tingkat Lanjut</a></li><li style="margin: 18px 0;"><a href="https://www.likacloud.com/id/knowledge/wordpress/wordpress-performance-optimization-guide-12412477/">Panduan Utama untuk Mengoptimalkan WordPress: Strategi Peningkatan Kinerja dan Optimasi Kecepatan dari Pemula hingga Ahli.</a></li></ul><h2>Bacaan lanjutan dan pengetahuan praktis.</h2><p>Konten-konten berikut terkait dengan topik artikel ini dan cocok untuk dibaca lebih lanjut. Lebih baik mulai dengan artikel yang paling dekat dengan pertanyaan Anda saat ini, lalu secara bertahap memperluas ke topik terkait, yang biasanya akan memberikan hasil yang lebih baik.</p><ul class="ai-tail-links-list"><li style="margin: 18px 0;"><a href="https://www.likacloud.com/id/knowledge/cdn/cdn-acceleration-website-performance-e7-9f-a5-e8-af-86/">Pengantar Lengkap Teknologi Akselerasi CDN: Cara Meningkatkan Kinerja Situs Web dan Pengalaman Pengguna</a></li><li style="margin: 18px 0;"><a href="https://www.likacloud.com/id/knowledge/shared-hosting/shared-hosting-guide-pros-cons-12412347/">Analisis Lengkap tentang Hosting Bersama: Kelebihan, Kekurangan, dan Panduan Aplikasi Terbaik</a></li><li style="margin: 18px 0;"><a href="https://www.likacloud.com/id/knowledge/wordpress/wordpress-beginners-guide-build-first-site-e7-9f-a5-e8-af-86/">Pemula WordPress hingga Mahir: Bangun Situs Web Profesional Pertamamu dari Nol</a></li><li style="margin: 18px 0;"><a href="https://www.likacloud.com/id/knowledge/wordpress/wordpress-performance-optimization-tips-2026/">10 Kiat dan Praktik Terbaik untuk Mengoptimalkan Kinerja Situs Web WordPress</a></li><li style="margin: 18px 0;"><a href="https://www.likacloud.com/id/knowledge/wordpress/build-beautiful-powerful-wordpress-site/">Untuk membangun situs web WordPress yang indah dan fungsional, tema sangat penting.</a></li></ul></div> </div> <div class="mt-8 pt-6 border-solid border-t border-gray-200 dark:border-gray-700 transition-colors duration-300"> <div class="flex flex-wrap gap-2"> <span class="font-medium">Tag:</span> <a href="https://www.likacloud.com/id/cats/wordpress/" rel="tag">WordPress</a><a href="https://www.likacloud.com/id/cats/topic-selection/" rel="tag">Pemilihan topik.</a><a href="https://www.likacloud.com/id/cats/website-performance/" rel="tag">Kinerja situs web.</a> </div> </div> <div class="mr-reactions-buttons single-footer 1024 !hidden lg:!flex xl:!hidden mt-10"> <button class="mr-reaction-btn" data-reaction="点赞" data-post-id="12399029" data-action="add"> <span class="mr-reaction-icon"><span class="emoji-item-icon mr-like-icon"></span></span> <span class="mr-reaction-name">Suka</span> <span class="mr-reaction-count">7</span> </button> <button class="mr-reaction-btn" data-reaction="感谢" data-post-id="12399029" data-action="add"> <span class="mr-reaction-icon"><span class="emoji-item-icon mr-thanks-icon"></span></span> <span class="mr-reaction-name">Terima kasih.</span> <span class="mr-reaction-count">12</span> </button> <button class="mr-reaction-btn" data-reaction="膜拜" data-post-id="12399029" data-action="add"> <span class="mr-reaction-icon"><span class="emoji-item-icon mr-worship-icon"></span></span> <span class="mr-reaction-name">\nSangat kagum</span> <span class="mr-reaction-count">20</span> </button> <button class="mr-reaction-btn" data-reaction="卷起来" data-post-id="12399029" data-action="add"> <span class="mr-reaction-icon"><span class="emoji-item-icon mr-rollup-icon"></span></span> <span class="mr-reaction-name">Gulung itu.</span> <span class="mr-reaction-count">6</span> </button> <button class="mr-reaction-btn" data-reaction="要火" data-post-id="12399029" data-action="add"> <span class="mr-reaction-icon"><span class="emoji-item-icon mr-fire-icon"></span></span> <span class="mr-reaction-name">Aku ingin menjadi terkenal.</span> <span class="mr-reaction-count">9</span> </button> <button class="mr-reaction-btn" data-reaction="求更新" data-post-id="12399029" data-action="add"> <span class="mr-reaction-icon"><span class="emoji-item-icon mr-update-icon"></span></span> <span class="mr-reaction-name">Mohon update</span> <span class="mr-reaction-count">17</span> </button> </div> </article> </div> <aside id="sidebar" role="complementary" class="sidebar xl:sticky xl:top-[4.3125rem] xl:self-start xl:overflow-y-auto xl:col-span-1 space-y-6 shrink-0 mt-4 md:mt-6 xl:mt-0"> <div id="primary" class="widget-area"> <section id="provider_widget-3" class="widget widget-container widget_provider_widget"><div class="provider-recommend grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-1 gap-2 xl:gap-0"><div class="provider-item bg-white dark:bg-gray-800 hover:bg-blue-100 dark:hover:bg-blue-500/30 rounded-lg xl:rounded-none"><a href="https://www.likacloud.com/id/tolink/cloudways-pricing/" class="px-6 py-4 flex gap-4 justify-between items-center"><img class="w-28 h-full dark:hidden rounded-none" src="https://static.likacloud.com/data/attachment/2026/01/20260113030722.svg" alt="Cloudways - uji coba gratis selama 3 hari." title="Cloudways - uji coba gratis selama 3 hari." /><img class="w-28 h-full hidden dark:block rounded-none" src="https://static.likacloud.com/data/attachment/2026/01/20260113040800.webp" alt="Cloudways - uji coba gratis selama 3 hari." title="Cloudways - uji coba gratis selama 3 hari." /><div class="provider-desc text-sm text-right leading-5 text-gray-600 dark:text-gray-500">Uji coba gratis selama 3 hari.</div></a></div><div class="provider-item bg-white dark:bg-gray-800 hover:bg-blue-100 dark:hover:bg-blue-500/30 rounded-lg xl:rounded-none"><a href="https://www.likacloud.com/id/tolink/surfercloud/" class="px-6 py-4 flex gap-4 justify-between items-center"><img class="w-28 h-full dark:hidden rounded-none" src="https://static.likacloud.com/data/attachment/2026/01/20260114124357.webp" alt="SurferCloud - Hosting Cloud mulai dari $6,9 per bulan." title="SurferCloud - Hosting Cloud mulai dari $6,9 per bulan." /><img class="w-28 h-full hidden dark:block rounded-none" src="https://static.likacloud.com/data/attachment/2026/01/20260114124537.webp" alt="SurferCloud - Hosting Cloud mulai dari $6,9 per bulan." title="SurferCloud - Hosting Cloud mulai dari $6,9 per bulan." /><div class="provider-desc text-sm text-right leading-5 text-gray-600 dark:text-gray-500">Hosting cloud $6, mulai dari 9,9 USD/bulan.</div></a></div><div class="provider-item bg-white dark:bg-gray-800 hover:bg-blue-100 dark:hover:bg-blue-500/30 rounded-lg xl:rounded-none"><a href="https://www.likacloud.com/id/tolink/ultahost-vps-hosting/" class="px-6 py-4 flex gap-4 justify-between items-center"><img class="w-28 h-full dark:hidden rounded-none" src="https://static.likacloud.com/data/attachment/2025/12/20251227020448.webp" alt="UltaHost - VPS $5.5 / bulan mulai dari" title="UltaHost - VPS $5.5 / bulan mulai dari" /><img class="w-28 h-full hidden dark:block rounded-none" src="https://static.likacloud.com/data/attachment/2025/12/20251229052118.webp" alt="UltaHost - VPS $5.5 / bulan mulai dari" title="UltaHost - VPS $5.5 / bulan mulai dari" /><div class="provider-desc text-sm text-right leading-5 text-gray-600 dark:text-gray-500">VPS $5.5 / mulai dari 5,5 USD per bulan.</div></a></div></div></section> <div x-data="{ mobileNavOpen: false, activeId: null }" x-init=" mobileNavOpen = false; activeId = null; let headings = []; let scrollTimeout = null; let navSmoothTimeout = null; function getOffset() { const element = document.querySelector('h2[id], h3[id]'); if (element) { const style = window.getComputedStyle(element); return parseInt(style.scrollMarginTop) || 0; } return 0; } function cacheHeadings() { headings = Array.from(document.querySelectorAll('h2[id], h3[id]')).map(heading => { const rect = heading.getBoundingClientRect(); return { id: heading.id, top: rect.top + window.pageYOffset - getOffset(), element: heading }; }).sort((a, b) => a.top - b.top); } function findActiveHeading() { const scrollPosition = window.pageYOffset + getOffset(); if (headings.length && scrollPosition < headings[0].top - 5) { return null; } let activeHeading = null; for (let i = 0; i < headings.length; i++) { if (scrollPosition >= headings[i].top) { activeHeading = headings[i]; } else { break; } } if (activeHeading) return activeHeading.id; return null; } function ensureActiveVisible(behavior) { if (!activeId) { document.querySelectorAll('.multi-level-nav').forEach(container => { let scroller = container; if (!(scroller.scrollHeight > scroller.clientHeight)) { const nodes = container.querySelectorAll('*'); for (let i = 0; i < nodes.length; i++) { const el = nodes[i]; if (el.scrollHeight > el.clientHeight) { const oy = window.getComputedStyle(el).overflowY; if (oy === 'auto' || oy === 'scroll' || oy === 'overlay') { scroller = el; break; } } } } if (behavior === 'smooth' && scroller.scrollTo) { scroller.scrollTo({ top: 0, behavior: 'smooth' }); } else { scroller.scrollTop = 0; } }); return; } document.querySelectorAll('.multi-level-nav').forEach(container => { if (container.offsetParent === null) return; let link = null; container.querySelectorAll('a').forEach(a => { if (a.getAttribute('href') === '#' + activeId) link = a; }); if (!link) return; function findScrollable(root) { if (root && root.scrollHeight > root.clientHeight) return root; const nodes = root.querySelectorAll('*'); for (let i = 0; i < nodes.length; i++) { const el = nodes[i]; if (el.scrollHeight > el.clientHeight) { const oy = window.getComputedStyle(el).overflowY; if (oy === 'auto' || oy === 'scroll' || oy === 'overlay') return el; } } return null; } const scroller = findScrollable(container); if (!scroller) return; const sRect = scroller.getBoundingClientRect(); const lRect = link.getBoundingClientRect(); const linkTop = (lRect.top - sRect.top) + scroller.scrollTop; const linkMid = linkTop + lRect.height / 2; const desired = scroller.clientHeight * 0.35; const margin = scroller.clientHeight * 0.25; const top = scroller.scrollTop; const bottom = top + scroller.clientHeight; if (linkMid < top + margin || linkMid > bottom - margin) { let target = linkMid - desired; const maxTop = scroller.scrollHeight - scroller.clientHeight; if (target < 0) target = 0; if (target > maxTop) target = maxTop; if (behavior === 'smooth' && scroller.scrollTo) { scroller.scrollTo({ top: target, behavior: 'smooth' }); } else { scroller.scrollTop = target; } } }); } $watch('mobileNavOpen', value => { if (value) { requestAnimationFrame(() => ensureActiveVisible('smooth')); setTimeout(() => ensureActiveVisible('smooth'), 120); } }); let isNavClickScrolling = false; let navClickTarget = null; let navClickReleaseTimer = null; let rafPending = false; function handleScroll() { if (rafPending) return; rafPending = true; requestAnimationFrame(() => { rafPending = false; if (isNavClickScrolling && navClickTarget) { const el = document.getElementById(navClickTarget); if (el) { const offset = getOffset(); const targetY = el.getBoundingClientRect().top + window.pageYOffset - offset; if (Math.abs(window.pageYOffset - targetY) > 8) return; } isNavClickScrolling = false; navClickTarget = null; if (navClickReleaseTimer) clearTimeout(navClickReleaseTimer); navClickReleaseTimer = null; } const newActiveId = findActiveHeading(); const atTop = window.pageYOffset <= 30; if (newActiveId !== activeId) { activeId = newActiveId; if (navSmoothTimeout) clearTimeout(navSmoothTimeout); navSmoothTimeout = setTimeout(() => { ensureActiveVisible('smooth'); navSmoothTimeout = null; }, 120); return; } if (!newActiveId && atTop) { if (navSmoothTimeout) clearTimeout(navSmoothTimeout); navSmoothTimeout = setTimeout(() => { ensureActiveVisible('smooth'); navSmoothTimeout = null; }, 80); } }); } function handleNavClick(event, hash) { if (!hash) return; isNavClickScrolling = true; navClickTarget = hash; if (navClickReleaseTimer) clearTimeout(navClickReleaseTimer); navClickReleaseTimer = setTimeout(() => { isNavClickScrolling = false; navClickTarget = null; navClickReleaseTimer = null; }, 1600); activeId = hash; requestAnimationFrame(() => ensureActiveVisible('smooth')); const element = document.getElementById(hash); if (element) { const offset = getOffset(); const elementPosition = element.getBoundingClientRect().top + window.pageYOffset; window.scrollTo({ top: elementPosition - offset, behavior: 'smooth' }); } mobileNavOpen = false; event.preventDefault(); history.pushState(null, null, '#' + hash); } function init() { cacheHeadings(); const hash = window.location.hash.substring(1); if (hash && document.getElementById(hash)) { activeId = hash; ensureActiveVisible(); } else if (headings.length > 0) { activeId = findActiveHeading(); if (activeId) ensureActiveVisible(); } window.addEventListener('scroll', handleScroll); window.addEventListener('resize', cacheHeadings); document.querySelectorAll('.multi-level-nav a').forEach(link => { link.addEventListener('click', (event) => { const href = link.getAttribute('href'); if (href && href.startsWith('#')) { handleNavClick(event, href.substring(1)); } }); }); } if (document.readyState === 'complete') { init(); } else { window.addEventListener('load', init); } " class="xl:contents" x-cloak> <button x-transition.opacity class="mbcontent-menus lg:hidden fixed bottom-3 lg:bottom-1/2 right-[26%] lg:right-1.5 flex items-center justify-center text-white z-[31] lg:z-2" aria-label="Buka navigasi artikel." @click="mobileNavOpen = !mobileNavOpen" > <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 22 22" width="22" height="22"> <rect x="2" y="2" width="19" height="19" rx="2" ry="2" fill="none" stroke="#6b7280" stroke-width="2"/> <circle cx="6" cy="7" r="2" fill="#6b7280"/> <line x1="8" y1="7" x2="18" y2="7" stroke="#6b7280" stroke-width="2"/> <circle cx="6" cy="12" r="2" fill="#6b7280"/> <line x1="8" y1="12" x2="18" y2="12" stroke="#6b7280" stroke-width="2"/> <circle cx="6" cy="17" r="2" fill="#6b7280"/> <line x1="8" y1="17" x2="18" y2="17" stroke="#6b7280" stroke-width="2"/> </svg> </button> <div class="hidden lg:block xl:hidden fixed bottom-52 md:bottom-60 lg:bottom-36 right-0.5 z-10"> <button @click="mobileNavOpen = !mobileNavOpen" class="flex justify-center items-center bg-white dark:bg-gray-700 shadow-lg h-9 w-9 text-white rounded-full p-2 shadow-lg transition-all transform hover:scale-105"> <i class="fa-solid fa-list text-base text-gray-500 dark:text-gray-400"></i> </button> </div> <div x-show="mobileNavOpen" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0 z-50 xl:hidden flex items-center justify-center pl-[20%] xs:pl-[35%] sm:pl-[45%] md:pl-[50%] lg:pl-[65%]" @click="mobileNavOpen = false" style="display: none" > <div class="absolute inset-0 bg-black bg-opacity-50"></div> <div class="bg-white dark:bg-gray-800 py-8 lg:pb-10 w-full flex flex-col relative z-10 h-screen lg:h-screen overflow-y-auto" @click.stop> <div class="flex justify-between items-center px-6 border-b"> <h3 class="font-bold text-lg">Navigasi artikel</h3> <button @click="mobileNavOpen = false" class="text-gray-500 hover:text-gray-700"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> </svg> </button> </div> <div class="flex-1 py-4 px-6"> <div class="multi-level-nav com-mbscrollbar max-h-[80vh]"> <ul class="h2-submenu"><li class="group"><a href="#H-1" class="block font-medium text-gray-800 dark:text-gray-300 group-hover:underline transition-colors py-2.5" :class="{ '!text-blue-600 font-semibold': activeId === 'H-1' }">Menentukan dengan jelas kebutuhan dan tujuan utama dari sebuah situs web.</a><ul class="h3-submenu pl-4 xl:pt-1.5"><li><a href="#H-1-1" class="block text-sm text-gray-400 dark:text-gray-500 hover:text-blue-500 transition-colors py-2" :class="{ '!text-blue-500 font-medium': activeId === 'H-1-1' }">Menentukan jenis dan fungsi situs web</a></li><li><a href="#H-1-2" class="block text-sm text-gray-400 dark:text-gray-500 hover:text-blue-500 transition-colors py-2" :class="{ '!text-blue-500 font-medium': activeId === 'H-1-2' }">Evaluasi Desain dan Pengalaman Pengguna (Evaluation of Design and User Experience)</a></li><li><a href="#H-1-3" class="block text-sm text-gray-400 dark:text-gray-500 hover:text-blue-500 transition-colors py-2" :class="{ '!text-blue-500 font-medium': activeId === 'H-1-3' }">Perhatikan anggaran dan otorisasi yang tersedia.</a></li></ul></li><li class="group"><a href="#H-2" class="block font-medium text-gray-800 dark:text-gray-300 group-hover:underline transition-colors py-2.5" :class="{ '!text-blue-600 font-semibold': activeId === 'H-2' }">Melakukan penilaian mendalam terhadap kinerja teknis dari suatu topik (tema).</a><ul class="h3-submenu pl-4 xl:pt-1.5"><li><a href="#H-2-1" class="block text-sm text-gray-400 dark:text-gray-500 hover:text-blue-500 transition-colors py-2" :class="{ '!text-blue-500 font-medium': activeId === 'H-2-1' }">Kualitas kode dan kecepatan pengunduhan (loading speed)</a></li><li><a href="#H-2-2" class="block text-sm text-gray-400 dark:text-gray-500 hover:text-blue-500 transition-colors py-2" :class="{ '!text-blue-500 font-medium': activeId === 'H-2-2' }">Dasar-dasar Optimisasi Mesin Pencari.</a></li><li><a href="#H-2-3" class="block text-sm text-gray-400 dark:text-gray-500 hover:text-blue-500 transition-colors py-2" :class="{ '!text-blue-500 font-medium': activeId === 'H-2-3' }">Browser Compatibility</a></li></ul></li><li class="group"><a href="#H-3" class="block font-medium text-gray-800 dark:text-gray-300 group-hover:underline transition-colors py-2.5" :class="{ '!text-blue-600 font-semibold': activeId === 'H-3' }">Pastikan keamanan dan dukungan bagi para pengembang.</a><ul class="h3-submenu pl-4 xl:pt-1.5"><li><a href="#H-3-1" class="block text-sm text-gray-400 dark:text-gray-500 hover:text-blue-500 transition-colors py-2" :class="{ '!text-blue-500 font-medium': activeId === 'H-3-1' }">Pemeriksaan keamanan topik (Topic Security Review)</a></li><li><a href="#H-3-2" class="block text-sm text-gray-400 dark:text-gray-500 hover:text-blue-500 transition-colors py-2" :class="{ '!text-blue-500 font-medium': activeId === 'H-3-2' }">Dukungan pengembang dan frekuensi pembaruan.</a></li><li><a href="#H-3-3" class="block text-sm text-gray-400 dark:text-gray-500 hover:text-blue-500 transition-colors py-2" :class="{ '!text-blue-500 font-medium': activeId === 'H-3-3' }">Plugin Compatibility Testing</a></li></ul></li><li class="group"><a href="#H-4" class="block font-medium text-gray-800 dark:text-gray-300 group-hover:underline transition-colors py-2.5" :class="{ '!text-blue-600 font-semibold': activeId === 'H-4' }">Praktik: Pengujian dan Pengambilan Keputusan Akhir</a><ul class="h3-submenu pl-4 xl:pt-1.5"><li><a href="#H-4-1" class="block text-sm text-gray-400 dark:text-gray-500 hover:text-blue-500 transition-colors py-2" :class="{ '!text-blue-500 font-medium': activeId === 'H-4-1' }">Membangun lingkungan pengujian lokal</a></li><li><a href="#H-4-2" class="block text-sm text-gray-400 dark:text-gray-500 hover:text-blue-500 transition-colors py-2" :class="{ '!text-blue-500 font-medium': activeId === 'H-4-2' }">Impor konten presentasi dan sesuaikan sesuai keinginan Anda.</a></li><li><a href="#H-4-3" class="block text-sm text-gray-400 dark:text-gray-500 hover:text-blue-500 transition-colors py-2" :class="{ '!text-blue-500 font-medium': activeId === 'H-4-3' }">Periksa dokumen tema dan sumber dayanya.</a></li></ul></li><li class="group"><a href="#H-5" class="block font-medium text-gray-800 dark:text-gray-300 group-hover:underline transition-colors py-2.5" :class="{ '!text-blue-600 font-semibold': activeId === 'H-5' }">Menyimpulkan.</a></li><li class="group"><a href="#H-6" class="block font-medium text-gray-800 dark:text-gray-300 group-hover:underline transition-colors py-2.5" :class="{ '!text-blue-600 font-semibold': activeId === 'H-6' }">FAQ - Pertanyaan yang Sering Diajukan.</a><ul class="h3-submenu pl-4 xl:pt-1.5"><li><a href="#H-6-1" class="block text-sm text-gray-400 dark:text-gray-500 hover:text-blue-500 transition-colors py-2" :class="{ '!text-blue-500 font-medium': activeId === 'H-6-1' }">Apa perbedaan utama antara tema gratis dan tema berbayar?</a></li><li><a href="#H-6-2" class="block text-sm text-gray-400 dark:text-gray-500 hover:text-blue-500 transition-colors py-2" :class="{ '!text-blue-500 font-medium': activeId === 'H-6-2' }">Bagaimana cara menentukan apakah sebuah tema bersifat ringan (lightweight) dan cepat dalam penggunaannya?</a></li><li><a href="#H-6-3" class="block text-sm text-gray-400 dark:text-gray-500 hover:text-blue-500 transition-colors py-2" :class="{ '!text-blue-500 font-medium': activeId === 'H-6-3' }">Apa hubungan antara tema dan plugin pembangun halaman (seperti Elementor)?</a></li><li><a href="#H-6-4" class="block text-sm text-gray-400 dark:text-gray-500 hover:text-blue-500 transition-colors py-2" :class="{ '!text-blue-500 font-medium': activeId === 'H-6-4' }">Apakah aman untuk mengganti tema situs web yang sudah terpublikasi?</a></li></ul></li></ul> </div> </div> </div> </div> <section id="multi_heading_nav-9" class="widget widget-container widget_multi_heading_nav"> <div class="mbcontent-menus hidden xl:block widget-multi-level-nav bg-white dark:bg-gray-800 rounded-lg p-5 mb-4 xs:mb-6"> <span class="content-nav-title flex w-full text-lg pb-2 border-b border-solid border-gray-100 dark:border-gray-700"> Navigasi konten. </span> <div class="multi-level-nav max-h-60 com-scrollbar pt-4"> <ul class="h2-submenu"><li class="group"><a href="#H-1" class="block font-medium text-gray-800 dark:text-gray-300 group-hover:underline transition-colors py-2.5" :class="{ '!text-blue-600 font-semibold': activeId === 'H-1' }">Menentukan dengan jelas kebutuhan dan tujuan utama dari sebuah situs web.</a><ul class="h3-submenu pl-4 xl:pt-1.5"><li><a href="#H-1-1" class="block text-sm text-gray-400 dark:text-gray-500 hover:text-blue-500 transition-colors py-2" :class="{ '!text-blue-500 font-medium': activeId === 'H-1-1' }">Menentukan jenis dan fungsi situs web</a></li><li><a href="#H-1-2" class="block text-sm text-gray-400 dark:text-gray-500 hover:text-blue-500 transition-colors py-2" :class="{ '!text-blue-500 font-medium': activeId === 'H-1-2' }">Evaluasi Desain dan Pengalaman Pengguna (Evaluation of Design and User Experience)</a></li><li><a href="#H-1-3" class="block text-sm text-gray-400 dark:text-gray-500 hover:text-blue-500 transition-colors py-2" :class="{ '!text-blue-500 font-medium': activeId === 'H-1-3' }">Perhatikan anggaran dan otorisasi yang tersedia.</a></li></ul></li><li class="group"><a href="#H-2" class="block font-medium text-gray-800 dark:text-gray-300 group-hover:underline transition-colors py-2.5" :class="{ '!text-blue-600 font-semibold': activeId === 'H-2' }">Melakukan penilaian mendalam terhadap kinerja teknis dari suatu topik (tema).</a><ul class="h3-submenu pl-4 xl:pt-1.5"><li><a href="#H-2-1" class="block text-sm text-gray-400 dark:text-gray-500 hover:text-blue-500 transition-colors py-2" :class="{ '!text-blue-500 font-medium': activeId === 'H-2-1' }">Kualitas kode dan kecepatan pengunduhan (loading speed)</a></li><li><a href="#H-2-2" class="block text-sm text-gray-400 dark:text-gray-500 hover:text-blue-500 transition-colors py-2" :class="{ '!text-blue-500 font-medium': activeId === 'H-2-2' }">Dasar-dasar Optimisasi Mesin Pencari.</a></li><li><a href="#H-2-3" class="block text-sm text-gray-400 dark:text-gray-500 hover:text-blue-500 transition-colors py-2" :class="{ '!text-blue-500 font-medium': activeId === 'H-2-3' }">Browser Compatibility</a></li></ul></li><li class="group"><a href="#H-3" class="block font-medium text-gray-800 dark:text-gray-300 group-hover:underline transition-colors py-2.5" :class="{ '!text-blue-600 font-semibold': activeId === 'H-3' }">Pastikan keamanan dan dukungan bagi para pengembang.</a><ul class="h3-submenu pl-4 xl:pt-1.5"><li><a href="#H-3-1" class="block text-sm text-gray-400 dark:text-gray-500 hover:text-blue-500 transition-colors py-2" :class="{ '!text-blue-500 font-medium': activeId === 'H-3-1' }">Pemeriksaan keamanan topik (Topic Security Review)</a></li><li><a href="#H-3-2" class="block text-sm text-gray-400 dark:text-gray-500 hover:text-blue-500 transition-colors py-2" :class="{ '!text-blue-500 font-medium': activeId === 'H-3-2' }">Dukungan pengembang dan frekuensi pembaruan.</a></li><li><a href="#H-3-3" class="block text-sm text-gray-400 dark:text-gray-500 hover:text-blue-500 transition-colors py-2" :class="{ '!text-blue-500 font-medium': activeId === 'H-3-3' }">Plugin Compatibility Testing</a></li></ul></li><li class="group"><a href="#H-4" class="block font-medium text-gray-800 dark:text-gray-300 group-hover:underline transition-colors py-2.5" :class="{ '!text-blue-600 font-semibold': activeId === 'H-4' }">Praktik: Pengujian dan Pengambilan Keputusan Akhir</a><ul class="h3-submenu pl-4 xl:pt-1.5"><li><a href="#H-4-1" class="block text-sm text-gray-400 dark:text-gray-500 hover:text-blue-500 transition-colors py-2" :class="{ '!text-blue-500 font-medium': activeId === 'H-4-1' }">Membangun lingkungan pengujian lokal</a></li><li><a href="#H-4-2" class="block text-sm text-gray-400 dark:text-gray-500 hover:text-blue-500 transition-colors py-2" :class="{ '!text-blue-500 font-medium': activeId === 'H-4-2' }">Impor konten presentasi dan sesuaikan sesuai keinginan Anda.</a></li><li><a href="#H-4-3" class="block text-sm text-gray-400 dark:text-gray-500 hover:text-blue-500 transition-colors py-2" :class="{ '!text-blue-500 font-medium': activeId === 'H-4-3' }">Periksa dokumen tema dan sumber dayanya.</a></li></ul></li><li class="group"><a href="#H-5" class="block font-medium text-gray-800 dark:text-gray-300 group-hover:underline transition-colors py-2.5" :class="{ '!text-blue-600 font-semibold': activeId === 'H-5' }">Menyimpulkan.</a></li><li class="group"><a href="#H-6" class="block font-medium text-gray-800 dark:text-gray-300 group-hover:underline transition-colors py-2.5" :class="{ '!text-blue-600 font-semibold': activeId === 'H-6' }">FAQ - Pertanyaan yang Sering Diajukan.</a><ul class="h3-submenu pl-4 xl:pt-1.5"><li><a href="#H-6-1" class="block text-sm text-gray-400 dark:text-gray-500 hover:text-blue-500 transition-colors py-2" :class="{ '!text-blue-500 font-medium': activeId === 'H-6-1' }">Apa perbedaan utama antara tema gratis dan tema berbayar?</a></li><li><a href="#H-6-2" class="block text-sm text-gray-400 dark:text-gray-500 hover:text-blue-500 transition-colors py-2" :class="{ '!text-blue-500 font-medium': activeId === 'H-6-2' }">Bagaimana cara menentukan apakah sebuah tema bersifat ringan (lightweight) dan cepat dalam penggunaannya?</a></li><li><a href="#H-6-3" class="block text-sm text-gray-400 dark:text-gray-500 hover:text-blue-500 transition-colors py-2" :class="{ '!text-blue-500 font-medium': activeId === 'H-6-3' }">Apa hubungan antara tema dan plugin pembangun halaman (seperti Elementor)?</a></li><li><a href="#H-6-4" class="block text-sm text-gray-400 dark:text-gray-500 hover:text-blue-500 transition-colors py-2" :class="{ '!text-blue-500 font-medium': activeId === 'H-6-4' }">Apakah aman untuk mengganti tema situs web yang sudah terpublikasi?</a></li></ul></li></ul> </div> </div> </section> </div><section id="acf_recommendation_widget-5" class="widget widget-container widget_acf_recommendation_widget"> <div class="page-recommendation"> <div class="page-recommendation__item"> <a href="https://www.likacloud.com/id/tolink/ultahost-vps-hosting/" class="block"> <picture> <source srcset="https://static.likacloud.com/data/attachment/2025/12/20251225160358.webp" media="(max-width: 767px)"> <source srcset="https://static.likacloud.com/data/attachment/2025/12/20251225092159.webp" media="(min-width: 768px) and (max-width: 1279px)"> <source srcset="https://static.likacloud.com/data/attachment/2025/12/20251225160358.webp" media="(min-width: 1280px)"> <img src="https://static.likacloud.com/data/attachment/2025/12/20251225160358.webp" alt="Hosting VPS Ultahost" title="Hosting VPS Ultahost" class="w-full h-auto" loading="lazy" decoding="async" > </picture> </a> </div> </div> </section> </div> </aside> </main> <section class="related-posts mb-10 lg:mb-12 xl:mb-16"><div class="container"><h3 class="text-xl md:text-2xl xl:text-26 font-bold mb-5 md:mb-7 lg:mb-8">Rekomendasi terkait.</h3><div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-4 gap-4 md:gap-6"><article id="post-12412488" class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-all" data-link="https://www.likacloud.com/id/knowledge/cdn/cdn-acceleration-website-performance-e7-9f-a5-e8-af-86/"> <div class="flex flex-col justify-between p-4 gap-4 h-full"> <div class="space-y-3"> <h3 class="font-semibold lg:text-base xl:text-lg line-clamp-3"> <a href="https://www.likacloud.com/id/knowledge/cdn/cdn-acceleration-website-performance-e7-9f-a5-e8-af-86/"> Pengantar Lengkap Teknologi Akselerasi CDN: Cara Meningkatkan Kinerja Situs Web dan Pengalaman Pengguna </a> </h3> <div class="text-gray-400 dark:text-gray-500 2xl:line-clamp-2 line-clamp-3">Teknologi percepatan CDN (Content Delivery Network) mendistribusikan konten ke dekat pengguna melalui node-node di seluruh dunia dan mekanisme penjadwalan yang cerdas, sehingga secara signifikan mengurangi waktu tunggu (latency) dan meringankan beban pada server sumber (origin server). Artikel ini mengulas prinsip-prinsip dasar teknologi ini, keunggulan teknis utamanya, metode optimisasi konfigurasi, serta tren terkini seperti penggunaan komputasi tepi (edge computing), untuk meningkatkan kinerja situs web.</div> </div> <div class="flex items-center justify-between text-sm lg:text-xs 2xl:text-sm dark-text-a-400 text-gray-400 dark:text-gray-500"> <div> <span>2026-06-27</span> </div> <div class="space-x-3 text-xs text-gray-400 dark:text-gray-500"> <div class="space-x-3 block"> <span> <i class="fa-regular fa-eye"></i> <span class="views" data-view-id="12412488" data-view-type="post"><span class="view-count">2,274</span></span> </span> <span><i class="fa-regular fa-thumbs-up mr-1"></i>80</span> </div> </div> </div> </div> </article> <article id="post-12412347" class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-all" data-link="https://www.likacloud.com/id/knowledge/shared-hosting/shared-hosting-guide-pros-cons-12412347/"> <div class="flex flex-col justify-between p-4 gap-4 h-full"> <div class="space-y-3"> <h3 class="font-semibold lg:text-base xl:text-lg line-clamp-3"> <a href="https://www.likacloud.com/id/knowledge/shared-hosting/shared-hosting-guide-pros-cons-12412347/"> Analisis Lengkap tentang Hosting Bersama: Kelebihan, Kekurangan, dan Panduan Aplikasi Terbaik </a> </h3> <div class="text-gray-400 dark:text-gray-500 2xl:line-clamp-2 line-clamp-3">Shared hosting merupakan layanan penyimpanan situs web yang hemat biaya, yang mengurangi biaya melalui penggunaan sumber daya bersama. Layanan ini cocok untuk blog pribadi, situs web perusahaan kecil, dan lainnya. Namun, ada juga kekurangannya, seperti kinerja yang dapat dipengaruhi oleh pengguna lain (yang menggunakan sumber daya yang sama) serta keterbatasan pada sumber daya yang tersedia. Artikel ini memberikan analisis menyeluruh mengenai kelebihan dan kekurangan shared hosting, serta panduan tentang cara menentukan apakah layanan ini cocok untuk kebutuhan Anda...</div> </div> <div class="flex items-center justify-between text-sm lg:text-xs 2xl:text-sm dark-text-a-400 text-gray-400 dark:text-gray-500"> <div> <span>2026-06-26</span> </div> <div class="space-x-3 text-xs text-gray-400 dark:text-gray-500"> <div class="space-x-3 block"> <span> <i class="fa-regular fa-eye"></i> <span class="views" data-view-id="12412347" data-view-type="post"><span class="view-count">2,550</span></span> </span> <span><i class="fa-regular fa-thumbs-up mr-1"></i>77</span> </div> </div> </div> </div> </article> <article id="post-12412299" class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-all" data-link="https://www.likacloud.com/id/knowledge/wordpress/wordpress-beginners-guide-build-first-site-e7-9f-a5-e8-af-86/"> <div class="flex flex-col justify-between p-4 gap-4 h-full"> <div class="space-y-3"> <h3 class="font-semibold lg:text-base xl:text-lg line-clamp-3"> <a href="https://www.likacloud.com/id/knowledge/wordpress/wordpress-beginners-guide-build-first-site-e7-9f-a5-e8-af-86/"> Pemula WordPress hingga Mahir: Bangun Situs Web Profesional Pertamamu dari Nol </a> </h3> <div class="text-gray-400 dark:text-gray-500 2xl:line-clamp-2 line-clamp-3">Artikel ini dimulai dengan penjelasan mengenai langkah-langkah persiapan, membimbing pemula dalam memilih nama domain dan host, menginstal program WordPress, mengonfigurasi basis data, serta menciptakan tampilan dan fitur yang profesional dengan menggunakan tema dan plugin. Di akhirnya, artikel ini juga menjelaskan proses pembuatan dan pengelolaan konten yang akan dipublikasikan, sehingga membantu pengguna membangun dan menerbitkan situs web yang profesional dari nol.</div> </div> <div class="flex items-center justify-between text-sm lg:text-xs 2xl:text-sm dark-text-a-400 text-gray-400 dark:text-gray-500"> <div> <span>2026-06-26</span> </div> <div class="space-x-3 text-xs text-gray-400 dark:text-gray-500"> <div class="space-x-3 block"> <span> <i class="fa-regular fa-eye"></i> <span class="views" data-view-id="12412299" data-view-type="post"><span class="view-count">2,519</span></span> </span> <span><i class="fa-regular fa-thumbs-up mr-1"></i>66</span> </div> </div> </div> </div> </article> <article id="post-12412294" class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-all" data-link="https://www.likacloud.com/id/knowledge/wordpress/wordpress-performance-optimization-tips-2026/"> <div class="flex flex-col justify-between p-4 gap-4 h-full"> <div class="space-y-3"> <h3 class="font-semibold lg:text-base xl:text-lg line-clamp-3"> <a href="https://www.likacloud.com/id/knowledge/wordpress/wordpress-performance-optimization-tips-2026/"> 10 Kiat dan Praktik Terbaik untuk Mengoptimalkan Kinerja Situs Web WordPress </a> </h3> <div class="text-gray-400 dark:text-gray-500 2xl:line-clamp-2 line-clamp-3">Artikel ini secara sistematis memperkenalkan 10 trik pengoptimalan kinerja WordPress yang telah teruji, mencakup pembersihan komponen inti dan basis data, konfigurasi cache, kompresi gambar, serta pengoptimalan sumber daya statis, untuk membantu menciptakan situs web yang cepat dan efisien.</div> </div> <div class="flex items-center justify-between text-sm lg:text-xs 2xl:text-sm dark-text-a-400 text-gray-400 dark:text-gray-500"> <div> <span>2026-06-26</span> </div> <div class="space-x-3 text-xs text-gray-400 dark:text-gray-500"> <div class="space-x-3 block"> <span> <i class="fa-regular fa-eye"></i> <span class="views" data-view-id="12412294" data-view-type="post"><span class="view-count">2,216</span></span> </span> <span><i class="fa-regular fa-thumbs-up mr-1"></i>66</span> </div> </div> </div> </div> </article> </div></div></section></div> <footer id="footer" class="bg-gray-900 dark:bg-gray-950 text-white mbmb-11 pb-20 py-4 pt-8 lg:py-8 xl:pt-11"> <div class="container mx-auto"> <div class="grid gap-8 lg:gap-12 xl:gap-6 2xl:gap-10 grid-cols-1 sm:grid-cols-2 xl:grid-cols-[0.9fr_1.2fr_0.9fr_1fr] 2xl:grid-cols-[1.1fr_1.1fr_0.8fr_0.9fr] mb-9 lg:pb-3"> <div class="space-y-5"> <div class="flex items-center"> <h3 class="text-4xl sm:text-3xl md:text-4xl font-bold flex gap-4 items-end text-gray-200 dark:text-gray-300 border-solid border-gray-800 dark:border-gray-900 lg:border-b xl:border-0 2xl:border-b lg:pb-5 xl:pb-0 2xl:pb-5"> LikaCloud <span class="text-sm font-normal text-gray-500 xl:hidden 2xl:block mb-0.5 2xl:mb-[0.1875rem]"> Blog Komputasi Awan </span> </h3> </div> <p class="text-gray-400 leading-relaxed xl:text-[15px] 2xl:text-text-base"> Dari pembangunan situs web hingga pedoman AI. Saya mendapat komisi saat Anda berbelanja melalui tautan di bawah ini, tanpa biaya tambahan bagi Anda. </p> </div> <div> <h4 class="text-xl font-semibold mb-3 pb-2 border-b border-gray-800 text-gray-200 dark:text-gray-300"> Tautan cepat. </h4> <ul class="grid grid-cols-2 gap-3"> <li> <a href="/id/web-hosting/" class="footer-link flex items-center !text-gray-400 whitespace-nowrap overflow-hidden"> <i class="fa fa-angle-right mr-2 text-blue-500 shrink-0"></i> Hosting Web </a> </li> <li> <a href="/id/cloud-hosting/" class="footer-link flex items-center !text-gray-400 whitespace-nowrap overflow-hidden"> <i class="fa fa-angle-right mr-2 text-blue-500 shrink-0"></i> Hosting Awan </a> </li> <li> <a href="/id/shared-hosting/" class="footer-link flex items-center !text-gray-400 whitespace-nowrap overflow-hidden"> <i class="fa fa-angle-right mr-2 text-blue-500 shrink-0"></i> Hosting Bersama </a> </li> <li> <a href="/id/vps-hosting/" class="footer-link flex items-center !text-gray-400 whitespace-nowrap overflow-hidden"> <i class="fa fa-angle-right mr-2 text-blue-500 shrink-0"></i> Hosting VPS. </a> </li> <li> <a href="/id/domain/" class="footer-link flex items-center !text-gray-400 whitespace-nowrap overflow-hidden"> <i class="fa fa-angle-right mr-2 text-blue-500 shrink-0"></i> Aktivitas Domain. </a> </li> <li> <a href="/id/website-builders/" class="footer-link flex items-center !text-gray-400 whitespace-nowrap overflow-hidden"> <i class="fa fa-angle-right mr-2 text-blue-500 shrink-0"></i> Pembuat Situs Web. </a> </li> </ul> </div> <div> <h4 class="text-xl font-semibold mb-3 pb-2 border-b border-gray-800 text-gray-200 dark:text-gray-300"> Rekomendasi populer. </h4> <ul class="grid grid-cols-1 gap-3"> <li> <a href="/tolink/zohomail-pricing/" class="footer-link flex items-center !text-gray-400"> <i class="fa fa-angle-right mr-2 text-blue-500 shrink-0"></i> Email perusahaan ZOHO mulai dari $1 per bulan. </a> </li> <li> <a href="https://hostinger.com?REFERRALCODE=TOPCLOUD" class="footer-link flex items-center !text-gray-400"> <i class="fa fa-angle-right mr-2 text-blue-500 shrink-0"></i> Hostinger menawarkan maksimum 75% untuk hosting. </a> </li> <li> <a href="https://ultahost.com/vps-hosting#a_aid=likacloud&a_bid=112b93ad" class="footer-link flex items-center !text-gray-400"> <i class="fa fa-angle-right mr-2 text-blue-500 shrink-0"></i> Hosting VPS UltaHost dimulai dengan harga hanya $5,50/bulan. </a> </li> </ul> </div> <div> <h4 class="text-xl font-semibold mb-3 pb-2 border-b border-gray-800 text-gray-200 dark:text-gray-300"> Berbagi Aktivitas </h4> <a href="/tolink/cloudways-wordpress-hosting/"> <div class="xs:space-y-4 lg:space-y-4 grid grid-cols-1"> <div class="bg-gray-800/50 p-4 md:p-5 xl:p-4 rounded-lg hover-scale space-y-6"> <h5 class="font-medium !text-gray-400 xl:text-[15px] 2xl:text-text-base">Hosting WordPress yang Sepenuhnya Dikelola di Seluruh Platform Multi-Cloud.</h5> <div class="flex items-center justify-between"> <p class="text-gray-400 text-sm"> </p> <span class="text-xs font-normal bg-orange-500 dark:bg-orange-600 text-white dark:text-gray-300 px-2 py-1 rounded-full inline-block"> Uji Coba Gratis 3 Hari. </span> </div> </div> </div> </a> </div> </div> <div class="pt-7 sm:pt-6 lg:pt-8 border-t border-solid border-gray-800 relative" x-data="{ FTqqPoP : false, FTwxPoP : false, FTwbPoP : false, FTdyPoP : false, FTbiliPoP : false,FTksPoP : false, FTsphPoP : false}"> <div class="flex flex-col-reverse md:flex-row items-center justify-center md:justify-between gap-6 text-gray-500 lg:items-end"> <div class="flex flex-col lg:flex-row items-center xl:flex-nowrap justify-center md:justify-start md:items-start gap-5 md:gap-7 2xl:gap-12"> <div class="flex flex-col gap-4 xs:gap-6 xs:flex-row items-center justify-center md:justify-start text-sm"> <div> <span class="text-[0.9rem]">©</span> 2025 - 2026 ・ <a href="https://www.likacloud.com/id/" class="!text-gray-500"> LikaCloud </a> </div> </div> <div class="lg:hidden xl:flex items-center space-x-3 md:space-x-7 2xl:space-x-12 text-sm xl:flex-nowrap"> <div class="flex items-center flex-col gap-4 xs:flex-row xs:gap-6 text-gray-500"> <a href="https://beian.miit.gov.cn" class="!text-gray-500">ICP Yunnan No. 20000330-9</a> </div> </div> </div> <div class="flex items-center md:items-end sm:justify-between flex-col md:flex-col lg:flex-row lg:items-end gap-6 lg:gap-7 shrink-0"> <ul class="flex flex-wrap justify-center gap-x-4 gap-y-2 text-sm text-gray-500 shrink-0"> <li> <a href="mailto:support@likacloud.com" class="!text-gray-500 hover:text-gray-300 transition-colors duration-200"> Hubungi kami. </a> </li> <li> <a href="/id/aboutus/" class="!text-gray-500 hover:text-gray-300 transition-colors duration-200"> Tentang kami. </a> </li> <li> <a href="/id/company/" class="!text-gray-500 hover:text-gray-300 transition-colors duration-200"> Kolom ini menampilkan daftar produsen yang dikumpulkan oleh penulis. </a> </li> <li> <a href="/id/docs/" class="!text-gray-500 hover:text-gray-300 transition-colors duration-200"> Dokumen aplikasi. </a> </li> </ul> </div> </div> </div> <div class="hidden xl:block"> <div id="side-rail-slider" x-data="{ isOpen: false, toggle() { this.isOpen = !this.isOpen } }" class="side-rail-slider pc hidden lg:block fixed left-0 xl:bottom-32 transform -translate-y-1/2 z-0" > <div x-data="{ likeExpanded: false, lastReaction: '膜拜', totalCount: 71 }" x-init=" $nextTick(() => { }) " @mouseenter="likeExpanded = true" @mouseleave="likeExpanded = false" class="f-l-like mb-6 z-50" x-cloak> <div class="relative"> <div x-show="likeExpanded" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 translate-x-2" x-transition:enter-end="opacity-100 translate-x-0" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 translate-x-0" x-transition:leave-end="opacity-0 translate-x-2" class="likepopup absolute left-12 top-1/2 transform -translate-y-1/2 flex items-center bg-white dark:bg-gray-700 rounded-lg border border-solid border-gray-200 dark:border-gray-800 p-4" > <div class="flex gap-3 text-gray-500 dark:text-gray-400"> <button class="mr-reaction-btn" data-reaction="点赞" data-post-id="12399029" data-object-type="post" data-action="add"> <span class="mr-reaction-icon dark-filter08 sidebar-icon"><span class="emoji-item-icon mr-like-icon"></span></span> <span class="mr-reaction-name">Suka</span> <span class="mr-reaction-count">7</span> </button> <button class="mr-reaction-btn" data-reaction="感谢" data-post-id="12399029" data-object-type="post" data-action="add"> <span class="mr-reaction-icon dark-filter08 sidebar-icon"><span class="emoji-item-icon mr-thanks-icon"></span></span> <span class="mr-reaction-name">Terima kasih.</span> <span class="mr-reaction-count">12</span> </button> <button class="mr-reaction-btn" data-reaction="膜拜" data-post-id="12399029" data-object-type="post" data-action="add"> <span class="mr-reaction-icon dark-filter08 sidebar-icon"><span class="emoji-item-icon mr-worship-icon"></span></span> <span class="mr-reaction-name">\nSangat kagum</span> <span class="mr-reaction-count">20</span> </button> <button class="mr-reaction-btn" data-reaction="卷起来" data-post-id="12399029" data-object-type="post" data-action="add"> <span class="mr-reaction-icon dark-filter08 sidebar-icon"><span class="emoji-item-icon mr-rollup-icon"></span></span> <span class="mr-reaction-name">Gulung itu.</span> <span class="mr-reaction-count">6</span> </button> <button class="mr-reaction-btn" data-reaction="要火" data-post-id="12399029" data-object-type="post" data-action="add"> <span class="mr-reaction-icon dark-filter08 sidebar-icon"><span class="emoji-item-icon mr-fire-icon"></span></span> <span class="mr-reaction-name">Aku ingin menjadi terkenal.</span> <span class="mr-reaction-count">9</span> </button> <button class="mr-reaction-btn" data-reaction="求更新" data-post-id="12399029" data-object-type="post" data-action="add"> <span class="mr-reaction-icon dark-filter08 sidebar-icon"><span class="emoji-item-icon mr-update-icon"></span></span> <span class="mr-reaction-name">Mohon update</span> <span class="mr-reaction-count">17</span> </button> </div> </div> <button class="leftlike flex items-center justify-center bg-white dark:bg-gray-700 h-10 ml-0.5 rounded-full shadow-lg focus:outline-none focus:ring-opacity-50" aria-label="Suka" > <div class="mr-reaction-icon mr-sidebar-icon"> <template x-if="lastReaction === '点赞'"> <span class="emoji-item-icon emoji-sidebar-icon mr-like-icon"></span> </template> <template x-if="lastReaction === '感谢'"> <span class="emoji-item-icon emoji-sidebar-icon mr-thanks-icon"></span> </template> <template x-if="lastReaction === '膜拜'"> <span class="emoji-item-icon emoji-sidebar-icon mr-worship-icon"></span> </template> <template x-if="lastReaction === '卷起来'"> <span class="emoji-item-icon emoji-sidebar-icon mr-rollup-icon"></span> </template> <template x-if="lastReaction === '要火'"> <span class="emoji-item-icon emoji-sidebar-icon mr-fire-icon"></span> </template> <template x-if="lastReaction === '求更新'"> <span class="emoji-item-icon emoji-sidebar-icon mr-update-icon"></span> </template> </div> </button> <div class="bg-blue-300 dark:bg-gray-700 text-center rounded-full text-xs text-blue-700 dark:text-gray-300 -mt-1" x-text="totalCount"></div> </div> </div> <div x-data="{ shareExpanded: false }" x-init="shareExpanded = false" @mouseenter="shareExpanded = true" @mouseleave="shareExpanded = false" class="mb-10 z-50" x-cloak> <div class="relative"> <div x-show="shareExpanded" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-2" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 translate-y-2" class="sharepopup absolute left-12 top-0 mb-2 bg-white dark:bg-gray-700 text-gray-500 dark:text-gray-300 text-sm rounded-lg shadow-lg py-2 min-w-[140px]" > <span class="text-sm px-4">Bagikan ke:</span> <button class="px-4 py-2.5 hover:bg-gray-100 dark:hover:bg-gray-800 text-left flex items-center w-full relative" x-data="{ showQr: false }" @mouseenter="showQr = true" @mouseleave="showQr = false" > <div class="page-qrcode absolute left-full w-[150px] ml-2 top-0 bg-white dark:bg-gray-700 p-2 shadow-lg rounded z-50 border dark:border-2 border-solid border-gray-400 dark:border-gray-600" x-show="showQr" x-transition data-url="https://www.likacloud.com/id/knowledge/wordpress/how-to-choose-best-wordpress-theme-%e7%9f%a5%e8%af%86/" > <span class="flex justify-center pb-2">Scan kode QR di ponsel untuk berbagi.</span> </div> <i class="fa-brands fa-square-whatsapp text-green-500 mr-2 text-lg w-5 share-button" data-no-auto-translation=""></i> WhatsApp </button> <button class="w-full share-button" data-no-auto-translation=""> <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.likacloud.com%2Fid%2Fknowledge%2Fwordpress%2Fhow-to-choose-best-wordpress-theme-%25e7%259f%25a5%25e8%25af%2586%2F" onclick="return sharePopup(this.href, 'facebook-share', 600, 500)" class="px-4 hover:bg-gray-100 dark:hover:bg-gray-800 text-left flex items-center w-full"> <i class="fa-brands fa-facebook py-2.5 text-blue-600 mr-2 text-lg w-5"></i> Facebook </a> </button> <button class="w-full share-button" data-no-auto-translation=""> <a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fwww.likacloud.com%2Fid%2Fknowledge%2Fwordpress%2Fhow-to-choose-best-wordpress-theme-%25e7%259f%25a5%25e8%25af%2586%2F&text=Cara+Memilih+Tema+WordPress+Terbaik%3A+Panduan+Lengkap+Dari+Fungsi+hingga+Kinerja" onclick="return sharePopup(this.href, 'x-share', 600, 500)" class="px-4 hover:bg-gray-100 dark:hover:bg-gray-800 text-left flex items-center w-full"> <i class="fa-brands fa-twitter text-blue-500 py-2.5 mr-2 text-lg w-5"></i> X (Twitter) </a> </button> <button class="w-full share-button" data-no-auto-translation=""> <a href="https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.likacloud.com%2Fid%2Fknowledge%2Fwordpress%2Fhow-to-choose-best-wordpress-theme-%25e7%259f%25a5%25e8%25af%2586%2F&title=Cara+Memilih+Tema+WordPress+Terbaik%3A+Panduan+Lengkap+Dari+Fungsi+hingga+Kinerja" onclick="return sharePopup(this.href, 'linkedin-share', 600, 500)" class="px-4 hover:bg-gray-100 dark:hover:bg-gray-800 text-left flex items-center w-full"> <i class="fa-brands fa-linkedin py-2.5 text-blue-500 mr-2 text-lg w-5"></i> LinkedIn </a> </button> <button data-copy-mirror data-mirror-domain="www.likacloud.com" class="px-4 py-2.5 hover:bg-gray-100 dark:hover:bg-gray-800 text-left flex items-center w-full"> <i class="fa-solid fa-link text-blue-500 mr-2 text-lg w-5"></i><span class="js-copy-text">\nSalin tautan.</span></button> </div> <button class="leftshare-button p-2.5 xl:p-3 bg-white dark:bg-gray-700 text-gray-500 dark:text-gray-400 rounded-full shadow-lg hover:text-blue-500 focus:outline-none focus:ring-opacity-50" aria-label="Berbagi" > <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewbox="0 0 20 20" fill="currentColor"> <path d="M15 8a3 3 0 10-2.977-2.63l-4.94 2.47a3 3 0 100 4.319l4.94 2.47a3 3 0 10.895-1.789l-4.94-2.47a3.027 3.027 0 000-.74l4.94-2.47C13.456 7.68 14.19 8 15 8z" /> </svg> </button> </div> </div> </div> </div> <div class="xl:hidden"> <div x-data="{ lastReaction: '膜拜', totalCount: 71, scrollToTop() { window.scrollTo({ top: 0, behavior: 'smooth' }); }, closeAllPopups() { this.Likepopup = false; this.Sharepopup = false; } }" class="mb-footer-nav fixed inset-x-0 bottom-0 z-30 bg-white text-gray-500 shadow lg:hidden" > <div class="footer-nav-content flex items-center justify-around py-2 z-30 relative bg-white dark:bg-gray-800 border-t border-solid border-gray-200 dark:border-gray-700"> <button @click="Sharepopup = false; Likepopup = !Likepopup" class="relative flex items-center justify-center focus:outline-none focus:ring-opacity-50" aria-label="Suka" > <div class="mr-reaction-icon ftmb mr-sidebar-icon dark-filter08"> <template x-if="lastReaction === '点赞'"> <span class="emoji-item-icon ftmb emoji-sidebar-icon mr-like-icon"></span> </template> <template x-if="lastReaction === '感谢'"> <span class="emoji-item-icon ftmb emoji-sidebar-icon mr-thanks-icon"></span> </template> <template x-if="lastReaction === '膜拜'"> <span class="emoji-item-icon ftmb emoji-sidebar-icon mr-worship-icon"></span> </template> <template x-if="lastReaction === '卷起来'"> <span class="emoji-item-icon ftmb emoji-sidebar-icon mr-rollup-icon"></span> </template> <template x-if="lastReaction === '要火'"> <span class="emoji-item-icon ftmb emoji-sidebar-icon mr-fire-icon"></span> </template> <template x-if="lastReaction === '求更新'"> <span class="emoji-item-icon ftmb emoji-sidebar-icon mr-update-icon"></span> </template> </div> <div class="absolute left-8 top-1 min-w-7 h-4 leading-3 bg-gray-200 dark:bg-gray-700 text-center rounded-full text-xs text-blue-700 dark:text-gray-400 py-0.5" x-text="totalCount"></div> </button> <button class="dark:text-gray-400" @click="Likepopup = false; Sharepopup = !Sharepopup" > <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewbox="0 0 20 20" fill="currentColor"> <path d="M15 8a3 3 0 10-2.977-2.63l-4.94 2.47a3 3 0 100 4.319l4.94 2.47a3 3 0 10.895-1.789l-4.94-2.47a3.027 3.027 0 000-.74l4.94-2.47C13.456 7.68 14.19 8 15 8z"></path> </svg> </button> <style>.mbcontent-menus{right: 33% !important;}</style> <button class="mb-alimenus w-6"></button> <div x-data="{ activeTab: 'top', scrollToTop() { window.scrollTo({ top: 0, behavior: 'smooth' }); } }"> <button @click="scrollToTop(); activeTab = 'top'" :class="{ 'text-blue-600': activeTab === 'top' }" class="flex flex-col items-center text-gray-600 dark:text-gray-400" > <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewbox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"></path> </svg> </button> </div> </div> <div x-show="Likepopup" x-cloak class="foot_menu fixed bottom-11 left-0 z-[25] w-full h-auto bg-gray-100 dark:bg-gray-800 shadow-base overflow-y-auto no-scrollbar bg-white" @click.away="Likepopup = false" > <div class="grid grid-cols-3 gap-2 p-4"> <button class="mr-reaction-btn !px-0 !py-2 gap-1.5 text-gray-500 dark:text-gray-400 whitespace-nowrap flex-col" data-reaction="点赞" data-post-id="12399029" data-action="add" > <div class="mr-reaction-icon dark-filter08 !m-0 ftmb"><span class="emoji-item-icon mr-like-icon"></span></div> <span class="mr-reaction-name !text-xs">Suka</span> <span class="mr-reaction-count !text-xs dark:text-gray-400">7</span> </button> <button class="mr-reaction-btn !px-0 !py-2 gap-1.5 text-gray-500 dark:text-gray-400 whitespace-nowrap flex-col" data-reaction="感谢" data-post-id="12399029" data-action="add" > <div class="mr-reaction-icon dark-filter08 !m-0 ftmb"><span class="emoji-item-icon mr-thanks-icon"></span></div> <span class="mr-reaction-name !text-xs">Terima kasih.</span> <span class="mr-reaction-count !text-xs dark:text-gray-400">12</span> </button> <button class="mr-reaction-btn !px-0 !py-2 gap-1.5 text-gray-500 dark:text-gray-400 whitespace-nowrap flex-col" data-reaction="膜拜" data-post-id="12399029" data-action="add" > <div class="mr-reaction-icon dark-filter08 !m-0 ftmb"><span class="emoji-item-icon mr-worship-icon"></span></div> <span class="mr-reaction-name !text-xs">\nSangat kagum</span> <span class="mr-reaction-count !text-xs dark:text-gray-400">20</span> </button> <button class="mr-reaction-btn !px-0 !py-2 gap-1.5 text-gray-500 dark:text-gray-400 whitespace-nowrap flex-col" data-reaction="卷起来" data-post-id="12399029" data-action="add" > <div class="mr-reaction-icon dark-filter08 !m-0 ftmb"><span class="emoji-item-icon mr-rollup-icon"></span></div> <span class="mr-reaction-name !text-xs">Gulung itu.</span> <span class="mr-reaction-count !text-xs dark:text-gray-400">6</span> </button> <button class="mr-reaction-btn !px-0 !py-2 gap-1.5 text-gray-500 dark:text-gray-400 whitespace-nowrap flex-col" data-reaction="要火" data-post-id="12399029" data-action="add" > <div class="mr-reaction-icon dark-filter08 !m-0 ftmb"><span class="emoji-item-icon mr-fire-icon"></span></div> <span class="mr-reaction-name !text-xs">Aku ingin menjadi terkenal.</span> <span class="mr-reaction-count !text-xs dark:text-gray-400">9</span> </button> <button class="mr-reaction-btn !px-0 !py-2 gap-1.5 text-gray-500 dark:text-gray-400 whitespace-nowrap flex-col" data-reaction="求更新" data-post-id="12399029" data-action="add" > <div class="mr-reaction-icon dark-filter08 !m-0 ftmb"><span class="emoji-item-icon mr-update-icon"></span></div> <span class="mr-reaction-name !text-xs">Mohon update</span> <span class="mr-reaction-count !text-xs dark:text-gray-400">17</span> </button> </div> </div> <div x-show="Sharepopup" x-cloak class="foot_menu fixed bottom-11 left-0 z-[25] w-full h-auto bg-gray-100 dark:bg-gray-800 shadow-base overflow-y-auto no-scrollbar bg-white" @click.away="Sharepopup = false" > <div class="p-4 mb-1.5 md:px-8"> <span class="text-sm text-gray-500">Bagikan ke:</span> <div class="flex flex-row items-center justify-between gap-2 mt-2"> <button class="flex flex-col items-center rounded-lg" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.likacloud.com%2Fid%2Fknowledge%2Fwordpress%2Fhow-to-choose-best-wordpress-theme-%25e7%259f%25a5%25e8%25af%2586%2F', 'facebook-share', 'width=600,height=500')" > <i class="fa-brands fa-facebook text-blue-600 text-xl mb-1"></i> <span class="text-xs dark:text-gray-400">Facebook</span> </button> <button class="flex flex-col items-center rounded-lg" onclick="window.open('https://twitter.com/intent/tweet?url=https%3A%2F%2Fwww.likacloud.com%2Fid%2Fknowledge%2Fwordpress%2Fhow-to-choose-best-wordpress-theme-%25e7%259f%25a5%25e8%25af%2586%2F&text=Cara+Memilih+Tema+WordPress+Terbaik%3A+Panduan+Lengkap+Dari+Fungsi+hingga+Kinerja', 'x-share', 'width=600,height=500')" > <i class="fa-brands fa-twitter text-blue-500 text-xl mb-1"></i> <span class="text-xs dark:text-gray-400">X (Twitter)</span> </button> <button class="flex flex-col items-center rounded-lg" onclick="window.open('https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.likacloud.com%2Fid%2Fknowledge%2Fwordpress%2Fhow-to-choose-best-wordpress-theme-%25e7%259f%25a5%25e8%25af%2586%2F&title=Cara+Memilih+Tema+WordPress+Terbaik%3A+Panduan+Lengkap+Dari+Fungsi+hingga+Kinerja', 'linkedin-share', 'width=600,height=500')" > <i class="fa-brands fa-linkedin text-blue-500 text-xl mb-1"></i> <span class="text-xs dark:text-gray-400">LinkedIn</span> </button> <button class="flex flex-col items-center rounded-lg text-xs dark:text-gray-400" data-copy-mirror data-mirror-domain="www.likacloud.com" > <i class="fa-solid fa-link text-blue-500 mb-1 text-lg"></i> <span class="js-copy-text">\nSalin tautan.</span> </button> </div> </div> </div> </div> <div x-show="Likepopup || Sharepopup" x-cloak x-transition:enter="transition-opacity duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" @click="CategoryMenu = false" class="ft-mask-layer fixed inset-0 bg-black bg-opacity-50 z-10 xl:hidden" > </div> <div id="side-rail-slider" x-data="{ isOpen: false, toggle() { this.isOpen = !this.isOpen } }" class="side-rail-slider pc hidden lg:block fixed left-0 xl:bottom-32 transform -translate-y-1/2 z-0" > <div x-data="{ likeExpanded: false, lastReaction: '膜拜', totalCount: 71 }" x-init=" $nextTick(() => { }) " @mouseenter="likeExpanded = true" @mouseleave="likeExpanded = false" class="f-l-like mb-6 z-50" x-cloak> <div class="relative"> <div x-show="likeExpanded" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 translate-x-2" x-transition:enter-end="opacity-100 translate-x-0" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 translate-x-0" x-transition:leave-end="opacity-0 translate-x-2" class="likepopup absolute left-12 top-1/2 transform -translate-y-1/2 flex items-center bg-white dark:bg-gray-700 rounded-lg border border-solid border-gray-200 dark:border-gray-800 p-4" > <div class="flex gap-3 text-gray-500 dark:text-gray-400"> <button class="mr-reaction-btn" data-reaction="点赞" data-post-id="12399029" data-object-type="post" data-action="add"> <span class="mr-reaction-icon dark-filter08 sidebar-icon"><span class="emoji-item-icon mr-like-icon"></span></span> <span class="mr-reaction-name">Suka</span> <span class="mr-reaction-count">7</span> </button> <button class="mr-reaction-btn" data-reaction="感谢" data-post-id="12399029" data-object-type="post" data-action="add"> <span class="mr-reaction-icon dark-filter08 sidebar-icon"><span class="emoji-item-icon mr-thanks-icon"></span></span> <span class="mr-reaction-name">Terima kasih.</span> <span class="mr-reaction-count">12</span> </button> <button class="mr-reaction-btn" data-reaction="膜拜" data-post-id="12399029" data-object-type="post" data-action="add"> <span class="mr-reaction-icon dark-filter08 sidebar-icon"><span class="emoji-item-icon mr-worship-icon"></span></span> <span class="mr-reaction-name">\nSangat kagum</span> <span class="mr-reaction-count">20</span> </button> <button class="mr-reaction-btn" data-reaction="卷起来" data-post-id="12399029" data-object-type="post" data-action="add"> <span class="mr-reaction-icon dark-filter08 sidebar-icon"><span class="emoji-item-icon mr-rollup-icon"></span></span> <span class="mr-reaction-name">Gulung itu.</span> <span class="mr-reaction-count">6</span> </button> <button class="mr-reaction-btn" data-reaction="要火" data-post-id="12399029" data-object-type="post" data-action="add"> <span class="mr-reaction-icon dark-filter08 sidebar-icon"><span class="emoji-item-icon mr-fire-icon"></span></span> <span class="mr-reaction-name">Aku ingin menjadi terkenal.</span> <span class="mr-reaction-count">9</span> </button> <button class="mr-reaction-btn" data-reaction="求更新" data-post-id="12399029" data-object-type="post" data-action="add"> <span class="mr-reaction-icon dark-filter08 sidebar-icon"><span class="emoji-item-icon mr-update-icon"></span></span> <span class="mr-reaction-name">Mohon update</span> <span class="mr-reaction-count">17</span> </button> </div> </div> <button class="leftlike flex items-center justify-center bg-white dark:bg-gray-700 h-10 ml-0.5 rounded-full shadow-lg focus:outline-none focus:ring-opacity-50" aria-label="Suka" > <div class="mr-reaction-icon mr-sidebar-icon"> <template x-if="lastReaction === '点赞'"> <span class="emoji-item-icon emoji-sidebar-icon mr-like-icon"></span> </template> <template x-if="lastReaction === '感谢'"> <span class="emoji-item-icon emoji-sidebar-icon mr-thanks-icon"></span> </template> <template x-if="lastReaction === '膜拜'"> <span class="emoji-item-icon emoji-sidebar-icon mr-worship-icon"></span> </template> <template x-if="lastReaction === '卷起来'"> <span class="emoji-item-icon emoji-sidebar-icon mr-rollup-icon"></span> </template> <template x-if="lastReaction === '要火'"> <span class="emoji-item-icon emoji-sidebar-icon mr-fire-icon"></span> </template> <template x-if="lastReaction === '求更新'"> <span class="emoji-item-icon emoji-sidebar-icon mr-update-icon"></span> </template> </div> </button> <div class="bg-blue-300 dark:bg-gray-700 text-center rounded-full text-xs text-blue-700 dark:text-gray-300 -mt-1" x-text="totalCount"></div> </div> </div> <div x-data="{ shareExpanded: false }" x-init="shareExpanded = false" @mouseenter="shareExpanded = true" @mouseleave="shareExpanded = false" class="mb-10 z-50" x-cloak> <div class="relative"> <div x-show="shareExpanded" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-2" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 translate-y-2" class="sharepopup absolute left-12 top-0 mb-2 bg-white dark:bg-gray-700 text-gray-500 dark:text-gray-300 text-sm rounded-lg shadow-lg py-2 min-w-[140px]" > <span class="text-sm px-4">Bagikan ke:</span> <button class="px-4 py-2.5 hover:bg-gray-100 dark:hover:bg-gray-800 text-left flex items-center w-full relative" x-data="{ showQr: false }" @mouseenter="showQr = true" @mouseleave="showQr = false" > <div class="page-qrcode absolute left-full w-[150px] ml-2 top-0 bg-white dark:bg-gray-700 p-2 shadow-lg rounded z-50 border dark:border-2 border-solid border-gray-400 dark:border-gray-600" x-show="showQr" x-transition data-url="https://www.likacloud.com/id/knowledge/wordpress/how-to-choose-best-wordpress-theme-%e7%9f%a5%e8%af%86/" > <span class="flex justify-center pb-2">Scan kode QR di ponsel untuk berbagi.</span> </div> <i class="fa-brands fa-square-whatsapp text-green-500 mr-2 text-lg w-5 share-button" data-no-auto-translation=""></i> WhatsApp </button> <button class="w-full share-button" data-no-auto-translation=""> <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.likacloud.com%2Fid%2Fknowledge%2Fwordpress%2Fhow-to-choose-best-wordpress-theme-%25e7%259f%25a5%25e8%25af%2586%2F" onclick="return sharePopup(this.href, 'facebook-share', 600, 500)" class="px-4 hover:bg-gray-100 dark:hover:bg-gray-800 text-left flex items-center w-full"> <i class="fa-brands fa-facebook py-2.5 text-blue-600 mr-2 text-lg w-5"></i> Facebook </a> </button> <button class="w-full share-button" data-no-auto-translation=""> <a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fwww.likacloud.com%2Fid%2Fknowledge%2Fwordpress%2Fhow-to-choose-best-wordpress-theme-%25e7%259f%25a5%25e8%25af%2586%2F&text=Cara+Memilih+Tema+WordPress+Terbaik%3A+Panduan+Lengkap+Dari+Fungsi+hingga+Kinerja" onclick="return sharePopup(this.href, 'x-share', 600, 500)" class="px-4 hover:bg-gray-100 dark:hover:bg-gray-800 text-left flex items-center w-full"> <i class="fa-brands fa-twitter text-blue-500 py-2.5 mr-2 text-lg w-5"></i> X (Twitter) </a> </button> <button class="w-full share-button" data-no-auto-translation=""> <a href="https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.likacloud.com%2Fid%2Fknowledge%2Fwordpress%2Fhow-to-choose-best-wordpress-theme-%25e7%259f%25a5%25e8%25af%2586%2F&title=Cara+Memilih+Tema+WordPress+Terbaik%3A+Panduan+Lengkap+Dari+Fungsi+hingga+Kinerja" onclick="return sharePopup(this.href, 'linkedin-share', 600, 500)" class="px-4 hover:bg-gray-100 dark:hover:bg-gray-800 text-left flex items-center w-full"> <i class="fa-brands fa-linkedin py-2.5 text-blue-500 mr-2 text-lg w-5"></i> LinkedIn </a> </button> <button data-copy-mirror data-mirror-domain="www.likacloud.com" class="px-4 py-2.5 hover:bg-gray-100 dark:hover:bg-gray-800 text-left flex items-center w-full"> <i class="fa-solid fa-link text-blue-500 mr-2 text-lg w-5"></i><span class="js-copy-text">\nSalin tautan.</span></button> </div> <button class="leftshare-button p-2.5 xl:p-3 bg-white dark:bg-gray-700 text-gray-500 dark:text-gray-400 rounded-full shadow-lg hover:text-blue-500 focus:outline-none focus:ring-opacity-50" aria-label="Berbagi" > <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewbox="0 0 20 20" fill="currentColor"> <path d="M15 8a3 3 0 10-2.977-2.63l-4.94 2.47a3 3 0 100 4.319l4.94 2.47a3 3 0 10.895-1.789l-4.94-2.47a3.027 3.027 0 000-.74l4.94-2.47C13.456 7.68 14.19 8 15 8z" /> </svg> </button> </div> </div> </div> </div> <button id="scrolltop-btn" x-data="{ show: false, scrollHandler: null, init() { this.checkScroll(); this.scrollHandler = () => this.checkScroll(); window.addEventListener('scroll', this.scrollHandler, { passive: true }); }, checkScroll() { this.show = window.scrollY > 300; }, scrollToTop() { window.scrollTo({ top: window.scrollY, behavior: 'auto' }); window.scrollTo({ top: 0, behavior: 'smooth' }); }, destroy() { window.removeEventListener('scroll', this.scrollHandler); } }" @click="scrollToTop()" x-show="show" x-cloak x-transition.opacity class="rightscrolltop-button fixed right-0.5 hidden lg:block 2xl:right-1 bottom-40 lg:bottom-36 2xl:bottom-44 z-0 p-2.5 xl:p-3 bg-white dark:bg-gray-700 text-gray-500 dark:text-gray-400 hover:text-blue-500 rounded-full shadow-lg focus:outline-none focus:ring-opacity-50" aria-label="Kembali ke atas." > <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewbox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd" /> </svg> </button> <style>#chat-toggle {bottom: 5rem;}#chat-window {bottom: 8rem;}@media (min-width: 768px) {#chat-toggle {bottom: 12rem;}#chat-window {bottom: 15rem;}}@media (min-width: 768px) {#chat-toggle {bottom: 10.5rem;}#chat-window {bottom: 13.5rem;}}@media (min-width: 1024px) {#chat-toggle {bottom: 4.5rem;}#chat-window {bottom: 7.5rem;}}</style> <style>@media (min-width: 1024px) {#scrolltop-btn{bottom:14rem}}#scrolltop-btn.width-1550-plus.rightscrolltop-button{bottom:14rem}@media (min-width: 1280px) {#scrolltop-btn{bottom:10rem}}</style> <div x-show="CategoryMenu" x-cloak x-transition:enter="transition-opacity duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" @click="CategoryMenu = false" class="ft-mask-layer fixed inset-0 bg-black bg-opacity-50 z-[31] xl:hidden" > </div> <button id="chat-toggle" class="fixed bottom-4 md:bottom-40 lg:bottom-16 right-[0.2rem] w-9 h-9 xl:w-10 xl:h-10 rounded-full shadow-2xl backdrop-blur-md flex items-center justify-center text-lg text-white bg-gradient-to-br from-blue-500 to-indigo-600 hover:scale-110 transition-all duration-300 z-5" aria-label="Buka obrolan."> <i class="fa-solid fa-comment-dots"></i> </button> <div id="chat-window" class="fixed bottom-16 md:bottom-52 lg:bottom-28 right-6 w-96 bg-white dark:bg-gray-900 shadow-2xl rounded-lg border-solid border border-gray-200 dark:border-gray-700 flex flex-col overflow-hidden sm:w-96 w-[calc(100vw-3rem)] md:max-h-[35rem] lg:max-h-[25rem] xl:max-h-[35rem] max-h-[64vh] hidden z-11"> <div class="px-4 py-2 md:p-4 text-lg font-semibold bg-gradient-to-r from-blue-600 to-indigo-600 text-white flex items-center justify-between"> <span>Asisten AI</span> <div class="flex items-center gap-6"> <button id="chat-clear" class="text-white text-base hover:opacity-80" title="Menghapus riwayat obrolan."> <i class="fa-solid fa-trash"></i> </button> <button id="chat-close" class="text-white text-xl hover:opacity-80"><i class="fa-solid fa-xmark"></i></button> </div> </div> <div id="chat-messages" class="chat-messages-windows flex-1 p-4 overflow-y-auto space-y-4 text-sm bg-gray-50 dark:bg-gray-800"> <p class="text-gray-400 text-center">Halo, saya asisten kecil LikaCloud, senang bisa melayani Anda!</p> </div> <div class="p-3 border-t bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700 flex gap-2"> <input id="chat-input" type="text" placeholder="Silakan masukkan pertanyaan..." class="flex-1 border !rounded-lg px-3 py-2 text-sm outline-none focus:ring-2 text-gray-700 dark:!border-gray-700 focus:ring-blue-400 dark:bg-gray-800 dark:text-white"> <button id="chat-send" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition shrink-0"> Kirimkan. </button> </div> <div id="chat-confirm-mask" class="absolute inset-0 bg-gray-900/70 flex items-center justify-center hidden z-20"> <div class="bg-white dark:bg-gray-700 rounded-lg shadow-xl p-5 w-72"> <p class="text-gray-800 dark:text-gray-200 text-sm mb-4 text-center"> Apakah Anda yakin ingin menghapus semua riwayat obrolan? </p> <div class="flex justify-end gap-3"> <button id="chat-confirm-cancel" class="px-3 py-1.5 text-sm text-gray-800 rounded border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-800"> Membatalkan. </button> <button id="chat-confirm-ok" class="px-3 py-1.5 text-sm rounded bg-red-600 text-white hover:bg-red-700"> Hapus. </button> </div> </div> </div> </div> </div> </footer> </div> <div data-rocket-location-hash="51c620193beeeeea4e308aea33e56a5f" id="common-tooltip" class="hidden xl:block fixed opacity-0 z-50 px-3 py-1.5 rounded bg-gray-800 text-white dark:bg-gray-700 dark:text-gray-100"></div> <script>const query = "";</script> <template id="tp-language" data-tp-language="id_ID"></template> <script>
(function(){
if (!document.getElementById('cmplz-cookiebanner-container')) {
var d = document.createElement('div');
d.id = 'cmplz-cookiebanner-container';
document.body.appendChild(d);
}
})();
</script> <script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/id/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/data/attachment/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/Cloud/*","/wp-content/themes/blankslate/*","/id/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script> <div data-rocket-location-hash="e0584665a719f063f60916279be5b9af" class="trp_model_container" id="trp_ald_modal_container" style="display: none" data-no-dynamic-translation data-no-translation> <div class="trp_ald_modal" id="trp_ald_modal_popup"> <div id="trp_ald_popup_text"> We've detected you might be speaking a different language. Do you want to change to: </div> <div class="trp_ald_select_and_button"> <div class="trp_ald_ls_container"> <div class="trp-language-switcher trp-language-switcher-container" id="trp_ald_popup_select_container" data-no-translation data-no-auto-translation=""> <div class="trp-ls-shortcode-current-language" id="zh_CN" special-selector="trp_ald_popup_current_language" data-trp-ald-selected-language= "zh_CN" data-no-auto-translation=""> <img src="https://www.likacloud.com/wp-content/plugins/translatepress-multilingual/assets/flags/1x1/zh_CN.svg" class="trp-flag-image" alt="Ubah bahasa ke 简体中文" loading="lazy" decoding="async" width="18" height="14" /> 简体中文 </div> <div class="trp-ls-shortcode-language" data-no-auto-translation=""> <div class="trp-ald-popup-select" id="zh_CN" data-trp-ald-selected-language = "zh_CN"> <img src="https://www.likacloud.com/wp-content/plugins/translatepress-multilingual/assets/flags/1x1/zh_CN.svg" class="trp-flag-image" alt="Ubah bahasa ke 简体中文" loading="lazy" decoding="async" width="18" height="14" /> 简体中文 </div> <div class="trp-ald-popup-select" id="zh_Hant" data-trp-ald-selected-language = "zh_Hant"> <img src="https://www.likacloud.com/wp-content/plugins/translatepress-multilingual/assets/flags/1x1/zh_CN.svg" class="trp-flag-image trp-custom-flag" alt="繁體中文" loading="lazy" decoding="async" width="18" height="14" /> 繁體中文 </div> <div class="trp-ald-popup-select" id="en_US" data-trp-ald-selected-language = "en_US"> <img src="https://www.likacloud.com/wp-content/plugins/translatepress-multilingual/assets/flags/1x1/en_US.svg" class="trp-flag-image" alt="Ubah bahasa ke English" loading="lazy" decoding="async" width="18" height="14" /> English </div> <div class="trp-ald-popup-select" id="ru_RU" data-trp-ald-selected-language = "ru_RU"> <img src="https://www.likacloud.com/wp-content/plugins/translatepress-multilingual/assets/flags/1x1/ru_RU.svg" class="trp-flag-image" alt="Ubah bahasa ke Русский" loading="lazy" decoding="async" width="18" height="14" /> Русский </div> <div class="trp-ald-popup-select" id="ja" data-trp-ald-selected-language = "ja"> <img src="https://www.likacloud.com/wp-content/plugins/translatepress-multilingual/assets/flags/1x1/ja.svg" class="trp-flag-image" alt="Ubah bahasa ke 日本語" loading="lazy" decoding="async" width="18" height="14" /> 日本語 </div> <div class="trp-ald-popup-select" id="ko_KR" data-trp-ald-selected-language = "ko_KR"> <img src="https://www.likacloud.com/wp-content/plugins/translatepress-multilingual/assets/flags/1x1/ko_KR.svg" class="trp-flag-image" alt="Ubah bahasa ke 한국어" loading="lazy" decoding="async" width="18" height="14" /> 한국어 </div> <div class="trp-ald-popup-select" id="es_ES" data-trp-ald-selected-language = "es_ES"> <img src="https://www.likacloud.com/wp-content/plugins/translatepress-multilingual/assets/flags/1x1/es_ES.svg" class="trp-flag-image" alt="Ubah bahasa ke Español" loading="lazy" decoding="async" width="18" height="14" /> Español </div> <div class="trp-ald-popup-select" id="pt_BR" data-trp-ald-selected-language = "pt_BR"> <img src="https://www.likacloud.com/wp-content/plugins/translatepress-multilingual/assets/flags/1x1/pt_BR.svg" class="trp-flag-image" alt="Ubah bahasa ke Português do Brasil" loading="lazy" decoding="async" width="18" height="14" /> Português do Brasil </div> <div class="trp-ald-popup-select" id="de_DE" data-trp-ald-selected-language = "de_DE"> <img src="https://www.likacloud.com/wp-content/plugins/translatepress-multilingual/assets/flags/1x1/de_DE.svg" class="trp-flag-image" alt="Ubah bahasa ke Deutsch" loading="lazy" decoding="async" width="18" height="14" /> Deutsch </div> <div class="trp-ald-popup-select" id="fr_FR" data-trp-ald-selected-language = "fr_FR"> <img src="https://www.likacloud.com/wp-content/plugins/translatepress-multilingual/assets/flags/1x1/fr_FR.svg" class="trp-flag-image" alt="Ubah bahasa ke Français" loading="lazy" decoding="async" width="18" height="14" /> Français </div> <div class="trp-ald-popup-select" id="ar" data-trp-ald-selected-language = "ar"> <img src="https://www.likacloud.com/wp-content/plugins/translatepress-multilingual/assets/flags/1x1/ar.svg" class="trp-flag-image" alt="Ubah bahasa ke العربية" loading="lazy" decoding="async" width="18" height="14" /> العربية </div> <div class="trp-ald-popup-select" id="tr_TR" data-trp-ald-selected-language = "tr_TR"> <img src="https://www.likacloud.com/wp-content/plugins/translatepress-multilingual/assets/flags/1x1/tr_TR.svg" class="trp-flag-image" alt="Ubah bahasa ke Türkçe" loading="lazy" decoding="async" width="18" height="14" /> Türkçe </div> <div class="trp-ald-popup-select" id="id_ID" data-trp-ald-selected-language = "id_ID"> <img src="https://www.likacloud.com/wp-content/plugins/translatepress-multilingual/assets/flags/1x1/id_ID.svg" class="trp-flag-image" alt="" role="presentation" loading="lazy" decoding="async" width="18" height="14" /> Bahasa Indonesia </div> <div class="trp-ald-popup-select" id="vi" data-trp-ald-selected-language = "vi"> <img src="https://www.likacloud.com/wp-content/plugins/translatepress-multilingual/assets/flags/1x1/vi.svg" class="trp-flag-image" alt="Ubah bahasa ke Tiếng Việt" loading="lazy" decoding="async" width="18" height="14" /> Tiếng Việt </div> </div> </div> </div> <div class="trp_ald_button"> <a href="http://www.likacloud.com" id="trp_ald_popup_change_language"> Change Language </a> </div> </div> <a id="trp_ald_x_button_and_textarea" href="#"> <span id="trp_ald_x_button" title="Close and do not switch language"></span> <span id="trp_ald_x_button_textarea" title="Close and do not switch language"> Close and do not switch language </span> </a> </div> </div> <template id="trp_ald_no_text_popup_template"> <div id="trp_no_text_popup_wrap"> <div id="trp_no_text_popup" class="trp_ald_no_text_popup" data-no-dynamic-translation data-no-translation> <div id="trp_ald_not_text_popup_ls_and_button"> <div id="trp_ald_no_text_popup_div"> <span id="trp_ald_no_text_popup_text"> We've detected you might be speaking a different language. Do you want to change to: </span> </div> <div class="trp_ald_ls_container"> <div class="trp-language-switcher trp-language-switcher-container" id="trp_ald_no_text_select" data-no-translation data-no-auto-translation=""> <div class="trp-ls-shortcode-current-language" id="zh_CN" special-selector="trp_ald_popup_current_language" data-trp-ald-selected-language="zh_CN" data-no-auto-translation=""> <img src="https://www.likacloud.com/wp-content/plugins/translatepress-multilingual/assets/flags/1x1/zh_CN.svg" class="trp-flag-image" alt="Ubah bahasa ke 简体中文" loading="lazy" decoding="async" width="18" height="14" /> 简体中文 </div> <div class="trp-ls-shortcode-language" id="trp_ald_no_text_popup_select_container" data-no-auto-translation=""> <div class="trp-ald-popup-select" id="zh_CN" data-trp-ald-selected-language= "zh_CN"> <img src="https://www.likacloud.com/wp-content/plugins/translatepress-multilingual/assets/flags/1x1/zh_CN.svg" class="trp-flag-image" alt="Ubah bahasa ke 简体中文" loading="lazy" decoding="async" width="18" height="14" /> 简体中文 </div> <div class="trp-ald-popup-select" id="zh_Hant" data-trp-ald-selected-language="zh_Hant"> <img src="https://www.likacloud.com/wp-content/plugins/translatepress-multilingual/assets/flags/1x1/zh_CN.svg" class="trp-flag-image trp-custom-flag" alt="繁體中文" loading="lazy" decoding="async" width="18" height="14" /> 繁體中文 </div> <div class="trp-ald-popup-select" id="en_US" data-trp-ald-selected-language="en_US"> <img src="https://www.likacloud.com/wp-content/plugins/translatepress-multilingual/assets/flags/1x1/en_US.svg" class="trp-flag-image" alt="Ubah bahasa ke English" loading="lazy" decoding="async" width="18" height="14" /> English </div> <div class="trp-ald-popup-select" id="ru_RU" data-trp-ald-selected-language="ru_RU"> <img src="https://www.likacloud.com/wp-content/plugins/translatepress-multilingual/assets/flags/1x1/ru_RU.svg" class="trp-flag-image" alt="Ubah bahasa ke Русский" loading="lazy" decoding="async" width="18" height="14" /> Русский </div> <div class="trp-ald-popup-select" id="ja" data-trp-ald-selected-language="ja"> <img src="https://www.likacloud.com/wp-content/plugins/translatepress-multilingual/assets/flags/1x1/ja.svg" class="trp-flag-image" alt="Ubah bahasa ke 日本語" loading="lazy" decoding="async" width="18" height="14" /> 日本語 </div> <div class="trp-ald-popup-select" id="ko_KR" data-trp-ald-selected-language="ko_KR"> <img src="https://www.likacloud.com/wp-content/plugins/translatepress-multilingual/assets/flags/1x1/ko_KR.svg" class="trp-flag-image" alt="Ubah bahasa ke 한국어" loading="lazy" decoding="async" width="18" height="14" /> 한국어 </div> <div class="trp-ald-popup-select" id="es_ES" data-trp-ald-selected-language="es_ES"> <img src="https://www.likacloud.com/wp-content/plugins/translatepress-multilingual/assets/flags/1x1/es_ES.svg" class="trp-flag-image" alt="Ubah bahasa ke Español" loading="lazy" decoding="async" width="18" height="14" /> Español </div> <div class="trp-ald-popup-select" id="pt_BR" data-trp-ald-selected-language="pt_BR"> <img src="https://www.likacloud.com/wp-content/plugins/translatepress-multilingual/assets/flags/1x1/pt_BR.svg" class="trp-flag-image" alt="Ubah bahasa ke Português do Brasil" loading="lazy" decoding="async" width="18" height="14" /> Português do Brasil </div> <div class="trp-ald-popup-select" id="de_DE" data-trp-ald-selected-language="de_DE"> <img src="https://www.likacloud.com/wp-content/plugins/translatepress-multilingual/assets/flags/1x1/de_DE.svg" class="trp-flag-image" alt="Ubah bahasa ke Deutsch" loading="lazy" decoding="async" width="18" height="14" /> Deutsch </div> <div class="trp-ald-popup-select" id="fr_FR" data-trp-ald-selected-language="fr_FR"> <img src="https://www.likacloud.com/wp-content/plugins/translatepress-multilingual/assets/flags/1x1/fr_FR.svg" class="trp-flag-image" alt="Ubah bahasa ke Français" loading="lazy" decoding="async" width="18" height="14" /> Français </div> <div class="trp-ald-popup-select" id="ar" data-trp-ald-selected-language="ar"> <img src="https://www.likacloud.com/wp-content/plugins/translatepress-multilingual/assets/flags/1x1/ar.svg" class="trp-flag-image" alt="Ubah bahasa ke العربية" loading="lazy" decoding="async" width="18" height="14" /> العربية </div> <div class="trp-ald-popup-select" id="tr_TR" data-trp-ald-selected-language="tr_TR"> <img src="https://www.likacloud.com/wp-content/plugins/translatepress-multilingual/assets/flags/1x1/tr_TR.svg" class="trp-flag-image" alt="Ubah bahasa ke Türkçe" loading="lazy" decoding="async" width="18" height="14" /> Türkçe </div> <div class="trp-ald-popup-select" id="id_ID" data-trp-ald-selected-language="id_ID"> <img src="https://www.likacloud.com/wp-content/plugins/translatepress-multilingual/assets/flags/1x1/id_ID.svg" class="trp-flag-image" alt="" role="presentation" loading="lazy" decoding="async" width="18" height="14" /> Bahasa Indonesia </div> <div class="trp-ald-popup-select" id="vi" data-trp-ald-selected-language="vi"> <img src="https://www.likacloud.com/wp-content/plugins/translatepress-multilingual/assets/flags/1x1/vi.svg" class="trp-flag-image" alt="Ubah bahasa ke Tiếng Việt" loading="lazy" decoding="async" width="18" height="14" /> Tiếng Việt </div> </div> </div> </div> <div class="trp_ald_change_language_div"> <a href="http://www.likacloud.com" id="trp_ald_no_text_popup_change_language"> Change Language </a> </div> </div> <div id="trp_ald_no_text_popup_x"> <button id="trp_close"></button> </div> </div> </div> </template> <div id="cmplz-cookiebanner-container"><div class="cmplz-cookiebanner cmplz-hidden banner-1 banner-a optin cmplz-bottom-left cmplz-categories-type-view-preferences" aria-modal="true" data-nosnippet="true" role="dialog" aria-live="polite" aria-labelledby="cmplz-header-1-optin" aria-describedby="cmplz-message-1-optin"> <div class="cmplz-header"> <div class="cmplz-logo"></div> <div class="cmplz-title" id="cmplz-header-1-optin">Manajemen Persetujuan</div> <div class="cmplz-close" tabindex="0" role="button" aria-label="Tutup dialog." data-no-translation-aria-label=""> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times" class="svg-inline--fa fa-times fa-w-11" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 352 512"><path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path></svg> </div> </div> <div class="cmplz-divider cmplz-divider-header"></div> <div class="cmplz-body"> <div class="cmplz-message" id="cmplz-message-1-optin"><p>Kami menggunakan cookie dan teknologi serupa untuk menyimpan/mengakses informasi perangkat dan memproses data seperti perilaku penelusuran. Tidak memberikan persetujuan dapat memengaruhi fitur-fitur tertentu.</p></div> <div class="cmplz-categories"> <details class="cmplz-category cmplz-functional" > <summary> <span class="cmplz-category-header"> <span class="cmplz-category-title">Fungsional.</span> <span class='cmplz-always-active'> <span class="cmplz-banner-checkbox"> <input type="checkbox" id="cmplz-functional-optin" data-category="cmplz_functional" class="cmplz-consent-checkbox cmplz-functional" size="40" value="1"/> <label class="cmplz-label" for="cmplz-functional-optin"><span class="screen-reader-text">Fungsional.</span></label> </span> Selalu aktif. </span> <span class="cmplz-icon cmplz-open"> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512" height="18" ><path d="M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"/></svg> </span> </span> </summary> <div class="cmplz-description"> <span class="cmplz-description-functional">Penyimpanan atau akses sangat penting untuk menyediakan layanan yang diminta oleh pengguna atau untuk mengirimkan komunikasi melalui jaringan.</span> </div> </details> <details class="cmplz-category cmplz-preferences" > <summary> <span class="cmplz-category-header"> <span class="cmplz-category-title">Preferensi</span> <span class="cmplz-banner-checkbox"> <input type="checkbox" id="cmplz-preferences-optin" data-category="cmplz_preferences" class="cmplz-consent-checkbox cmplz-preferences" size="40" value="1"/> <label class="cmplz-label" for="cmplz-preferences-optin"><span class="screen-reader-text">Preferensi</span></label> </span> <span class="cmplz-icon cmplz-open"> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512" height="18" ><path d="M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"/></svg> </span> </span> </summary> <div class="cmplz-description"> <span class="cmplz-description-preferences">Penyimpanan atau akses teknis diperlukan untuk tujuan sah menyimpan preferensi yang tidak diminta oleh pelanggan atau pengguna.</span> </div> </details> <details class="cmplz-category cmplz-statistics" > <summary> <span class="cmplz-category-header"> <span class="cmplz-category-title">\nStatistik</span> <span class="cmplz-banner-checkbox"> <input type="checkbox" id="cmplz-statistics-optin" data-category="cmplz_statistics" class="cmplz-consent-checkbox cmplz-statistics" size="40" value="1"/> <label class="cmplz-label" for="cmplz-statistics-optin"><span class="screen-reader-text">\nStatistik</span></label> </span> <span class="cmplz-icon cmplz-open"> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512" height="18" ><path d="M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"/></svg> </span> </span> </summary> <div class="cmplz-description"> <span class="cmplz-description-statistics">Penyimpanan teknis atau akses yang digunakan secara eksklusif untuk tujuan statistik.</span> <span class="cmplz-description-statistics-anonymous">Penyimpanan atau akses hanya untuk statistik anonim. Tanpa permintaan hukum atau data pihak ketiga, informasi ini biasanya tidak dapat mengidentifikasi Anda.</span> </div> </details> <details class="cmplz-category cmplz-marketing" > <summary> <span class="cmplz-category-header"> <span class="cmplz-category-title">Pemasaran.</span> <span class="cmplz-banner-checkbox"> <input type="checkbox" id="cmplz-marketing-optin" data-category="cmplz_marketing" class="cmplz-consent-checkbox cmplz-marketing" size="40" value="1"/> <label class="cmplz-label" for="cmplz-marketing-optin"><span class="screen-reader-text">Pemasaran.</span></label> </span> <span class="cmplz-icon cmplz-open"> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512" height="18" ><path d="M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"/></svg> </span> </span> </summary> <div class="cmplz-description"> <span class="cmplz-description-marketing">Penyimpanan atau akses teknis diperlukan untuk membuat profil pengguna untuk mengirim iklan, atau untuk melacak pengguna di sebuah situs web atau di beberapa situs web untuk tujuan pemasaran yang serupa.</span> </div> </details> </div> </div> <div class="cmplz-links cmplz-information"> <ul> <li><a class="cmplz-link cmplz-manage-options cookie-statement" href="#" data-relative_url="#cmplz-manage-consent-container" data-no-translation="" data-trp-gettext="">Manajemen Opsi</a></li> <li><a class="cmplz-link cmplz-manage-third-parties cookie-statement" href="#" data-relative_url="#cmplz-cookies-overview" data-no-translation="" data-trp-gettext="">Mengelola layanan</a></li> <li><a class="cmplz-link cmplz-manage-vendors tcf cookie-statement" href="#" data-relative_url="#cmplz-tcf-wrapper" data-no-translation="" data-trp-gettext="">Mengelola vendor {vendor_count}</a></li> <li><a class="cmplz-link cmplz-external cmplz-read-more-purposes tcf" target="_blank" rel="noopener noreferrer nofollow" href="https://cookiedatabase.org/tcf/purposes/" aria-label="Baca lebih lanjut tentang tujuan TCF di Database Cookie." data-no-translation="" data-trp-gettext="" data-no-translation-aria-label="">Baca lebih lanjut tentang tujuan-tujuan tersebut.</a></li> </ul> </div> <div class="cmplz-divider cmplz-footer"></div> <div class="cmplz-buttons"> <button class="cmplz-btn cmplz-accept">Terima.</button> <button class="cmplz-btn cmplz-deny">\nTolak.</button> <button class="cmplz-btn cmplz-view-preferences">Preferensi</button> <button class="cmplz-btn cmplz-save-preferences">Simpan.</button> <a class="cmplz-btn cmplz-manage-options tcf cookie-statement" href="#" data-relative_url="#cmplz-manage-consent-container">Preferensi</a> </div> <div class="cmplz-documents cmplz-links"> <ul> <li><a class="cmplz-link cookie-statement" href="#" data-relative_url="">\n{title}</a></li> <li><a class="cmplz-link privacy-statement" href="#" data-relative_url="">\n{title}</a></li> <li><a class="cmplz-link impressum" href="#" data-relative_url="">\n{title}</a></li> </ul> </div> </div> </div> <div id="cmplz-manage-consent" data-nosnippet="true"><button class="cmplz-btn cmplz-hidden cmplz-manage-consent manage-consent-1">Manajemen Persetujuan</button> </div><script>
jQuery(document).ready(function($) {
var deviceAgent = navigator.userAgent.toLowerCase();
if (deviceAgent.match(/(iphone|ipod|ipad)/)) {
$("html").addClass("ios");
$("html").addClass("mobile");
}
if (deviceAgent.match(/(Android)/)) {
$("html").addClass("android");
$("html").addClass("mobile");
}
if (navigator.userAgent.search("MSIE") >= 0) {
$("html").addClass("ie");
}
else if (navigator.userAgent.search("Chrome") >= 0) {
$("html").addClass("chrome");
}
else if (navigator.userAgent.search("Firefox") >= 0) {
$("html").addClass("firefox");
}
else if (navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0) {
$("html").addClass("safari");
}
else if (navigator.userAgent.search("Opera") >= 0) {
$("html").addClass("opera");
}
});
</script> <script type="text/javascript" id="js-5-js-extra">
/* <![CDATA[ */
var hljsThemeData = {"light_url":"https://www.likacloud.com/wp-content/plugins/Pure-Highlightjs/highlight/styles/default.css","dark_url":"https://www.likacloud.com/wp-content/plugins/Pure-Highlightjs/highlight/styles/atom-one-dark-reasonable.css"};
//# sourceURL=js-5-js-extra
/* ]]> */
</script> <script type="text/javascript" src="https://www.likacloud.com/wp-content/mmr/44ea1fd3-1774419983.js" id="js-5-js"></script> <script type="text/javascript" src="https://www.likacloud.com/wp-content/mmr/9e871135-1768718693.js" id="js-6-js" defer="defer" data-wp-strategy="defer"></script> <script type="text/javascript" id="js-7-js-extra">
/* <![CDATA[ */
var mr_vars = {"rest_url":"https://www.likacloud.com/id/wp-json/","nonce":"535ff66e92"};
//# sourceURL=js-7-js-extra
/* ]]> */
</script> <script type="text/javascript" src="https://www.likacloud.com/wp-content/mmr/5c4007c3-1768450740.js" id="js-7-js"></script> <script type="text/javascript" id="js-8-js-extra">
/* <![CDATA[ */
var LIKACLOUD_AI = {"lang":"id_ID","restBase":"https://www.likacloud.com/id/wp-json/likacloud/v1"};
//# sourceURL=js-8-js-extra
/* ]]> */
</script> <script type="text/javascript" src="https://www.likacloud.com/wp-content/mmr/20480433-1768450740.js" id="js-8-js" defer="defer" data-wp-strategy="defer"></script> <script type="text/javascript" id="js-9-js-extra">
/* <![CDATA[ */
var LK_AI = {"restBase":"https://www.likacloud.com/id/wp-json/likacloud/v1"};
//# sourceURL=js-9-js-extra
/* ]]> */
</script> <script type="text/javascript" src="https://www.likacloud.com/wp-content/mmr/340f0575-1768450740.js" id="js-9-js"></script> <script type="text/javascript" id="js-10-js-extra">
/* <![CDATA[ */
var utv_params = {"rest_url":"https://www.likacloud.com/id/wp-json/unified-tracking/v1/views/","current_id":"12399029","current_type":"post"};
//# sourceURL=js-10-js-extra
/* ]]> */
</script> <script type="text/javascript" src="https://www.likacloud.com/wp-content/mmr/89710985-1768450740.js" id="js-10-js"></script> <script type="text/javascript" id="js-11-js-extra">
/* <![CDATA[ */
var complianz = {"prefix":"cmplz_","user_banner_id":"1","set_cookies":[],"block_ajax_content":"0","banner_version":"114","version":"7.5.6.1","store_consent":"1","do_not_track_enabled":"","consenttype":"optin","region":"eu","geoip":"1","dismiss_timeout":"","disable_cookiebanner":"","soft_cookiewall":"","dismiss_on_scroll":"","cookie_expiry":"365","url":"https://www.likacloud.com/id/wp-json/complianz/v1/","locale":"lang=id&locale=id_ID","set_cookies_on_root":"1","cookie_domain":"likacloud.com","current_policy_id":"57","cookie_path":"/","categories":{"statistics":"statistics","marketing":"marketing"},"tcf_active":"","placeholdertext":"Click to accept {category} cookies and enable this content","css_file":"https://static.likacloud.com/data/attachment/complianz/css/banner-{banner_id}-{type}.css?v=114","page_links":{"eu":{"cookie-statement":{"title":"Cookie \u653f\u7b56","url":"https://www.likacloud.com/id/cookie-policy/"},"privacy-statement":{"title":"\u9690\u79c1\u58f0\u660e","url":"https://www.likacloud.com/id/privacy-policy/"},"impressum":{"title":"\u7f51\u7ad9\u58f0\u660e","url":"https://www.likacloud.com/id/impressum/"},"disclaimer":{"title":"\u514d\u8d23\u58f0\u660e","url":"https://www.likacloud.com/id/disclaimer/"}},"us":{"impressum":{"title":"\u7f51\u7ad9\u58f0\u660e","url":"https://www.likacloud.com/id/impressum/"},"disclaimer":{"title":"\u514d\u8d23\u58f0\u660e","url":"https://www.likacloud.com/id/disclaimer/"}},"uk":{"impressum":{"title":"\u7f51\u7ad9\u58f0\u660e","url":"https://www.likacloud.com/id/impressum/"},"disclaimer":{"title":"\u514d\u8d23\u58f0\u660e","url":"https://www.likacloud.com/id/disclaimer/"}},"ca":{"impressum":{"title":"\u7f51\u7ad9\u58f0\u660e","url":"https://www.likacloud.com/id/impressum/"},"disclaimer":{"title":"\u514d\u8d23\u58f0\u660e","url":"https://www.likacloud.com/id/disclaimer/"}},"au":{"impressum":{"title":"\u7f51\u7ad9\u58f0\u660e","url":"https://www.likacloud.com/id/impressum/"},"disclaimer":{"title":"\u514d\u8d23\u58f0\u660e","url":"https://www.likacloud.com/id/disclaimer/"}},"za":{"impressum":{"title":"\u7f51\u7ad9\u58f0\u660e","url":"https://www.likacloud.com/id/impressum/"},"disclaimer":{"title":"\u514d\u8d23\u58f0\u660e","url":"https://www.likacloud.com/id/disclaimer/"}},"br":{"impressum":{"title":"\u7f51\u7ad9\u58f0\u660e","url":"https://www.likacloud.com/id/impressum/"},"disclaimer":{"title":"\u514d\u8d23\u58f0\u660e","url":"https://www.likacloud.com/id/disclaimer/"}}},"tm_categories":"","forceEnableStats":"","preview":"","clean_cookies":"","aria_label":"Click to accept {category} cookies and enable this content"};
//# sourceURL=js-11-js-extra
/* ]]> */
</script> <script type="text/javascript" src="https://www.likacloud.com/wp-content/mmr/63820809-1761889066.js" id="js-11-js"></script> <script type="text/javascript" id="rocket-browser-checker-js-after">
/* <![CDATA[ */
"use strict";var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}return function(Constructor,protoProps,staticProps){return protoProps&&defineProperties(Constructor.prototype,protoProps),staticProps&&defineProperties(Constructor,staticProps),Constructor}}();function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}var RocketBrowserCompatibilityChecker=function(){function RocketBrowserCompatibilityChecker(options){_classCallCheck(this,RocketBrowserCompatibilityChecker),this.passiveSupported=!1,this._checkPassiveOption(this),this.options=!!this.passiveSupported&&options}return _createClass(RocketBrowserCompatibilityChecker,[{key:"_checkPassiveOption",value:function(self){try{var options={get passive(){return!(self.passiveSupported=!0)}};window.addEventListener("test",null,options),window.removeEventListener("test",null,options)}catch(err){self.passiveSupported=!1}}},{key:"initRequestIdleCallback",value:function(){!1 in window&&(window.requestIdleCallback=function(cb){var start=Date.now();return setTimeout(function(){cb({didTimeout:!1,timeRemaining:function(){return Math.max(0,50-(Date.now()-start))}})},1)}),!1 in window&&(window.cancelIdleCallback=function(id){return clearTimeout(id)})}},{key:"isDataSaverModeOn",value:function(){return"connection"in navigator&&!0===navigator.connection.saveData}},{key:"supportsLinkPrefetch",value:function(){var elem=document.createElement("link");return elem.relList&&elem.relList.supports&&elem.relList.supports("prefetch")&&window.IntersectionObserver&&"isIntersecting"in IntersectionObserverEntry.prototype}},{key:"isSlowConnection",value:function(){return"connection"in navigator&&"effectiveType"in navigator.connection&&("2g"===navigator.connection.effectiveType||"slow-2g"===navigator.connection.effectiveType)}}]),RocketBrowserCompatibilityChecker}();
//# sourceURL=rocket-browser-checker-js-after
/* ]]> */
</script> <script type="text/javascript" id="rocket-preload-links-js-extra">
/* <![CDATA[ */
var RocketPreloadLinksConfig = {"excludeUris":"/id(/(?:.+/)?feed(?:/(?:.+/?)?)?$|/(?:.+/)?embed/|/(index.php/)?(.*)wp-json(/.*|$))|/refer/|/go/|/recommend/|/recommends/|/zh\\-hant(?:/|$)|/en(?:/|$)|/ru(?:/|$)|/ja(?:/|$)|/ko(?:/|$)|/es(?:/|$)|/pt(?:/|$)|/de(?:/|$)|/fr(?:/|$)|/ar(?:/|$)|/tr(?:/|$)|/id(?:/|$)|/vi(?:/|$)","usesTrailingSlash":"1","imageExt":"jpg|jpeg|gif|png|tiff|bmp|webp|avif|pdf|doc|docx|xls|xlsx|php","fileExt":"jpg|jpeg|gif|png|tiff|bmp|webp|avif|pdf|doc|docx|xls|xlsx|php|html|htm","siteUrl":"https://www.likacloud.com/id","onHoverDelay":"100","rateThrottle":"3"};
//# sourceURL=rocket-preload-links-js-extra
/* ]]> */
</script> <script type="text/javascript" id="rocket-preload-links-js-after">
/* <![CDATA[ */
(function() {
"use strict";var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e=function(){function i(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(e,t,n){return t&&i(e.prototype,t),n&&i(e,n),e}}();function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var t=function(){function n(e,t){i(this,n),this.browser=e,this.config=t,this.options=this.browser.options,this.prefetched=new Set,this.eventTime=null,this.threshold=1111,this.numOnHover=0}return e(n,[{key:"init",value:function(){!this.browser.supportsLinkPrefetch()||this.browser.isDataSaverModeOn()||this.browser.isSlowConnection()||(this.regex={excludeUris:RegExp(this.config.excludeUris,"i"),images:RegExp(".("+this.config.imageExt+")$","i"),fileExt:RegExp(".("+this.config.fileExt+")$","i")},this._initListeners(this))}},{key:"_initListeners",value:function(e){-1<this.config.onHoverDelay&&document.addEventListener("mouseover",e.listener.bind(e),e.listenerOptions),document.addEventListener("mousedown",e.listener.bind(e),e.listenerOptions),document.addEventListener("touchstart",e.listener.bind(e),e.listenerOptions)}},{key:"listener",value:function(e){var t=e.target.closest("a"),n=this._prepareUrl(t);if(null!==n)switch(e.type){case"mousedown":case"touchstart":this._addPrefetchLink(n);break;case"mouseover":this._earlyPrefetch(t,n,"mouseout")}}},{key:"_earlyPrefetch",value:function(t,e,n){var i=this,r=setTimeout(function(){if(r=null,0===i.numOnHover)setTimeout(function(){return i.numOnHover=0},1e3);else if(i.numOnHover>i.config.rateThrottle)return;i.numOnHover++,i._addPrefetchLink(e)},this.config.onHoverDelay);t.addEventListener(n,function e(){t.removeEventListener(n,e,{passive:!0}),null!==r&&(clearTimeout(r),r=null)},{passive:!0})}},{key:"_addPrefetchLink",value:function(i){return this.prefetched.add(i.href),new Promise(function(e,t){var n=document.createElement("link");n.rel="prefetch",n.href=i.href,n.onload=e,n.onerror=t,document.head.appendChild(n)}).catch(function(){})}},{key:"_prepareUrl",value:function(e){if(null===e||"object"!==(void 0===e?"undefined":r(e))||!1 in e||-1===["http:","https:"].indexOf(e.protocol))return null;var t=e.href.substring(0,this.config.siteUrl.length),n=this._getPathname(e.href,t),i={original:e.href,protocol:e.protocol,origin:t,pathname:n,href:t+n};return this._isLinkOk(i)?i:null}},{key:"_getPathname",value:function(e,t){var n=t?e.substring(this.config.siteUrl.length):e;return n.startsWith("/")||(n="/"+n),this._shouldAddTrailingSlash(n)?n+"/":n}},{key:"_shouldAddTrailingSlash",value:function(e){return this.config.usesTrailingSlash&&!e.endsWith("/")&&!this.regex.fileExt.test(e)}},{key:"_isLinkOk",value:function(e){return null!==e&&"object"===(void 0===e?"undefined":r(e))&&(!this.prefetched.has(e.href)&&e.origin===this.config.siteUrl&&-1===e.href.indexOf("?")&&-1===e.href.indexOf("#")&&!this.regex.excludeUris.test(e.href)&&!this.regex.images.test(e.href))}}],[{key:"run",value:function(){"undefined"!=typeof RocketPreloadLinksConfig&&new n(new RocketBrowserCompatibilityChecker({capture:!0,passive:!0}),RocketPreloadLinksConfig).init()}}]),n}();t.run();
}());
//# sourceURL=rocket-preload-links-js-after
/* ]]> */
</script> <script>var rocket_beacon_data = {"ajax_url":"https:\/\/www.likacloud.com\/wp-admin\/admin-ajax.php","nonce":"32dd761fda","url":"https:\/\/www.likacloud.com\/id\/knowledge\/wordpress\/how-to-choose-best-wordpress-theme-%E7%9F%A5%E8%AF%86","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true,"preconnect_external_domain":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800,"preconnect_external_domain_elements":["link","script","iframe"],"preconnect_external_domain_exclusions":["static.cloudflareinsights.com","rel=\"profile\"","rel=\"preconnect\"","rel=\"dns-prefetch\"","rel=\"icon\""]}</script><script data-name="wpr-wpr-beacon" src='https://www.likacloud.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body></html>
<!--压缩前: 197669 bytes; 压缩后: 164431 bytes; 节约: 16.81% -->
<!-- This website is like a Rocket, isn't it? Performance optimized by WP Rocket. Learn more: https://wp-rocket.me - Debug: cached@1783824084 --> 
