{"id":103,"date":"2025-01-15T15:08:20","date_gmt":"2025-01-15T08:08:20","guid":{"rendered":"http:\/\/www.rumahweb.com\/journal\/menyembunyikan-url.htm"},"modified":"2025-01-15T16:21:06","modified_gmt":"2025-01-15T09:21:06","slug":"cara-membuat-iframe-html","status":"publish","type":"post","link":"https:\/\/www.rumahweb.com\/journal\/cara-membuat-iframe-html\/","title":{"rendered":"Cara Membuat iFrame HTML, Dilengkapi Contoh Skripnya"},"content":{"rendered":"\n<p>Tahukah Anda bila sebuah domain bisa disetting menyerupai tampilan website lain dengan mudah? Ya, Anda bisa membuat sebuah <em>iFrame <\/em>HTML, untuk menyerupai tampilan website yang Anda inginkan.<\/p>\n\n\n\n\n\n<p>Di Rumahweb, Anda bisa membuat file <em>iFrame <\/em>HTML melalui 2 cara yaitu dari halaman <em>clientzone <\/em>dan cPanel. Namun sebelum melanjutkan settingnya, kami akan menjelaskan kepada Anda terlebih dahulu apa itu <em>ifram<\/em>e, agar Anda lebih memahami panduan yang kami buat.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Apa itu iframe? <\/h2>\n\n\n\n<p>iFrame adalah teknik html yang memungkinkan Anda untuk melakukan embed data website seperti text, gambar hingga video dalam sebuah halaman website.<\/p>\n\n\n\n<p>Elemen iFrame berfungsi untuk mengambil konten dari sebuah sumber dan menampilkan datanya sesuai dengan url sumber yang digunakan. Meskipun demikian, fungsi iFrame tidak serta merta dapat Anda gunakan untuk menampilkan SSL\/HTTPS yang telah disetting, karena itu tergantung pada settingan ijin forwarding server tujuannya. iFrame tidak hanya digunakan untuk membuat satu halaman layout website, namun juga bisa digunakan untuk mengisi bagian tertentu pada website.<\/p>\n\n\n\n<p>Sebagai contoh, Anda ingin menampilkan lokasi usaha pada website. Solusinya, Anda bisa meng-copy lokasi usaha Anda di Google Maps melalui script iframe. Atau jika Anda ingin domain diakses menyerupai website lain, maka Anda bisa membuat script iframe <a href=\"https:\/\/www.rumahweb.com\/journal\/html-adalah\/\" target=\"_blank\" rel=\"noopener\" title=\"html adalah\">html<\/a> dengan memasukkan url website tujuan.<\/p>\n\n\n\n<p>Lalu, bagaimana cara membuat <em>script iframe <\/em>HTML tersebut? Berikut kami sampaikan langkah-langkahnya.<\/p>\n\n\n\n<p>Baca selengkapnya tentang iFrame pada artikel : <a href=\"https:\/\/blog.rumahweb.com\/iframe-adalah\/\" title=\"iframe adalah\">Mengenal Apa Itu iFrame Beserta Contoh Script iFrame HTML<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Membuat <em>script <\/em>iFrame HTML<\/h2>\n\n\n\n<p>Pada contoh berikut, kami ingin memberikan contoh <em>script <\/em>iFrame html untuk menyerupai sebuah tampilan website. Bagi Anda yang telah memiliki hosting, silahkan buat file dengan nama index.html pada <em>directory<\/em> domain anda.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>cPanel<\/strong><\/h3>\n\n\n\n<p>Jika Anda memesan layanan domain beserta shared hosting, cloud hosting atau WordPress hosting, pembuatan file iFrame bisa dilakukan melalui cPanel. Berikut panduannya: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Login ke cPanel.<\/li>\n\n\n\n<li>Klik menu File manager > public_html.<\/li>\n\n\n\n<li>Setelah itu, klik tombol <strong>+ File<\/strong>, lalu buatlah file dengan nama index.html.<\/li>\n<\/ul>\n\n\n\n<p>Jika Anda ingin membuat <em>iFrame <\/em>untuk subdomain atau addon domain, sesuaikanlah dengan <em>directory <\/em>root masing-masing. Setelah itu, edit file index.html dan masukkan <em>script iframe <\/em>dibawah ini.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Plesk Panel<\/strong><\/h3>\n\n\n\n<p>Jika Anda memesan layanan domain beserta WordPress hosting versi lama atau VPS dengan Plesk, pembuatan file iFrame bisa dilakukan melalui Plesk Panel. Berikut panduannya:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Login ke Plesk Panel.<\/li>\n\n\n\n<li>Klik menu Files > htdocs.<\/li>\n\n\n\n<li>Setelah itu, klik tombol <strong>+ File<\/strong>, lalu buatlah file dengan nama index.html.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Contoh Skrip iFrame HTML<\/h3>\n\n\n\n<p>Setelah itu, Anda bisa menggunakan contoh <em>script <\/em>berikut:<\/p>\n\n\n\n<pre class=\"wp-block-code lang:default decode:true\"><code>&lt;html&gt;\n&lt;head&gt;\n&lt;title&gt;Judul website&lt;\/title&gt;\n&lt;meta name=\"description\" content=\"Deskripsi website\" \/&gt;\n&lt;meta name=\"keywords\" content=\"keyword1, keyword2\" \/&gt;\n&lt;\/head&gt;\n&lt;frameset border=\"0\" rows=\"100%,*\" cols=\"100%\" frameborder=\"no\"&gt;\n&lt;frame name=\"TopFrame\" scrolling=\"yes\" noresize src=\"http:\/\/alamat_web_tujuan\"&gt;\n&lt;frame name=\"BottomFrame\" scrolling=\"no\" noresize&gt;\n&lt;noframes&gt;&lt;\/noframes&gt;\n&lt;\/frameset&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>Ubah beberapa keterangan dibagian berikut:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Judul website<\/strong>: Ubah sesuai judul website yang Anda inginkan<\/li>\n\n\n\n<li><strong>Deskripsi website<\/strong>: Tulis deskirpsi singkat website Anda. Maksimal 160 karakter.<\/li>\n\n\n\n<li><strong>keyword1, keyword2<\/strong> : Isi kata kunci website Anda, setiap kata kunci pisah dengan tanda koma (,)<\/li>\n\n\n\n<li><strong>alamat_web_tujuan<\/strong> : Ubah url ini dengan url tujuan redirect Anda<\/li>\n<\/ul>\n\n\n\n<p>Jika sudah di edit, maka tampilan scriptnya seperti ini :<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/01\/contoh-skrip-iframe.png\"><img loading=\"lazy\" decoding=\"async\" width=\"989\" height=\"425\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/01\/contoh-skrip-iframe.png\" alt=\"contoh skrip iframe html\" class=\"wp-image-52688\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/01\/contoh-skrip-iframe.png 989w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/01\/contoh-skrip-iframe-300x129.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/01\/contoh-skrip-iframe-768x330.png 768w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/01\/contoh-skrip-iframe-370x159.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/01\/contoh-skrip-iframe-270x116.png 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/01\/contoh-skrip-iframe-570x245.png 570w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/01\/contoh-skrip-iframe-740x318.png 740w\" sizes=\"auto, (max-width: 989px) 100vw, 989px\" \/><\/a><\/figure>\n\n\n\n<p>Setelah selesai, simpan kemudian akses website Anda. Berikut adalah contoh script yang kami gunakan untuk test:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/01\/contoh-iframe-html.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"446\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/01\/contoh-iframe-html-1024x446.webp\" alt=\"contoh hasil iframe html\" class=\"wp-image-52690\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/01\/contoh-iframe-html-1024x446.webp 1024w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/01\/contoh-iframe-html-300x131.webp 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/01\/contoh-iframe-html-768x334.webp 768w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/01\/contoh-iframe-html-1536x668.webp 1536w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/01\/contoh-iframe-html-370x161.webp 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/01\/contoh-iframe-html-270x117.webp 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/01\/contoh-iframe-html-570x248.webp 570w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/01\/contoh-iframe-html-740x322.webp 740w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/01\/contoh-iframe-html.webp 1843w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Catatan:<br \/>Beberapa situs website seperti Facebook.com, wordpress.com dan instagram.com, URL-nya tidak selalu dapat di <em>setting iframe<\/em>, terutama untuk HTTPS. Ketika Anda setting iframe ke url facebook\/instagram, hasilnya akan blank page seperti berikut:<br \/><br \/><strong>www.instagram.com<\/strong>\u00a0refused to connect.<\/p>\n<\/blockquote>\n\n\n\n<p>Bagi Anda yang hanya melakukan pemesanan domain saja, Anda bisa menggunakan fitur <em>masking <\/em>dari Clientzone untuk menyerupakan tampilan domainnya seperti website tujuan. Panduan terkait setting masking iframe dari Clientzone bisa Anda pelajari melalui link: <a href=\"https:\/\/www.rumahweb.com\/journal\/menggunakan-domain-forwarding-di-clientzone\/\" title=\"setting domain forwading\">Setting Domain Forwarding<\/a><\/p>\n\n\n\n<p>Demikian artikel kami tentang <span style=\"text-decoration: underline;\">iframe html<\/span> dan cara membuat skripnya. Apabila ada pertanyaan, silakan menghubungi support kami untuk dibantu pengecekannya.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Tahukah Anda bila sebuah domain bisa disetting menyerupai tampilan website lain dengan mudah? Ya, Anda bisa membuat sebuah iFrame HTML, untuk menyerupai tampilan website yang Anda inginkan. Di Rumahweb, Anda bisa membuat file iFrame HTML melalui 2 cara yaitu dari halaman clientzone dan cPanel. Namun sebelum melanjutkan settingnya, kami akan menjelaskan kepada Anda terlebih dahulu [&hellip;]<\/p>\n","protected":false},"author":321,"featured_media":52687,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_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,"font":"","enabled":false},"version":2}},"categories":[142],"tags":[56,1014],"class_list":{"0":"post-103","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-tips-dan-trik","8":"tag-html","9":"tag-iframe"},"aioseo_notices":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/01\/banner-cara-membuat-iframe-html.png","jetpack_shortlink":"https:\/\/wp.me\/p8n3G7-1F","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/103","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/users\/321"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/comments?post=103"}],"version-history":[{"count":0,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/103\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media\/52687"}],"wp:attachment":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media?parent=103"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/categories?post=103"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/tags?post=103"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}