{"id":30601,"date":"2026-04-06T03:44:28","date_gmt":"2026-04-06T03:44:28","guid":{"rendered":"https:\/\/hosteko.com\/blog\/?p=30601"},"modified":"2026-04-06T03:44:28","modified_gmt":"2026-04-06T03:44:28","slug":"panduan-lengkap-pop-up-pengertian-contoh-dan-cara-membuatnya","status":"publish","type":"post","link":"https:\/\/hosteko.com\/blog\/panduan-lengkap-pop-up-pengertian-contoh-dan-cara-membuatnya","title":{"rendered":"Panduan Lengkap Pop Up: Pengertian, Contoh, dan Cara Membuatnya"},"content":{"rendered":"<p data-start=\"158\" data-end=\"380\">Saat mengunjungi sebuah website, Anda mungkin pernah melihat jendela kecil yang tiba-tiba muncul di layar. Jendela ini biasanya berisi promo, form email, atau informasi tertentu. Elemen tersebut dikenal sebagai pop up.<\/p>\n<p data-start=\"382\" data-end=\"587\">Dalam dunia digital marketing, pop up menjadi salah satu strategi yang cukup efektif untuk menarik perhatian pengunjung. Namun, jika digunakan secara berlebihan, justru bisa mengganggu pengalaman pengguna.<\/p>\n<p data-start=\"589\" data-end=\"710\">Artikel ini akan membahas secara lengkap tentang apa itu pop up, jenis-jenisnya, manfaat, contoh, hingga cara membuatnya.<\/p>\n<h2 data-section-id=\"wfw90r\" data-start=\"717\" data-end=\"736\">Apa Itu Pop Up?<\/h2>\n<p>Pop up adalah elemen tampilan berupa jendela kecil yang muncul secara otomatis di atas halaman utama website. Elemen ini biasanya digunakan untuk menarik perhatian pengguna terhadap informasi tertentu, seperti promosi, pendaftaran, atau notifikasi penting.<\/p>\n<p>Dalam praktiknya, pop up dapat muncul dalam berbagai kondisi, misalnya saat website pertama kali dibuka, ketika pengguna melakukan scroll halaman, saat pengguna hendak keluar dari website (exit intent), atau setelah beberapa detik berada di halaman tersebut. Dengan penempatan dan timing yang tepat, pop up dapat menjadi alat yang efektif untuk meningkatkan interaksi dan konversi pengguna.<\/p>\n<h2 data-section-id=\"m87wnq\" data-start=\"1158\" data-end=\"1186\">Fungsi dan Tujuan Pop Up<\/h2>\n<p data-start=\"1188\" data-end=\"1255\">Pop up digunakan untuk berbagai tujuan dalam website, di antaranya:<\/p>\n<p data-section-id=\"19u5kcs\" data-start=\"1257\" data-end=\"1294\"><strong>1. Mengumpulkan Data Pengunjung<\/strong><\/p>\n<p data-start=\"1295\" data-end=\"1381\">Pop up sering digunakan untuk meminta email atau nomor telepon melalui form subscribe.<\/p>\n<p data-section-id=\"1qdvyg0\" data-start=\"1383\" data-end=\"1414\"><strong>2. Meningkatkan Penjualan<\/strong><\/p>\n<p data-start=\"1415\" data-end=\"1490\">Banyak bisnis menggunakan pop up untuk memberikan diskon atau promo khusus.<\/p>\n<p data-section-id=\"ejwkir\" data-start=\"1492\" data-end=\"1529\"><strong>3. Memberikan Informasi Penting<\/strong><\/p>\n<p data-start=\"1530\" data-end=\"1601\">Pop up juga digunakan untuk menampilkan pengumuman atau update penting.<\/p>\n<p data-section-id=\"d4wr25\" data-start=\"1603\" data-end=\"1635\"><strong>4. Meningkatkan Engagement<\/strong><\/p>\n<p data-start=\"1636\" data-end=\"1744\">Pop up dapat mengajak pengguna untuk berinteraksi, seperti mengikuti media sosial atau membaca artikel lain.<\/p>\n<h2 data-section-id=\"1bc1f41\" data-start=\"1751\" data-end=\"1773\">Jenis-Jenis Pop Up<\/h2>\n<p data-start=\"1775\" data-end=\"1825\">Berikut beberapa jenis pop up yang umum digunakan:<\/p>\n<ul>\n<li data-section-id=\"1031w9z\" data-start=\"1827\" data-end=\"1848\"><strong>Entry Pop Up<br \/>\n<\/strong>Muncul saat pertama kali pengunjung membuka website.<\/li>\n<\/ul>\n<ul>\n<li data-section-id=\"h92w3g\" data-start=\"1903\" data-end=\"1930\"><strong>Exit Intent Pop Up<br \/>\n<\/strong>Muncul saat pengguna hendak meninggalkan website.<\/li>\n<\/ul>\n<ul>\n<li data-section-id=\"fxjrss\" data-start=\"1982\" data-end=\"2004\"><strong>Scroll Pop Up<br \/>\n<\/strong>Muncul setelah pengguna menggulir halaman hingga persentase tertentu.<\/li>\n<\/ul>\n<ul>\n<li data-section-id=\"l3oxon\" data-start=\"2076\" data-end=\"2097\"><strong>Timed Pop Up<br \/>\n<\/strong>Muncul setelah beberapa detik pengguna berada di halaman.<\/li>\n<\/ul>\n<ul>\n<li data-section-id=\"1x423d\" data-start=\"2157\" data-end=\"2178\"><strong>Click Pop Up<br \/>\n<\/strong>Muncul ketika pengguna mengklik tombol atau link tertentu.<\/li>\n<\/ul>\n<h2 data-section-id=\"1oxncyb\" data-start=\"2244\" data-end=\"2272\">Contoh Penggunaan Pop Up<\/h2>\n<p data-start=\"2274\" data-end=\"2327\">Berikut beberapa contoh pop up yang sering digunakan:<\/p>\n<ul data-start=\"2329\" data-end=\"2562\">\n<li data-section-id=\"1c9nhk7\" data-start=\"2329\" data-end=\"2379\">Pop up diskon: \u201cDapatkan diskon 20% hari ini!\u201d<\/li>\n<li data-section-id=\"wa41to\" data-start=\"2380\" data-end=\"2449\">Pop up subscribe: \u201cDaftar email untuk mendapatkan update terbaru\u201d<\/li>\n<li data-section-id=\"oxrau8\" data-start=\"2450\" data-end=\"2506\">Pop up notifikasi: \u201cWebsite ini menggunakan cookies\u201d<\/li>\n<li data-section-id=\"1gesfkp\" data-start=\"2507\" data-end=\"2562\">Pop up promo terbatas: \u201cFlash sale hanya hari ini!\u201d<\/li>\n<\/ul>\n<h2 data-section-id=\"boyo3t\" data-start=\"2569\" data-end=\"2604\">Kelebihan dan Kekurangan Pop Up<\/h2>\n<p data-section-id=\"11y0mes\" data-start=\"2606\" data-end=\"2619\"><strong>1. Kelebihan:<\/strong><\/p>\n<ul data-start=\"2620\" data-end=\"2733\">\n<li data-section-id=\"eyivoi\" data-start=\"2620\" data-end=\"2650\">Menarik perhatian pengguna<\/li>\n<li data-section-id=\"9ldxk5\" data-start=\"2651\" data-end=\"2676\">Meningkatkan konversi<\/li>\n<li data-section-id=\"engp7e\" data-start=\"2677\" data-end=\"2702\">Efektif untuk promosi<\/li>\n<li data-section-id=\"aggtks\" data-start=\"2703\" data-end=\"2733\">Membantu pengumpulan leads<\/li>\n<\/ul>\n<p data-section-id=\"15avzfe\" data-start=\"2735\" data-end=\"2749\"><strong>2. Kekurangan:<\/strong><\/p>\n<ul data-start=\"2750\" data-end=\"2846\">\n<li data-section-id=\"1lp908c\" data-start=\"2750\" data-end=\"2778\">Bisa mengganggu pengguna<\/li>\n<li data-section-id=\"1ntjy1r\" data-start=\"2779\" data-end=\"2823\">Meningkatkan bounce rate jika berlebihan<\/li>\n<li data-section-id=\"1pye1rh\" data-start=\"2824\" data-end=\"2846\">Bisa dianggap spam<\/li>\n<\/ul>\n<h2 data-section-id=\"18g8fa2\" data-start=\"2853\" data-end=\"2876\">Cara Membuat Pop Up<\/h2>\n<p data-start=\"2878\" data-end=\"2926\">Berikut beberapa cara membuat pop up di website:<\/p>\n<p data-section-id=\"b7zmsj\" data-start=\"2933\" data-end=\"2971\"><strong>1. Menggunakan Plugin (WordPress)<\/strong><\/p>\n<p data-start=\"2972\" data-end=\"3044\">Jika Anda menggunakan WordPress, cara paling mudah adalah dengan plugin.<\/p>\n<p data-start=\"3046\" data-end=\"3060\">Contoh plugin:<\/p>\n<ul data-start=\"3061\" data-end=\"3186\">\n<li data-section-id=\"15bg0k5\" data-start=\"3061\" data-end=\"3102\"><span class=\"hover:entity-accent entity-underline inline cursor-pointer align-baseline\"><span class=\"whitespace-normal\">Elementor<\/span><\/span><\/li>\n<li data-section-id=\"17wgcs5\" data-start=\"3103\" data-end=\"3144\"><span class=\"hover:entity-accent entity-underline inline cursor-pointer align-baseline\"><span class=\"whitespace-normal\">Popup Maker<\/span><\/span><\/li>\n<li data-section-id=\"1gcjogl\" data-start=\"3145\" data-end=\"3186\"><span class=\"hover:entity-accent entity-underline inline cursor-pointer align-baseline\"><span class=\"whitespace-normal\">OptinMonster<\/span><\/span><\/li>\n<\/ul>\n<p data-start=\"3188\" data-end=\"3196\">Langkah-langkahnya:<\/p>\n<ul data-start=\"3197\" data-end=\"3311\">\n<li data-section-id=\"rm2eqa\" data-start=\"3197\" data-end=\"3216\">Install plugin<\/li>\n<li data-section-id=\"q17zhz\" data-start=\"3217\" data-end=\"3243\">Pilih template pop up<\/li>\n<li data-section-id=\"1t5lh2o\" data-start=\"3244\" data-end=\"3265\">Sesuaikan desain<\/li>\n<li data-section-id=\"agi81w\" data-start=\"3266\" data-end=\"3298\">Atur trigger (waktu muncul)<\/li>\n<li data-section-id=\"1baga4n\" data-start=\"3299\" data-end=\"3311\">Publish<\/li>\n<\/ul>\n<p data-section-id=\"4spkg7\" data-start=\"3318\" data-end=\"3363\"><strong>2. Menggunakan HTML, CSS, dan JavaScript<\/strong><\/p>\n<p data-start=\"3364\" data-end=\"3408\">Anda juga bisa membuat pop up secara manual.<\/p>\n<p data-start=\"3410\" data-end=\"3427\">Contoh sederhana:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"w-full overflow-x-hidden overflow-y-auto\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037ck \u037cy\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<div class=\"cm-content q9tKkq_readonly\"><span class=\"\u037cv\">&lt;button<\/span> <span class=\"\u037cu\">onclick<\/span><span class=\"\u037cn\">=<\/span><span class=\"\u037cr\">&#8220;<\/span><span class=\"\u037ct\">showPopup<\/span>()<span class=\"\u037cr\">&#8220;<\/span><span class=\"\u037cv\">&gt;<\/span>Klik Saya<span class=\"\u037cv\">&lt;\/button&gt;<\/span><\/p>\n<p><span class=\"\u037cv\">&lt;div<\/span> <span class=\"\u037cu\">id<\/span><span class=\"\u037cn\">=<\/span><span class=\"\u037cr\">&#8220;popup&#8221;<\/span> <span class=\"\u037cu\">style<\/span><span class=\"\u037cn\">=<\/span><span class=\"\u037cr\">&#8220;<\/span>display:<span class=\"\u037cq\">none<\/span>; position:<span class=\"\u037cq\">fixed<\/span>; top:<span class=\"\u037cq\">30<\/span><span class=\"\u037cn\">%<\/span>; left:<span class=\"\u037cq\">30<\/span><span class=\"\u037cn\">%<\/span>; background:#fff; padding:<span class=\"\u037cq\">20<\/span><span class=\"\u037cn\">px<\/span>; border:<span class=\"\u037cq\">1<\/span><span class=\"\u037cn\">px<\/span> <span class=\"\u037cq\">solid<\/span> #ccc;<span class=\"\u037cr\">&#8220;<\/span><span class=\"\u037cv\">&gt;<\/span><br \/>\n<span class=\"\u037cv\">&lt;p&gt;<\/span>Ini adalah Pop Up!<span class=\"\u037cv\">&lt;\/p&gt;<\/span><br \/>\n<span class=\"\u037cv\">&lt;button<\/span> <span class=\"\u037cu\">onclick<\/span><span class=\"\u037cn\">=<\/span><span class=\"\u037cr\">&#8220;<\/span><span class=\"\u037ct\">closePopup<\/span>()<span class=\"\u037cr\">&#8220;<\/span><span class=\"\u037cv\">&gt;<\/span>Tutup<span class=\"\u037cv\">&lt;\/button&gt;<\/span><br \/>\n<span class=\"\u037cv\">&lt;\/div&gt;<\/span><\/p>\n<p><span class=\"\u037cv\">&lt;script&gt;<\/span><br \/>\n<span class=\"\u037cn\">function<\/span> <span class=\"\u037ct\">showPopup<\/span>() {<br \/>\n<span class=\"\u037ct\">document<\/span><span class=\"\u037cn\">.<\/span>getElementById(<span class=\"\u037cr\">&#8220;popup&#8221;<\/span>)<span class=\"\u037cn\">.<\/span>style<span class=\"\u037cn\">.<\/span>display <span class=\"\u037cn\">=<\/span> <span class=\"\u037cr\">&#8220;block&#8221;<\/span>;<br \/>\n}<br \/>\n<span class=\"\u037cn\">function<\/span> <span class=\"\u037ct\">closePopup<\/span>() {<br \/>\n<span class=\"\u037ct\">document<\/span><span class=\"\u037cn\">.<\/span>getElementById(<span class=\"\u037cr\">&#8220;popup&#8221;<\/span>)<span class=\"\u037cn\">.<\/span>style<span class=\"\u037cn\">.<\/span>display <span class=\"\u037cn\">=<\/span> <span class=\"\u037cr\">&#8220;none&#8221;<\/span>;<br \/>\n}<br \/>\n<span class=\"\u037cv\">&lt;\/script&gt;<\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-section-id=\"6731rj\" data-start=\"3898\" data-end=\"3933\"><strong>3. Menggunakan Tools Marketing<\/strong><\/p>\n<p data-start=\"3934\" data-end=\"4003\">Selain plugin, Anda juga bisa menggunakan tools pihak ketiga seperti:<\/p>\n<ul data-start=\"4005\" data-end=\"4088\">\n<li data-section-id=\"cgv1px\" data-start=\"4005\" data-end=\"4046\"><span class=\"hover:entity-accent entity-underline inline cursor-pointer align-baseline\"><span class=\"whitespace-normal\">Mailchimp<\/span><\/span><\/li>\n<li data-section-id=\"eyrt5h\" data-start=\"4047\" data-end=\"4088\"><span class=\"hover:entity-accent entity-underline inline cursor-pointer align-baseline\"><span class=\"whitespace-normal\">ConvertKit<\/span><\/span><\/li>\n<\/ul>\n<p data-start=\"4090\" data-end=\"4156\">Tools ini biasanya menyediakan fitur pop up untuk email marketing.<\/p>\n<h2 data-section-id=\"1esu8j1\" data-start=\"4163\" data-end=\"4203\">Tips Menggunakan Pop Up yang Efektif<\/h2>\n<p data-start=\"4205\" data-end=\"4259\">Agar pop up tidak mengganggu, perhatikan tips berikut:<\/p>\n<ul>\n<li data-section-id=\"8l4l\" data-start=\"4261\" data-end=\"4295\"><strong>Gunakan Timing yang Tepat<br \/>\n<\/strong>Jangan langsung muncul saat halaman dibuka.<\/li>\n<\/ul>\n<ul>\n<li data-section-id=\"i4zmir\" data-start=\"4341\" data-end=\"4374\"><strong>Desain Menarik dan Jelas<br \/>\n<\/strong>Gunakan warna, teks, dan tombol CTA yang menarik.<\/li>\n<\/ul>\n<ul>\n<li data-section-id=\"1fo9mn\" data-start=\"4426\" data-end=\"4456\"><strong>Jangan Terlalu Banyak<br \/>\n<\/strong>Gunakan secukupnya agar tidak mengganggu pengguna.<\/li>\n<\/ul>\n<ul>\n<li data-section-id=\"eos5cw\" data-start=\"4509\" data-end=\"4542\"><strong>Pastikan Mobile Friendly<br \/>\n<\/strong>Pop up harus tetap nyaman di perangkat mobile.<\/li>\n<\/ul>\n<ul>\n<li data-section-id=\"1hm2che\" data-start=\"4591\" data-end=\"4622\"><strong>Gunakan CTA yang Jelas<br \/>\n<\/strong>Contoh:<\/li>\n<\/ul>\n<ol>\n<li style=\"list-style-type: none\">\n<ol data-start=\"4633\" data-end=\"4683\">\n<li data-section-id=\"lkwvpb\" data-start=\"4633\" data-end=\"4663\"><em>\u201cDapatkan Diskon Sekarang\u201d<\/em><\/li>\n<li data-section-id=\"6g3ql3\" data-start=\"4664\" data-end=\"4683\"><em>\u201cDaftar Gratis\u201d<\/em><\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<h2 data-section-id=\"10bq1kh\" data-start=\"4690\" data-end=\"4732\">Kesalahan Umum dalam Penggunaan Pop Up<\/h2>\n<p data-start=\"4734\" data-end=\"4760\">Hindari kesalahan berikut:<\/p>\n<ol data-start=\"4762\" data-end=\"4888\">\n<li data-section-id=\"frqd4t\" data-start=\"4762\" data-end=\"4794\">Pop up terlalu sering muncul<\/li>\n<li data-section-id=\"17y1hem\" data-start=\"4795\" data-end=\"4821\">Tidak ada tombol close<\/li>\n<li data-section-id=\"1u9p7l5\" data-start=\"4822\" data-end=\"4846\">Konten tidak relevan<\/li>\n<li data-section-id=\"xymtc0\" data-start=\"4847\" data-end=\"4868\">Desain mengganggu<\/li>\n<li data-section-id=\"l1x6pe\" data-start=\"4869\" data-end=\"4888\">Tidak responsif<\/li>\n<\/ol>\n<h2 data-section-id=\"632eex\" data-start=\"4895\" data-end=\"4909\">Kesimpulan<\/h2>\n<p data-start=\"17\" data-end=\"284\">Pop up adalah elemen penting dalam website yang dapat membantu meningkatkan konversi, mengumpulkan data, dan menarik perhatian pengguna. Namun, penggunaannya harus dilakukan secara bijak agar tidak mengganggu pengalaman pengunjung dan tetap memberikan nilai tambah.<\/p>\n<p data-start=\"286\" data-end=\"685\" data-is-last-node=\"\" data-is-only-node=\"\">Dengan strategi yang tepat, pop up bisa menjadi alat yang sangat efektif dalam digital marketing dan pengembangan website. Jika Anda sedang mencari layanan domain dan hosting yang andal, langsung saja kunjungi <a href=\"https:\/\/hosteko.com\/\"><strong data-start=\"496\" data-end=\"511\">Hosteko.com<\/strong><\/a> untuk solusi terbaik. Dan jangan lewatkan juga berbagai artikel menarik serta tips seputar website di <a href=\"https:\/\/hosteko.com\/blog\/\"><strong data-start=\"614\" data-end=\"630\">blog Hosteko<\/strong><\/a> yang siap membantu Anda mengembangkan bisnis online.<\/p>\n\n\n<div class=\"kk-star-ratings kksr-auto kksr-align-right kksr-valign-bottom\"\n    data-payload='{&quot;align&quot;:&quot;right&quot;,&quot;id&quot;:&quot;30601&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;valign&quot;:&quot;bottom&quot;,&quot;ignore&quot;:&quot;&quot;,&quot;reference&quot;:&quot;auto&quot;,&quot;class&quot;:&quot;&quot;,&quot;count&quot;:&quot;1&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;readonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;5&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;0&quot;,&quot;greet&quot;:&quot;Jadilah yang pertama untuk memberi nilai&quot;,&quot;legend&quot;:&quot;5\\\/5 - (1 vote)&quot;,&quot;size&quot;:&quot;22&quot;,&quot;title&quot;:&quot;Panduan Lengkap Pop Up: Pengertian, Contoh, dan Cara Membuatnya&quot;,&quot;width&quot;:&quot;110&quot;,&quot;_legend&quot;:&quot;{score}\\\/{best} - ({count} {votes})&quot;,&quot;font_factor&quot;:&quot;1.25&quot;}'>\n            \n<div class=\"kksr-stars\">\n    \n<div class=\"kksr-stars-inactive\">\n            <div class=\"kksr-star\" data-star=\"1\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"2\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"3\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"4\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"5\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n    <\/div>\n    \n<div class=\"kksr-stars-active\" style=\"width: 110px;\">\n            <div class=\"kksr-star\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n<div class=\"kksr-legend\" style=\"font-size: 17.6px;\">\n            5\/5 - (1 vote)    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Saat mengunjungi sebuah website, Anda mungkin pernah melihat jendela kecil yang tiba-tiba muncul di layar. Jendela ini biasanya berisi promo, form email, atau informasi tertentu. Elemen tersebut dikenal sebagai pop up. Dalam dunia digital marketing, pop up menjadi salah satu strategi yang cukup efektif untuk menarik perhatian pengunjung. Namun, jika digunakan secara berlebihan, justru bisa [&hellip;]<\/p>\n","protected":false},"author":13,"featured_media":30603,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rop_custom_images_group":[],"rop_custom_messages_group":[],"rop_publish_now":"no","rop_publish_now_accounts":{"twitter_2392824914_2392824914":""},"rop_publish_now_history":[{"account":"twitter_2392824914_2392824914","service":"twitter","timestamp":1775447087,"status":"error"}],"rop_publish_now_status":"done","_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"enabled":false},"version":2}},"categories":[3],"tags":[17028,8595,17034,17041,17029,17047,17039,8593,17036,17043,17033,17037,17031,17035,17038,17044,17045,17030,17032,17046,17040,17042],"class_list":["post-30601","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-apa-itu-pop-up","tag-cara-membuat-pop-up","tag-cara-membuat-pop-up-di-website","tag-cara-menggunakan-pop-up","tag-contoh-pop-up","tag-elementor-popup","tag-exit-intent-pop-up","tag-fungsi-pop-up","tag-jenis-pop-up","tag-kelebihan-dan-kekurangan-pop-up","tag-plugin-pop-up-wordpress","tag-pop-up-email","tag-pop-up-html-css-javascript","tag-pop-up-marketing","tag-pop-up-subscribe","tag-pop-up-untuk-bisnis","tag-pop-up-untuk-digital-marketing","tag-pop-up-website","tag-pop-up-wordpress","tag-popup-maker","tag-scroll-pop-up","tag-tips-pop-up-efektif"],"featured_image_src":{"landsacpe":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2026\/04\/Desain-tanpa-judul309-1140x445.png",1140,445,true],"list":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2026\/04\/Desain-tanpa-judul309-463x348.png",463,348,true],"medium":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2026\/04\/Desain-tanpa-judul309-300x169.png",300,169,true],"full":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2026\/04\/Desain-tanpa-judul309.png",1366,768,false]},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Panduan Lengkap Pop Up: Pengertian, Contoh, dan Cara Membuatnya - Hosteko Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/hosteko.com\/blog\/panduan-lengkap-pop-up-pengertian-contoh-dan-cara-membuatnya\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Panduan Lengkap Pop Up: Pengertian, Contoh, dan Cara Membuatnya - Hosteko Blog\" \/>\n<meta property=\"og:description\" content=\"Saat mengunjungi sebuah website, Anda mungkin pernah melihat jendela kecil yang tiba-tiba muncul di layar. Jendela ini biasanya berisi promo, form email, atau informasi tertentu. Elemen tersebut dikenal sebagai pop up. Dalam dunia digital marketing, pop up menjadi salah satu strategi yang cukup efektif untuk menarik perhatian pengunjung. Namun, jika digunakan secara berlebihan, justru bisa [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/hosteko.com\/blog\/panduan-lengkap-pop-up-pengertian-contoh-dan-cara-membuatnya\" \/>\n<meta property=\"og:site_name\" content=\"Hosteko Blog\" \/>\n<meta property=\"article:published_time\" content=\"2026-04-06T03:44:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2026\/04\/Desain-tanpa-judul309.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1366\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Fitri Ana\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fitri Ana\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/hosteko.com\/blog\/panduan-lengkap-pop-up-pengertian-contoh-dan-cara-membuatnya#article\",\"isPartOf\":{\"@id\":\"https:\/\/hosteko.com\/blog\/panduan-lengkap-pop-up-pengertian-contoh-dan-cara-membuatnya\"},\"author\":{\"name\":\"Fitri Ana\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/person\/ffcd8071a8a3d6a862a4e1381d1c4ea0\"},\"headline\":\"Panduan Lengkap Pop Up: Pengertian, Contoh, dan Cara Membuatnya\",\"datePublished\":\"2026-04-06T03:44:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/hosteko.com\/blog\/panduan-lengkap-pop-up-pengertian-contoh-dan-cara-membuatnya\"},\"wordCount\":730,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/hosteko.com\/blog\/panduan-lengkap-pop-up-pengertian-contoh-dan-cara-membuatnya#primaryimage\"},\"thumbnailUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2026\/04\/Desain-tanpa-judul309.png\",\"keywords\":[\"apa itu pop up\",\"Cara Membuat Pop Up\",\"cara membuat pop up di website\",\"cara menggunakan pop up\",\"contoh pop up\",\"elementor popup\",\"exit intent pop up\",\"Fungsi Pop Up\",\"jenis pop up\",\"kelebihan dan kekurangan pop up\",\"plugin pop up wordpress\",\"pop up email\",\"pop up html css javascript\",\"pop up marketing\",\"pop up subscribe\",\"pop up untuk bisnis\",\"pop up untuk digital marketing\",\"pop up website\",\"pop up wordpress\",\"popup maker\",\"scroll pop up\",\"tips pop up efektif\"],\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/hosteko.com\/blog\/panduan-lengkap-pop-up-pengertian-contoh-dan-cara-membuatnya#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/hosteko.com\/blog\/panduan-lengkap-pop-up-pengertian-contoh-dan-cara-membuatnya\",\"url\":\"https:\/\/hosteko.com\/blog\/panduan-lengkap-pop-up-pengertian-contoh-dan-cara-membuatnya\",\"name\":\"Panduan Lengkap Pop Up: Pengertian, Contoh, dan Cara Membuatnya - Hosteko Blog\",\"isPartOf\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/hosteko.com\/blog\/panduan-lengkap-pop-up-pengertian-contoh-dan-cara-membuatnya#primaryimage\"},\"image\":{\"@id\":\"https:\/\/hosteko.com\/blog\/panduan-lengkap-pop-up-pengertian-contoh-dan-cara-membuatnya#primaryimage\"},\"thumbnailUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2026\/04\/Desain-tanpa-judul309.png\",\"datePublished\":\"2026-04-06T03:44:28+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/hosteko.com\/blog\/panduan-lengkap-pop-up-pengertian-contoh-dan-cara-membuatnya#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/hosteko.com\/blog\/panduan-lengkap-pop-up-pengertian-contoh-dan-cara-membuatnya\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hosteko.com\/blog\/panduan-lengkap-pop-up-pengertian-contoh-dan-cara-membuatnya#primaryimage\",\"url\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2026\/04\/Desain-tanpa-judul309.png\",\"contentUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2026\/04\/Desain-tanpa-judul309.png\",\"width\":1366,\"height\":768},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/hosteko.com\/blog\/panduan-lengkap-pop-up-pengertian-contoh-dan-cara-membuatnya#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/hosteko.com\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Panduan Lengkap Pop Up: Pengertian, Contoh, dan Cara Membuatnya\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/hosteko.com\/blog\/#website\",\"url\":\"https:\/\/hosteko.com\/blog\/\",\"name\":\"Hosteko Blog\",\"description\":\"Berita &amp; Informasi Dunia IT\",\"publisher\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/hosteko.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/hosteko.com\/blog\/#organization\",\"name\":\"HOSTEKO\",\"url\":\"https:\/\/hosteko.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png\",\"contentUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png\",\"width\":195,\"height\":57,\"caption\":\"HOSTEKO\"},\"image\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/person\/ffcd8071a8a3d6a862a4e1381d1c4ea0\",\"name\":\"Fitri Ana\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a099f723518ab9b89aa80b7ed8cadd2d3fae127c5bd735733cf24a661e75a882?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a099f723518ab9b89aa80b7ed8cadd2d3fae127c5bd735733cf24a661e75a882?s=96&d=mm&r=g\",\"caption\":\"Fitri Ana\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Panduan Lengkap Pop Up: Pengertian, Contoh, dan Cara Membuatnya - Hosteko Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/hosteko.com\/blog\/panduan-lengkap-pop-up-pengertian-contoh-dan-cara-membuatnya","og_locale":"en_US","og_type":"article","og_title":"Panduan Lengkap Pop Up: Pengertian, Contoh, dan Cara Membuatnya - Hosteko Blog","og_description":"Saat mengunjungi sebuah website, Anda mungkin pernah melihat jendela kecil yang tiba-tiba muncul di layar. Jendela ini biasanya berisi promo, form email, atau informasi tertentu. Elemen tersebut dikenal sebagai pop up. Dalam dunia digital marketing, pop up menjadi salah satu strategi yang cukup efektif untuk menarik perhatian pengunjung. Namun, jika digunakan secara berlebihan, justru bisa [&hellip;]","og_url":"https:\/\/hosteko.com\/blog\/panduan-lengkap-pop-up-pengertian-contoh-dan-cara-membuatnya","og_site_name":"Hosteko Blog","article_published_time":"2026-04-06T03:44:28+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2026\/04\/Desain-tanpa-judul309.png","type":"image\/png"}],"author":"Fitri Ana","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Fitri Ana","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/hosteko.com\/blog\/panduan-lengkap-pop-up-pengertian-contoh-dan-cara-membuatnya#article","isPartOf":{"@id":"https:\/\/hosteko.com\/blog\/panduan-lengkap-pop-up-pengertian-contoh-dan-cara-membuatnya"},"author":{"name":"Fitri Ana","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/person\/ffcd8071a8a3d6a862a4e1381d1c4ea0"},"headline":"Panduan Lengkap Pop Up: Pengertian, Contoh, dan Cara Membuatnya","datePublished":"2026-04-06T03:44:28+00:00","mainEntityOfPage":{"@id":"https:\/\/hosteko.com\/blog\/panduan-lengkap-pop-up-pengertian-contoh-dan-cara-membuatnya"},"wordCount":730,"commentCount":0,"publisher":{"@id":"https:\/\/hosteko.com\/blog\/#organization"},"image":{"@id":"https:\/\/hosteko.com\/blog\/panduan-lengkap-pop-up-pengertian-contoh-dan-cara-membuatnya#primaryimage"},"thumbnailUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2026\/04\/Desain-tanpa-judul309.png","keywords":["apa itu pop up","Cara Membuat Pop Up","cara membuat pop up di website","cara menggunakan pop up","contoh pop up","elementor popup","exit intent pop up","Fungsi Pop Up","jenis pop up","kelebihan dan kekurangan pop up","plugin pop up wordpress","pop up email","pop up html css javascript","pop up marketing","pop up subscribe","pop up untuk bisnis","pop up untuk digital marketing","pop up website","pop up wordpress","popup maker","scroll pop up","tips pop up efektif"],"articleSection":["Blog"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/hosteko.com\/blog\/panduan-lengkap-pop-up-pengertian-contoh-dan-cara-membuatnya#respond"]}]},{"@type":"WebPage","@id":"https:\/\/hosteko.com\/blog\/panduan-lengkap-pop-up-pengertian-contoh-dan-cara-membuatnya","url":"https:\/\/hosteko.com\/blog\/panduan-lengkap-pop-up-pengertian-contoh-dan-cara-membuatnya","name":"Panduan Lengkap Pop Up: Pengertian, Contoh, dan Cara Membuatnya - Hosteko Blog","isPartOf":{"@id":"https:\/\/hosteko.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/hosteko.com\/blog\/panduan-lengkap-pop-up-pengertian-contoh-dan-cara-membuatnya#primaryimage"},"image":{"@id":"https:\/\/hosteko.com\/blog\/panduan-lengkap-pop-up-pengertian-contoh-dan-cara-membuatnya#primaryimage"},"thumbnailUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2026\/04\/Desain-tanpa-judul309.png","datePublished":"2026-04-06T03:44:28+00:00","breadcrumb":{"@id":"https:\/\/hosteko.com\/blog\/panduan-lengkap-pop-up-pengertian-contoh-dan-cara-membuatnya#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hosteko.com\/blog\/panduan-lengkap-pop-up-pengertian-contoh-dan-cara-membuatnya"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hosteko.com\/blog\/panduan-lengkap-pop-up-pengertian-contoh-dan-cara-membuatnya#primaryimage","url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2026\/04\/Desain-tanpa-judul309.png","contentUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2026\/04\/Desain-tanpa-judul309.png","width":1366,"height":768},{"@type":"BreadcrumbList","@id":"https:\/\/hosteko.com\/blog\/panduan-lengkap-pop-up-pengertian-contoh-dan-cara-membuatnya#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/hosteko.com\/blog"},{"@type":"ListItem","position":2,"name":"Panduan Lengkap Pop Up: Pengertian, Contoh, dan Cara Membuatnya"}]},{"@type":"WebSite","@id":"https:\/\/hosteko.com\/blog\/#website","url":"https:\/\/hosteko.com\/blog\/","name":"Hosteko Blog","description":"Berita &amp; Informasi Dunia IT","publisher":{"@id":"https:\/\/hosteko.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/hosteko.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/hosteko.com\/blog\/#organization","name":"HOSTEKO","url":"https:\/\/hosteko.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png","contentUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png","width":195,"height":57,"caption":"HOSTEKO"},"image":{"@id":"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/person\/ffcd8071a8a3d6a862a4e1381d1c4ea0","name":"Fitri Ana","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/a099f723518ab9b89aa80b7ed8cadd2d3fae127c5bd735733cf24a661e75a882?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a099f723518ab9b89aa80b7ed8cadd2d3fae127c5bd735733cf24a661e75a882?s=96&d=mm&r=g","caption":"Fitri Ana"}}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2026\/04\/Desain-tanpa-judul309.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts\/30601","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/comments?post=30601"}],"version-history":[{"count":3,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts\/30601\/revisions"}],"predecessor-version":[{"id":30607,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts\/30601\/revisions\/30607"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/media\/30603"}],"wp:attachment":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/media?parent=30601"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/categories?post=30601"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/tags?post=30601"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}