{"id":15039,"date":"2018-03-25T10:36:42","date_gmt":"2018-03-25T03:36:42","guid":{"rendered":"https:\/\/www.pugam.com\/?p=15039"},"modified":"2018-03-30T22:46:52","modified_gmt":"2018-03-30T15:46:52","slug":"cara-embed-jsfiddle-di-wordpress-panduan-lengkap","status":"publish","type":"post","link":"https:\/\/www.pugam.com\/15039\/cara-embed-jsfiddle-di-wordpress-panduan-lengkap\/","title":{"rendered":"Cara Embed JSFiddle di WordPress (Panduan Lengkap)"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-15045\" src=\"https:\/\/img.pugam.com\/2018\/03\/Cara-Embed-JSFiddle-di-WordPress.jpg\" alt=\"Cara Embed Jsfiddle Di WordPress\" width=\"750\" height=\"422\" srcset=\"https:\/\/img.pugam.com\/2018\/03\/Cara-Embed-JSFiddle-di-WordPress.jpg 750w, https:\/\/img.pugam.com\/2018\/03\/Cara-Embed-JSFiddle-di-WordPress-388x218.jpg 388w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/p>\n<p>Sama seperti CodePen, JSFiddle adalah sebuah &#8220;playground&#8221; bagi para front end developer. Di <a href=\"https:\/\/jsfiddle.net\/\" class=\"external\" rel=\"nofollow\" target=\"_blank\">JSFiddle<\/a>, Anda dapat bermain-main dengan HTML, CSS dan JavaScript lalu menyimpannya agar dapat dilihat oleh plublik.<\/p>\n<p>Pada postingan sebelumnya, saya telah menjelaskan bagaimana cara embed Pen dari CodePen di WordPress. Caranya sangat mudah, di artikel tersebut saya menjelaskan berbagai cara mulai dari menggunakan plugin sampai membuat shortcode sendiri.<\/p>\n<p>[pg_posts id=&#8221;15038&#8243; posts_per_page=&#8221;1&#8243;]<\/p>\n<p>Untuk JSFiddle cara yang digunakan tidak jauh berbeda, Anda dapat menggunakan plugin, embed manual dengan kode iframe atau membuat custom shortcode sendiri.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_45_2 counter-hierarchy ez-toc-counter ez-toc-white ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\">Daftar Isi<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.pugam.com\/15039\/cara-embed-jsfiddle-di-wordpress-panduan-lengkap\/#Cara_Manual_Embed_JSFiddle_di_WordPress\" title=\"Cara Manual Embed JSFiddle di WordPress\">Cara Manual Embed JSFiddle di WordPress<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.pugam.com\/15039\/cara-embed-jsfiddle-di-wordpress-panduan-lengkap\/#Embed_JSFiddle_di_WordPress_Menggunakan_Plugin\" title=\"Embed JSFiddle di WordPress Menggunakan Plugin\">Embed JSFiddle di WordPress Menggunakan Plugin<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.pugam.com\/15039\/cara-embed-jsfiddle-di-wordpress-panduan-lengkap\/#Embed_JSFiddle_di_WordPress_dengan_Custom_Shortcode\" title=\"Embed JSFiddle di WordPress dengan Custom Shortcode\">Embed JSFiddle di WordPress dengan Custom Shortcode<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.pugam.com\/15039\/cara-embed-jsfiddle-di-wordpress-panduan-lengkap\/#Kekurangan_Embed_JSFiddle\" title=\"Kekurangan Embed JSFiddle\">Kekurangan Embed JSFiddle<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Cara_Manual_Embed_JSFiddle_di_WordPress\"><\/span>Cara Manual Embed JSFiddle di WordPress<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Cara manual yang saya maksud adalah dengan menggunakan kode iframe yang disediakan langsung oleh JSFiddle. Berikut langkah-langkahnya:<\/p>\n<ol>\n<li>Buka <strong>pen<\/strong> yang ingin anda embed (atau <a href=\"https:\/\/jsfiddle.net\/B1KMusic\/Lktoefkz\/\" class=\"external\" rel=\"nofollow\" target=\"_blank\">klik ini<\/a> sebagai contoh).<\/li>\n<li>Klik menu <strong>Embed<\/strong> di bagian atas. Akan muncul jendela pop-up.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-15104\" src=\"https:\/\/img.pugam.com\/2018\/03\/Cara-Embed-JSFiddle-di-WordPress-14236362.jpg\" alt=\"Cara Embed Jsfiddle Di WordPress 14236362\" width=\"524\" height=\"81\" \/><\/li>\n<li>Atur konfigurasi sesuai keperluan, seperti tab apa saja yang akan disertakan lalu tema apa yang ingin digunakan (light atau dark). Jika sudah, klik tulisan <strong>Prefer iframe? <\/strong>lalu salin kode iframe yang ada di dalam kotak <strong>Embed code<\/strong> dan tempelkan di editor WordPress Anda.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-15102\" src=\"https:\/\/img.pugam.com\/2018\/03\/Cara-Embed-JSFiddle-di-WordPress-2.jpg\" alt=\"Cara Embed Jsfiddle Di WordPress 2\" width=\"750\" height=\"310\" \/><\/li>\n<li>Agar kode dapat bekerja, Anda harus menempelkannya\u00a0di editor dalam mode <strong>Text<\/strong> , bukan <strong>Visual<\/strong>.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-15043\" src=\"https:\/\/img.pugam.com\/2018\/03\/Cara-Embed-CodePen-di-WordPress-3.jpg\" alt=\"Cara Embed Codepen Di WordPress 3\" width=\"259\" height=\"123\" \/><\/li>\n<\/ol>\n<p>Anda dapat langsung melihat hasilnya ketika beralih dari mode <strong>Text<\/strong> ke mode <strong>Visual<\/strong>.<\/p>\n<p>Di bawah ini adalah contoh ketika saya menggunakan kode iframe:<\/p>\n<pre>&lt;iframe width=\"100%\" height=\"300\" src=\"\/\/jsfiddle.net\/B1KMusic\/Lktoefkz\/embedded\/js,html,css,result\/dark\/\" allowpaymentrequest allowfullscreen=\"allowfullscreen\" frameborder=\"0\"&gt;&lt;\/iframe&gt;<\/pre>\n<p><iframe loading=\"lazy\" src=\"\/\/jsfiddle.net\/B1KMusic\/Lktoefkz\/embedded\/js,html,css,result\/dark\/\" width=\"100%\" height=\"300\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>Pahami kode iframe di atas karena sebagian besar attribute di dalamnya bisa Anda ubah\/sesuaikan.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Embed_JSFiddle_di_WordPress_Menggunakan_Plugin\"><\/span>Embed JSFiddle di WordPress Menggunakan Plugin<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Cara kedua ini adalah dengan menggunakan plugin. Bagi Anda yang yang ingin praktis maka Anda dapat memanfaatkan plugin bernama <strong>JSFiddle Shortcode<\/strong> di bawah ini.<\/p>\n<!-- WP-Appbox (Version: 4.4.12 \/\/ Store: wordpress \/\/ ID: jsfiddle-shortcode) -->\n<div class=\"wpappbox wpappbox-bfd6826253446375431049f23754434a wordpress colorful simple\">\n\t<div class=\"qrcode\"><img decoding=\"async\" src=\"https:\/\/chart.googleapis.com\/chart?cht=qr&chl=https%3A%2F%2Fwordpress.org%2Fplugins%2Fjsfiddle-shortcode%2F&chs=200x200&chld=L%7C0\" alt=\"JSFiddle Shortcode\" \/><\/div>\n\t<div class=\"appicon\">\n\t\t<a target=\"_blank\" rel=\"nofollow\" href=\"https:\/\/wordpress.org\/plugins\/jsfiddle-shortcode\/\" class=\"external\"><img decoding=\"async\" src=\"\/\/www.pugam.com\/wp-content\/plugins\/wp-appbox\/img\/wordpress-logo.png\" alt=\"JSFiddle Shortcode\" \/><\/a>\n\t<\/div>\n\t<div class=\"applinks\">\n\t\t<div class=\"appbuttons\">\n\t\t\t<a target=\"_blank\" rel=\"nofollow\" href=\"https:\/\/wordpress.org\/plugins\/jsfiddle-shortcode\/\" class=\"external\">Install<\/a>\n\t\t\t<span onMouseOver=\"jQuery('.wpappbox-bfd6826253446375431049f23754434a .qrcode').show();\" onMouseOut=\"jQuery('.wpappbox-bfd6826253446375431049f23754434a .qrcode').hide();\">QR-Code<\/span>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"appdetails\">\n\t\t<div class=\"apptitle\"><a target=\"_blank\" rel=\"nofollow\" href=\"https:\/\/wordpress.org\/plugins\/jsfiddle-shortcode\/\" title=\"JSFiddle Shortcode\" class=\"apptitle external\">JSFiddle Shortcode<\/a><\/div>\n\t\t<div class=\"developer\">\n\t\t\t<span class=\"label\">Developer: <\/span>\n\t\t\t<span class=\"value\"><a target=\"_blank\" rel=\"nofollow\" href=\"https:\/\/wvega.com\/\" class=\"external\">Willington Vega<\/a><\/span>\n\t\t<\/div>\n\t\t<div class=\"price\">\n\t\t\t<span class=\"label\">Price: <\/span>\n\t\t\t<span class=\"value\">Free<\/span> \n\t\t\t<span class=\"rating\"><div title=\"5 of 5 stars\" class=\"rating-stars stars-colorful stars50\"><\/div><\/span>\n\t\t<\/div>\n\t<\/div>\n<\/div><!-- \/WP-Appbox -->\n<p>Ukurannya hanya sekitar 9 KB dan dengan plugin ini, Anda dapat menyertakan JSFiddle di dalam postingan melalui sebuah shortcode.<\/p>\n<p>Setelah diinstal, contoh penggunaan shortcode nya seperti ini:<\/p>\n<pre>[jsfiddle url=\"http:\/\/jsfiddle.net\/wvega\/UupFu\/\" height=\"300px\" include=\"result,html,js,css\" font-color=\"39464E\" menu-background-color=\"FFFFFF\" code-background-color=\"f3f5f6\" accent-color=\"1C90F3\"]<\/pre>\n<p>Tidak jauh berbeda dengan kode iframe di atas, sebagian besar attribute yang ada di dalam shortcode bisa Anda ubah\/sesuaikan. Ganti value untuk <code>url<\/code> dengan url <strong>pen<\/strong> yang ingin Anda embed.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Embed_JSFiddle_di_WordPress_dengan_Custom_Shortcode\"><\/span>Embed JSFiddle di WordPress dengan Custom Shortcode<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Sebetulnya, tidak perlu ada penggunaan istilah &#8220;Custom Shortcode&#8221;, karena plugin di atas pun pada dasarnya bekerja dengan cara membuat shortcode nya sendiri.<\/p>\n<p>Jika Anda perhatikan, plugin di atas terakhir diperbarui sekitar 2 tahun lalu. Ini bisa menjadi pertimbangan lain kenapa Anda ingin membuat shortcode sendiri.<\/p>\n<p>Dan shortcode yang saya bagikan di sini sebetulnya saya ambil dari plugin di atas.<\/p>\n<p>Langsung saja, tambahkan kode berikut ke dalam file <strong>functions.php<\/strong>.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"php\">\/\/Embed JSFiddle di WordPress dengan Shortcode\r\nfunction jsfiddle_shortcode_handler($atts, $content) {\r\n    $atts = jsfiddle_shortcode_attrs( $atts );\r\n\r\n    if ( empty( $atts['url'] ) ) {\r\n        return;\r\n    }\r\n\r\n    $url = jsfiddle_shortcode_embed_url( $atts );\r\n\r\n    return '&lt;iframe style=\"width: 100%; height: ' . $atts['height'] . '\" src=\"' . $url . '\" allowfullscreen=\"allowfullscreen\" frameborder=\"0\"&gt;&lt;\/iframe&gt;';\r\n}\r\nadd_shortcode('jsfiddle', 'jsfiddle_shortcode_handler');\r\n\r\nfunction jsfiddle_shortcode_attrs( $atts ) {\r\n    $accepted_tabs = array('result', 'js', 'css', 'html');\r\n\r\n    $atts = shortcode_atts( array(\r\n        'url' =&gt; 'http:\/\/jsfiddle.net\/wvega\/UupFu\/',\r\n        'height' =&gt; '300px',\r\n        'include' =&gt; implode( ',', $accepted_tabs ),\r\n        'theme' =&gt; null,\r\n        'font-color' =&gt; null,\r\n        'code-background-color' =&gt; null,\r\n        'menu-background-color' =&gt; null,\r\n        'accent-color' =&gt; null,\r\n    ), $atts );\r\n\r\n    $atts['include'] = array_intersect( $accepted_tabs, explode( ',', $atts['include'] ) );\r\n\r\n    return $atts;\r\n}\r\n\r\nfunction jsfiddle_shortcode_embed_url( $atts ) {\r\n    if ( $atts['theme'] ) {\r\n        $url = '&lt;jsfiddle-url&gt;\/embedded\/&lt;tabs&gt;\/&lt;theme&gt;\/';\r\n    } else {\r\n        $url = '&lt;jsfiddle-url&gt;\/embedded\/&lt;tabs&gt;\/';\r\n    }\r\n\r\n    $url = str_replace( '&lt;jsfiddle-url&gt;', trim( $atts['url'], '\/' ), $url );\r\n    $url = str_replace( '&lt;tabs&gt;', implode( ',', $atts['include'] ), $url );\r\n    $url = str_replace( '&lt;theme&gt;', $atts['theme'], $url );\r\n    $url = add_query_arg( jsfiddle_shortcode_query_args( $atts ), $url );\r\n\r\n    return $url;\r\n}\r\n\r\nfunction jsfiddle_shortcode_query_args( $atts ) {\r\n    $query_args = array(\r\n        'fontColor' =&gt; 'font-color',\r\n        'menuColor' =&gt; 'menu-background-color',\r\n        'bodyColor' =&gt; 'code-background-color',\r\n        'accentColor' =&gt; 'accent-color',\r\n    );\r\n\r\n    foreach ( $query_args as $query_arg =&gt; $attr_name ) {\r\n        if ( isset( $atts[ $attr_name ] ) &amp;&amp; ! empty( $atts[ $attr_name ] ) ) {\r\n            $query_args[ $query_arg ] = urlencode( $atts[ $attr_name ] );\r\n        } else {\r\n            unset( $query_args[ $query_arg ] );\r\n        }\r\n    }\r\n\r\n    return $query_args;\r\n}<\/pre>\n<p>Struktur shortcode nya nanti seperti ini:<\/p>\n<pre>[jsfiddle url=\"\" height=\"\" include=\"\" font-color=\"\" menu-background-color=\"\" code-background-color=\"\" accent-color=\"\"]<\/pre>\n<p>Di bawah ini adalah contoh penggunaan beserta hasilnya:<\/p>\n<pre>[jsfiddle url=\"https:\/\/jsfiddle.net\/B1KMusic\/kEXfQ\/\" height=\"500px\" include=\"html,css,js,result\" font-color=\"39464E\" menu-background-color=\"FFFFFF\" code-background-color=\"f3f5f6\" accent-color=\"1C90F3\"]<\/pre>\n<iframe style=\"width: 100%; height: 500px\" src=\"https:\/\/jsfiddle.net\/B1KMusic\/kEXfQ\/embedded\/result,js,css,html\/?fontColor=39464E&menuColor=FFFFFF&bodyColor=f3f5f6&accentColor=1C90F3\" allowfullscreen=\"allowfullscreen\" frameborder=\"0\"><\/iframe>\n<h2><span class=\"ez-toc-section\" id=\"Kekurangan_Embed_JSFiddle\"><\/span>Kekurangan Embed JSFiddle<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Tidak seperti CodePen, JSFiddle belum sepenuhnya responsive ketika dilihat dari perangkat mobile.<\/p>\n","protected":false},"excerpt":{"rendered":"Sama seperti CodePen, JSFiddle adalah sebuah &#8220;playground&#8221; bagi para front end developer. Di JSFiddle, Anda dapat bermain-main dengan HTML, CSS \n<a class=\"moretag\" href=\"https:\/\/www.pugam.com\/15039\/cara-embed-jsfiddle-di-wordpress-panduan-lengkap\/\"> ...<\/a>","protected":false},"author":3,"featured_media":15045,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","two_page_speed":[]},"categories":[2092],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Cara Embed JSFiddle di WordPress (Panduan Lengkap) | Pugam<\/title>\n<meta name=\"description\" content=\"Cara Embed JSFiddle di WordPress (Panduan Lengkap) | Cara Embed JSFiddle di WordPress (Panduan Lengkap)\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.pugam.com\/15039\/cara-embed-jsfiddle-di-wordpress-panduan-lengkap\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cara Embed JSFiddle di WordPress (Panduan Lengkap) | Pugam\" \/>\n<meta property=\"og:description\" content=\"Cara Embed JSFiddle di WordPress (Panduan Lengkap) | Cara Embed JSFiddle di WordPress (Panduan Lengkap)\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.pugam.com\/15039\/cara-embed-jsfiddle-di-wordpress-panduan-lengkap\/\" \/>\n<meta property=\"og:site_name\" content=\"Pugam\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/pugamdotcom\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/pugamdotcom\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-03-25T03:36:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-03-30T15:46:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/img.pugam.com\/2018\/03\/Cara-Embed-JSFiddle-di-WordPress.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"750\" \/>\n\t<meta property=\"og:image:height\" content=\"422\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Biralie Nugraha\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Biralie Nugraha\" \/>\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:\/\/www.pugam.com\/15039\/cara-embed-jsfiddle-di-wordpress-panduan-lengkap\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.pugam.com\/15039\/cara-embed-jsfiddle-di-wordpress-panduan-lengkap\/\"},\"author\":{\"name\":\"Biralie Nugraha\",\"@id\":\"https:\/\/www.pugam.com\/#\/schema\/person\/b903cfe7ebcaa1948d7db8622a7d056c\"},\"headline\":\"Cara Embed JSFiddle di WordPress (Panduan Lengkap)\",\"datePublished\":\"2018-03-25T03:36:42+00:00\",\"dateModified\":\"2018-03-30T15:46:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.pugam.com\/15039\/cara-embed-jsfiddle-di-wordpress-panduan-lengkap\/\"},\"wordCount\":454,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.pugam.com\/#\/schema\/person\/4226929fc3ad7c26a33895e82a9bbcd4\"},\"articleSection\":[\"WordPress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.pugam.com\/15039\/cara-embed-jsfiddle-di-wordpress-panduan-lengkap\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.pugam.com\/15039\/cara-embed-jsfiddle-di-wordpress-panduan-lengkap\/\",\"url\":\"https:\/\/www.pugam.com\/15039\/cara-embed-jsfiddle-di-wordpress-panduan-lengkap\/\",\"name\":\"Cara Embed JSFiddle di WordPress (Panduan Lengkap) | Pugam\",\"isPartOf\":{\"@id\":\"https:\/\/www.pugam.com\/#website\"},\"datePublished\":\"2018-03-25T03:36:42+00:00\",\"dateModified\":\"2018-03-30T15:46:52+00:00\",\"description\":\"Cara Embed JSFiddle di WordPress (Panduan Lengkap) | Cara Embed JSFiddle di WordPress (Panduan Lengkap)\",\"breadcrumb\":{\"@id\":\"https:\/\/www.pugam.com\/15039\/cara-embed-jsfiddle-di-wordpress-panduan-lengkap\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.pugam.com\/15039\/cara-embed-jsfiddle-di-wordpress-panduan-lengkap\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.pugam.com\/15039\/cara-embed-jsfiddle-di-wordpress-panduan-lengkap\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.pugam.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress\",\"item\":\"https:\/\/www.pugam.com\/.\/wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Cara Embed JSFiddle di WordPress (Panduan Lengkap)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.pugam.com\/#website\",\"url\":\"https:\/\/www.pugam.com\/\",\"name\":\"Pugam\",\"description\":\"Techno Guide\",\"publisher\":{\"@id\":\"https:\/\/www.pugam.com\/#\/schema\/person\/4226929fc3ad7c26a33895e82a9bbcd4\"},\"alternateName\":\"Pugam.com\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.pugam.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/www.pugam.com\/#\/schema\/person\/4226929fc3ad7c26a33895e82a9bbcd4\",\"name\":\"Asterix\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.pugam.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/img.pugam.com\/2018\/11\/Rendy-Image-Profile.jpg\",\"contentUrl\":\"https:\/\/img.pugam.com\/2018\/11\/Rendy-Image-Profile.jpg\",\"width\":750,\"height\":750,\"caption\":\"Asterix\"},\"logo\":{\"@id\":\"https:\/\/www.pugam.com\/#\/schema\/person\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/pugamdotcom\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.pugam.com\/#\/schema\/person\/b903cfe7ebcaa1948d7db8622a7d056c\",\"name\":\"Biralie Nugraha\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.pugam.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/img.pugam.com\/2018\/02\/avatar1.png\",\"contentUrl\":\"https:\/\/img.pugam.com\/2018\/02\/avatar1.png\",\"caption\":\"Biralie Nugraha\"},\"sameAs\":[\"https:\/\/www.facebook.com\/pugamdotcom\/\"],\"url\":\"https:\/\/www.pugam.com\/profile\/anggrisixpack9aydftt186\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Cara Embed JSFiddle di WordPress (Panduan Lengkap) | Pugam","description":"Cara Embed JSFiddle di WordPress (Panduan Lengkap) | Cara Embed JSFiddle di WordPress (Panduan Lengkap)","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:\/\/www.pugam.com\/15039\/cara-embed-jsfiddle-di-wordpress-panduan-lengkap\/","og_locale":"en_US","og_type":"article","og_title":"Cara Embed JSFiddle di WordPress (Panduan Lengkap) | Pugam","og_description":"Cara Embed JSFiddle di WordPress (Panduan Lengkap) | Cara Embed JSFiddle di WordPress (Panduan Lengkap)","og_url":"https:\/\/www.pugam.com\/15039\/cara-embed-jsfiddle-di-wordpress-panduan-lengkap\/","og_site_name":"Pugam","article_publisher":"https:\/\/www.facebook.com\/pugamdotcom\/","article_author":"https:\/\/www.facebook.com\/pugamdotcom\/","article_published_time":"2018-03-25T03:36:42+00:00","article_modified_time":"2018-03-30T15:46:52+00:00","og_image":[{"width":750,"height":422,"url":"https:\/\/img.pugam.com\/2018\/03\/Cara-Embed-JSFiddle-di-WordPress.jpg","type":"image\/jpeg"}],"author":"Biralie Nugraha","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Biralie Nugraha","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.pugam.com\/15039\/cara-embed-jsfiddle-di-wordpress-panduan-lengkap\/#article","isPartOf":{"@id":"https:\/\/www.pugam.com\/15039\/cara-embed-jsfiddle-di-wordpress-panduan-lengkap\/"},"author":{"name":"Biralie Nugraha","@id":"https:\/\/www.pugam.com\/#\/schema\/person\/b903cfe7ebcaa1948d7db8622a7d056c"},"headline":"Cara Embed JSFiddle di WordPress (Panduan Lengkap)","datePublished":"2018-03-25T03:36:42+00:00","dateModified":"2018-03-30T15:46:52+00:00","mainEntityOfPage":{"@id":"https:\/\/www.pugam.com\/15039\/cara-embed-jsfiddle-di-wordpress-panduan-lengkap\/"},"wordCount":454,"commentCount":0,"publisher":{"@id":"https:\/\/www.pugam.com\/#\/schema\/person\/4226929fc3ad7c26a33895e82a9bbcd4"},"articleSection":["WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.pugam.com\/15039\/cara-embed-jsfiddle-di-wordpress-panduan-lengkap\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.pugam.com\/15039\/cara-embed-jsfiddle-di-wordpress-panduan-lengkap\/","url":"https:\/\/www.pugam.com\/15039\/cara-embed-jsfiddle-di-wordpress-panduan-lengkap\/","name":"Cara Embed JSFiddle di WordPress (Panduan Lengkap) | Pugam","isPartOf":{"@id":"https:\/\/www.pugam.com\/#website"},"datePublished":"2018-03-25T03:36:42+00:00","dateModified":"2018-03-30T15:46:52+00:00","description":"Cara Embed JSFiddle di WordPress (Panduan Lengkap) | Cara Embed JSFiddle di WordPress (Panduan Lengkap)","breadcrumb":{"@id":"https:\/\/www.pugam.com\/15039\/cara-embed-jsfiddle-di-wordpress-panduan-lengkap\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.pugam.com\/15039\/cara-embed-jsfiddle-di-wordpress-panduan-lengkap\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.pugam.com\/15039\/cara-embed-jsfiddle-di-wordpress-panduan-lengkap\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.pugam.com\/"},{"@type":"ListItem","position":2,"name":"WordPress","item":"https:\/\/www.pugam.com\/.\/wordpress\/"},{"@type":"ListItem","position":3,"name":"Cara Embed JSFiddle di WordPress (Panduan Lengkap)"}]},{"@type":"WebSite","@id":"https:\/\/www.pugam.com\/#website","url":"https:\/\/www.pugam.com\/","name":"Pugam","description":"Techno Guide","publisher":{"@id":"https:\/\/www.pugam.com\/#\/schema\/person\/4226929fc3ad7c26a33895e82a9bbcd4"},"alternateName":"Pugam.com","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.pugam.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/www.pugam.com\/#\/schema\/person\/4226929fc3ad7c26a33895e82a9bbcd4","name":"Asterix","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.pugam.com\/#\/schema\/person\/image\/","url":"https:\/\/img.pugam.com\/2018\/11\/Rendy-Image-Profile.jpg","contentUrl":"https:\/\/img.pugam.com\/2018\/11\/Rendy-Image-Profile.jpg","width":750,"height":750,"caption":"Asterix"},"logo":{"@id":"https:\/\/www.pugam.com\/#\/schema\/person\/image\/"},"sameAs":["https:\/\/www.facebook.com\/pugamdotcom\/"]},{"@type":"Person","@id":"https:\/\/www.pugam.com\/#\/schema\/person\/b903cfe7ebcaa1948d7db8622a7d056c","name":"Biralie Nugraha","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.pugam.com\/#\/schema\/person\/image\/","url":"https:\/\/img.pugam.com\/2018\/02\/avatar1.png","contentUrl":"https:\/\/img.pugam.com\/2018\/02\/avatar1.png","caption":"Biralie Nugraha"},"sameAs":["https:\/\/www.facebook.com\/pugamdotcom\/"],"url":"https:\/\/www.pugam.com\/profile\/anggrisixpack9aydftt186\/"}]}},"jetpack_featured_media_url":"https:\/\/img.pugam.com\/2018\/03\/Cara-Embed-JSFiddle-di-WordPress.jpg","jetpack-related-posts":[{"id":15253,"url":"https:\/\/www.pugam.com\/15253\/cara-melihat-password-yang-tersembunyi-dibalik-tanda-bintang\/","url_meta":{"origin":15039,"position":0},"title":"3 Cara Melihat Password yang Tersembunyi Dibalik Tanda Bintang","date":"1 Apr 2018","format":false,"excerpt":"Ketika Anda menginput password di sebuah layanan online seperti Facebook, maka browser secara otomatis akan menyembunyikannya dibalik simbol bintang (asterisk) atau simbol berbentuk bulat (bullets). Hal ini dilakukan untuk mencegah ada orang lain disekitar Anda yang dapat melihat password tersebut ketika Anda mengetiknya. Tapi ada banyak alasan kenapa prosedur seperti\u2026","rel":"","context":"In &quot;Internet&quot;","img":{"alt_text":"Cara Melihat Password Dibalik Simbol Asterisks Di Browser","src":"https:\/\/i0.wp.com\/img.pugam.com\/2018\/03\/Cara-Melihat-Password-Dibalik-Simbol-Asterisks-di-Browser.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":20161,"url":"https:\/\/www.pugam.com\/20161\/cara-menggunakan-dpfilelist-generator-pro-evolutin-soccer\/","url_meta":{"origin":15039,"position":1},"title":"Cara Menggunakan DpFileList Generator (Pro Evolution Soccer)","date":"25 May 2019","format":false,"excerpt":"Sesuai namanya, DpFileList Generator adalah tool yang dapat digunakan untuk membuat atau me-regenerasi file DpFileList.bin. Game seperti Pro Evolution Soccer menggunakan file ini untuk memuat konten permainan. Lalu apa fungsi DpFileList Generator di game seperti PES ini? Jika Anda ingin menambahkan konten baru ke dalam game, seperti sepatu atau kostum\u2026","rel":"","context":"In &quot;Umum&quot;","img":{"alt_text":"Cara Menggunakan Dpfilelist Generator","src":"https:\/\/i0.wp.com\/img.pugam.com\/2019\/05\/Cara-Menggunakan-DpFileList-Generator.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":10204,"url":"https:\/\/www.pugam.com\/10204\/cara-instal-whatsapp-di-windows-7-64-bit-dan-32-bit\/","url_meta":{"origin":15039,"position":2},"title":"Cara Instal WhatsApp di Windows 7 (64-bit)","date":"27 Aug 2017","format":false,"excerpt":"UPDATE! Sebelumnya, artikel ini diperuntukkan bagi Anda pengguna Windows 7 baik itu 64-bit maupun 32-bit. Tapi banyak laporan ternyata di Windows 7 32-bit tidak berfungsi. Saya pun pengguna Windows 7 tapi 64-bit, terakhir kali saya instal WhatsApp ini pada tanggal 27 April 2018 dan masih berfungsi dengan baik. Jadi, bagi\u2026","rel":"","context":"In &quot;Windows&quot;","img":{"alt_text":"Cara Instal WhatsApp di Windows 7","src":"https:\/\/i0.wp.com\/img.pugam.com\/2017\/08\/Cara-Instal-WhatsApp-di-Windows-7.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":18728,"url":"https:\/\/www.pugam.com\/18728\/download-fmwhatsapp-versi-terbaru\/","url_meta":{"origin":15039,"position":3},"title":"Download FMWhatsApp Versi Terbaru v10.03 (Anti-BAN) 2024","date":"26 Oct 2018","format":false,"excerpt":"Terakhir diperbarui 2024 Versi saat ini 10.03 Ukuran file 51 MB Pengembang Fouad Mokdad Pengembang situs web fouadmod.com System requirements Android 4.0+ Sama seperti MOD WhatsApp lainnya, FMWhatsApp yang dikembangkan oleh Fouad Mokdad adalah modifikasi dari aplikasi pesan instan paling populer, WhatsApp. Lantas apa perbedaan antara FMWhatsApp jika dibandingkan\u2026","rel":"","context":"In &quot;Android&quot;","img":{"alt_text":"Download Fmwhatsapp Versi Terbaru Cover","src":"https:\/\/i0.wp.com\/img.pugam.com\/2018\/10\/Download-FMWhatsApp-Versi-Terbaru-Cover.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":16452,"url":"https:\/\/www.pugam.com\/16452\/download-instagram-plus-versi-terbaru\/","url_meta":{"origin":15039,"position":4},"title":"Download Instagram Plus Versi Terbaru","date":"15 Jun 2018","format":false,"excerpt":"Terakhir diperbarui 1 day ago Versi saat ini 10.20.0 Ukuran file 25 MB Pengembang official-plus.com System requirements Android 4.0+ Apa Itu Instagram Plus? Instagram Plus adalah MOD untuk aplikasi Instagram Android, menawarkan fungsionalitas tambahan yang tidak Anda dapatkan dari aplikasi resmi Instagram Android. Salah satunya adalah memungkinkan Anda untuk men-download\u2026","rel":"","context":"In &quot;Android&quot;","img":{"alt_text":"Download Instagram Plus Versi Terbaru","src":"https:\/\/i0.wp.com\/img.pugam.com\/2018\/06\/Download-Instagram-Plus-Versi-Terbaru.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":18645,"url":"https:\/\/www.pugam.com\/18645\/download-yowhatsapp-terbaru-2023\/","url_meta":{"origin":15039,"position":5},"title":"Download YoWhatsApp Versi Terbaru v10.03 (Anti-BAN) 2024","date":"18 Oct 2018","format":false,"excerpt":"Terakhir diperbarui May 2024 Versi saat ini 10.03\u00a0 Ukuran file 64 MB Pengembang Fouad Mokdad System requirements Android 4.0+ YoWhatsApp adalah MOD (modifikasi) dari aplikasi WhatsApp dengan lebih banyak fitur yang tidak akan Anda dapatkan di WhatsApp versi resmi. YoWhatsApp juga merupakan MOD WhatsApp paling populer hingga saat ini\u2026","rel":"","context":"In &quot;Android&quot;","img":{"alt_text":"Download Yowhatsapp Versi Terbaru Thumbnail","src":"https:\/\/i0.wp.com\/img.pugam.com\/2018\/10\/Download-YoWhatsApp-Versi-Terbaru-Thumbnail.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.pugam.com\/wp-json\/wp\/v2\/posts\/15039"}],"collection":[{"href":"https:\/\/www.pugam.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.pugam.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.pugam.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pugam.com\/wp-json\/wp\/v2\/comments?post=15039"}],"version-history":[{"count":0,"href":"https:\/\/www.pugam.com\/wp-json\/wp\/v2\/posts\/15039\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.pugam.com\/wp-json\/wp\/v2\/media\/15045"}],"wp:attachment":[{"href":"https:\/\/www.pugam.com\/wp-json\/wp\/v2\/media?parent=15039"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pugam.com\/wp-json\/wp\/v2\/categories?post=15039"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}