{
    "componentChunkName": "component---src-templates-blog-post-js",
    "path": "/coding/membuat-digital-promotion-card-tool-sederhana/",
    "result": {"data":{"site":{"siteMetadata":{"title":"Regga Rantai","image":"images/regga-signature.png"}},"mdx":{"id":"ff88a6b6-7ea5-5eb9-bf2f-b10fb138ea0b","body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Membuat digital promotion card tool sederhana\",\n  \"date\": \"2021-03-12T00:00:00.000Z\",\n  \"hijriah\": \"28 Rajab 1442\",\n  \"description\": \"Digital promotion card bisa anda gunakan untuk media branding atau marketing sebuah produk, perusahaan, cafe, toko, restoran, dll..\",\n  \"featuredImage\": \"regga-rantai-membuat-digital-promotion-tool-sederhana.jpg\",\n  \"postType\": \"coding\",\n  \"tags\": [\"javascript\"],\n  \"draft\": false\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", {\n    \"className\": \"blog-img blog-img-top\"\n  }, \"\\n  \", mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"640px\"\n    }\n  }, \"\\n      \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"50%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAKABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAwQA/8QAFgEBAQEAAAAAAAAAAAAAAAAAAQAC/9oADAMBAAIQAxAAAAE4aCyz5c3/xAAaEAEAAgMBAAAAAAAAAAAAAAABAiEAAxAR/9oACAEBAAEFAkqQ+mb6I8//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAVEAEBAAAAAAAAAAAAAAAAAAAQgf/aAAgBAQAGPwJr/8QAGhABAAMBAQEAAAAAAAAAAAAAAQARITEQUf/aAAgBAQABPyELFbrcRx8nESFNQ1Nb3z//2gAMAwEAAgADAAAAEHgP/8QAFREBAQAAAAAAAAAAAAAAAAAAARD/2gAIAQMBAT8QZ//EABcRAQADAAAAAAAAAAAAAAAAAAABESH/2gAIAQIBAT8QjFv/xAAbEAEBAAIDAQAAAAAAAAAAAAABEQBBITFRkf/aAAgBAQABPxAFmUAFk6+4N2XT0yq3zimy8M04TWUdtwAsDvP/2Q==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Regga Rantai - Digital promotion card bisa anda gunakan untuk media branding atau marketing sebuah produk, perusahaan, cafe, toko, restoran, dll..\",\n    \"title\": \"Regga Rantai - Digital promotion card bisa anda gunakan untuk media branding atau marketing sebuah produk, perusahaan, cafe, toko, restoran, dll..\",\n    \"src\": \"/static/b484803dac8f7e6712af513a2ba6bb87/312de/regga-rantai-membuat-digital-promotion-tool-sederhana.jpg\",\n    \"srcSet\": [\"/static/b484803dac8f7e6712af513a2ba6bb87/3bb43/regga-rantai-membuat-digital-promotion-tool-sederhana.jpg 160w\", \"/static/b484803dac8f7e6712af513a2ba6bb87/617b8/regga-rantai-membuat-digital-promotion-tool-sederhana.jpg 320w\", \"/static/b484803dac8f7e6712af513a2ba6bb87/312de/regga-rantai-membuat-digital-promotion-tool-sederhana.jpg 640w\", \"/static/b484803dac8f7e6712af513a2ba6bb87/41eff/regga-rantai-membuat-digital-promotion-tool-sederhana.jpg 960w\", \"/static/b484803dac8f7e6712af513a2ba6bb87/533d0/regga-rantai-membuat-digital-promotion-tool-sederhana.jpg 1280w\"],\n    \"sizes\": \"(max-width: 640px) 100vw, 640px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\",\n    \"decoding\": \"async\"\n  }), \"\\n    \"), \"\\n\"), mdx(\"p\", null, \"Digital promotion card disini maksud nya pengunjung bisa mengunggah gambar mereka sendiri untuk dipasang ke template dasar yang kita sediakan.. Pada dasar nya adalah membuat watermark pada gambar..\"), mdx(\"p\", null, \"Contoh nya seperti yang pernah saya buat di \", mdx(\"a\", {\n    href: \"https://events.globallandscapesforum.org/biodiversity-2020/make-your-own-landscape-postcard/\",\n    target: \"_blank\"\n  }, \"events.globallandscapesforum.org/biodiversity-2020/make-your-own-landscape-postcard/\")), mdx(\"p\", null, \"Pengunjung dapat mengunggah foto atau gambar mereka sendiri dan untuk menambah tulisan mereka sendiri..\"), mdx(\"p\", {\n    \"className\": \"blog-img\"\n  }, \"\\n  \", mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"640px\"\n    }\n  }, \"\\n      \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"68.12499999999999%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAOABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAMCBP/EABcBAAMBAAAAAAAAAAAAAAAAAAACAwX/2gAMAwEAAhADEAAAAZWwmdQz2//EABoQAAIDAQEAAAAAAAAAAAAAAAECAAMRIRP/2gAIAQEAAQUCRRFTGHZ41gVr3Mn/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAXEQEAAwAAAAAAAAAAAAAAAAAAAQIy/9oACAECAQE/Ab5S/8QAGhAAAgIDAAAAAAAAAAAAAAAAAREAEBIiQf/aAAgBAQAGPwLZTIEOuxBqv//EABoQAAMBAAMAAAAAAAAAAAAAAAABETEhYZH/2gAIAQEAAT8hk8sglthiGi9nMoISuRtFCLD/2gAMAwEAAgADAAAAELvP/8QAFhEBAQEAAAAAAAAAAAAAAAAAAQAh/9oACAEDAQE/EA2L/8QAFxEAAwEAAAAAAAAAAAAAAAAAABEhMf/aAAgBAgEBPxB2NQ//xAAdEAEBAAMAAgMAAAAAAAAAAAABEQAhMUFxYZHh/9oACAEBAAE/EFw6AWaL3Zz9xJhUNJZ8feXh2h9+csT6sZv3gd1UDunEfGFKgWZ//9k=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"regga rantai GLF watermarked\",\n    \"title\": \"regga rantai GLF watermarked\",\n    \"src\": \"/static/f4b9c975a94f91db88ca9bf33762745b/312de/regga-rantai-GLF-watermarked.jpg\",\n    \"srcSet\": [\"/static/f4b9c975a94f91db88ca9bf33762745b/3bb43/regga-rantai-GLF-watermarked.jpg 160w\", \"/static/f4b9c975a94f91db88ca9bf33762745b/617b8/regga-rantai-GLF-watermarked.jpg 320w\", \"/static/f4b9c975a94f91db88ca9bf33762745b/312de/regga-rantai-GLF-watermarked.jpg 640w\", \"/static/f4b9c975a94f91db88ca9bf33762745b/41eff/regga-rantai-GLF-watermarked.jpg 960w\", \"/static/f4b9c975a94f91db88ca9bf33762745b/128e0/regga-rantai-GLF-watermarked.jpg 970w\"],\n    \"sizes\": \"(max-width: 640px) 100vw, 640px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\",\n    \"decoding\": \"async\"\n  }), \"\\n    \"), \"\\n\"), mdx(\"p\", null, \"Dalam contoh diatas tulisan \\u201CKyoto\\u201D di-\", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"input\"), \" sendiri oleh pengunjung.. dan gambar yang bagian kiri nya adalah gambar yang diunggah sendiri oleh pengunjung..\"), mdx(\"p\", null, \"Sedangkan gambar yang bagian kanan dan text #GLFBiodiversity dan \\u201CGreetings from\\u201D adalah merupakan template dasar nya..\"), mdx(\"p\", null, \"Untuk kali saya akan memberi contoh pembuatan nya, namun dengan template yang berbeda..\"), mdx(\"h6\", null, \"1. Gunakan library\"), mdx(\"p\", null, \"\\u201C\", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"Don\\u2019t reinvent the wheel\"), \"\\u201D atau \\u201D\", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"code reusability\"), \"\\u201D adalah istilah yang digunakan untuk mempercepat pengerjaan dengan menggunakan modul/script orang lain yang memang bisa untuk digunakan.. Kecuali jika kita membutuhkan code yang sangat spesifik yang tidak kita dapatkan dari modul yang tersedia..\"), mdx(\"p\", null, \"Disini kita akan menggunakan script dari \", mdx(\"a\", {\n    href: \"https://brianium.github.io/watermarkjs/\",\n    target: \"_blank\"\n  }, \"sini\"), \", lengkap dengan \", mdx(\"a\", {\n    href: \"https://brianium.github.io/watermarkjs/docs.html\",\n    target: \"_blank\"\n  }, \"dokumentasi\"), \" nya, untuk membuat watermark pada gambar..\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"html\"\n  }, mdx(\"pre\", {\n    parentName: \"div\",\n    \"className\": \"language-html\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"script\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"src\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"assets/js/vendor/watermark.min.js\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token script\"\n  }), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), \"script\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\"))))), mdx(\"h6\", null, \"2. Siapkan template\"), mdx(\"p\", null, \"Kita membutuhkan template dasar untuk digunakan agar memliki identitas yang baik.. Bisa berupa logo (misal kita ingin gunakan untuk logo perusahaan, cafe, produk, restaurant, dll) dan/atau grafis yang menggambarkan sesuatu..\"), mdx(\"p\", null, \"Dalam kesempatan kali ini saya menggunakan logo dan default text saja..\"), mdx(\"p\", null, \"Kita bisa menggunakann jasa desain grafis jika belum bisa membuat logo dan/atau grafis sendiri yang menarik..\"), mdx(\"h6\", null, \"3. Membuat input form\"), mdx(\"p\", null, \"Tipe input yang diperlukan adalah text, radio dan file upload.. Text digunakan untuk nama barang atau project dan nama orang, radio input untuk menentukan warna tulisan, dan upload untuk mengunggah gambar yang diinginkan..\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"html\"\n  }, mdx(\"pre\", {\n    parentName: \"div\",\n    \"className\": \"language-html\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"form\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"action\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"id\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"uploadForm\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"method\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"POST\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"div\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"class\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"form-group\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"label\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"Nama barang atau project:\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), \"label\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"input\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"type\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"text\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"id\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"text\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"placeholder\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"Masukkan nama barang atau project disini\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token entity named-entity\",\n    \"title\": \"…\"\n  }, \"&hellip;\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"class\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"form-control\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"/>\")), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), \"div\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"div\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"class\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"form-group\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"label\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"Nama anda:\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), \"label\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"input\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"type\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"text\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"id\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"name\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"placeholder\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"Masukkan nama anda disini\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token entity named-entity\",\n    \"title\": \"…\"\n  }, \"&hellip;\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"class\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"form-control\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"/>\")), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), \"div\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"\\n\\t\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"div\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"class\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"form-group\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"label\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token special-attr\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"style\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token value css language-css\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token property\"\n  }, \"display\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \":\"), \"block\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"))), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"Warna tulisan:\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), \"label\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"\\n\\t\\t\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"div\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"class\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"form-check form-check-inline \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"\\n\\t\\t\\t\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"input\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"class\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"form-check-input\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"type\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"radio\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"id\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"color\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"name\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"radio\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"value\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"Putih\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"checked\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"checked\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"\\n\\t\\t\\t\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"label\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"class\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"form-check-label\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"for\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"color\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"Putih\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), \"label\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"\\n\\t\\t\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), \"div\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"\\n\\t\\t\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"div\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"class\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"form-check form-check-inline\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"\\n\\t\\t\\t\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"input\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"class\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"form-check-input\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"type\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"radio\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"id\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"color2\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"name\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"radio\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"value\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"Hitam\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"\\n\\t\\t\\t\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"label\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"class\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"form-check-label\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"for\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"color2\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"Hitam\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), \"label\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"\\n\\t\\t\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), \"div\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), \"div\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"div\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"class\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"input-group\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"span\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"class\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"input-group-btn\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"span\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"class\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"btn btn-primary btn-file\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"\\n        \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"span\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"Unggah gambar disini\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token entity named-entity\",\n    \"title\": \"…\"\n  }, \"&hellip;\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), \"span\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"\\n        \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"input\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"type\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"file\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"id\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"target\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"class\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"form-control\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), \"span\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), \"span\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), \"div\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), \"form\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\"))))), mdx(\"p\", null, \"Lalu kita tambahkan \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"placeholder\"), \" untuk menampilkan \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"preview\"), \" hasil nya, dan untuk tombol unduh nya..\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"html\"\n  }, mdx(\"pre\", {\n    parentName: \"div\",\n    \"className\": \"language-html\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"<!-- ini untuk menampilkan hasil sebelum di unduh -->\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"div\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"id\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"preview\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), \"div\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"\\n\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"<!-- untuk menampilkan tombol unduh setelah proses selesai -->\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"div\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"id\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"dl-dcard\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), \"div\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\"))))), mdx(\"h6\", null, \"4. Menulis javascript function\"), mdx(\"p\", null, \"Kemudian input data dari pengunjung kita olah dengan javascript.. Perlu set posisi text-text nya.. Untuk ini memang kita perlu coba-coba tes posisi nya sampai dapat posisi yang kita inginkan.. \\u201Cx dan y\\u201D untuk posisi judul atau nama barang, \\u201Cx2 & y2\\u201D untuk posisi nama pembuatnya, dan \\u201Cx3 dan y3\\u201D adalah untuk posisi tagar..\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"javascript\"\n  }, mdx(\"pre\", {\n    parentName: \"div\",\n    \"className\": \"language-javascript\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"var\"), \" imgToMark\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" init \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token boolean\"\n  }, \"true\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function-variable function\"\n  }, \"x\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"function\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"return\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"230\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function-variable function\"\n  }, \"y\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"function\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"return\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"128\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function-variable function\"\n  }, \"x2\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"function\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"return\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"230\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function-variable function\"\n  }, \"y2\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"function\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"return\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"163\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function-variable function\"\n  }, \"x3\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"function\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"return\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"917\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function-variable function\"\n  }, \"y3\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"function\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"return\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"1219\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\")))), mdx(\"p\", null, \"Gambar yang diunggah akan bervariasi ukuran nya, sehingga perlu diset agar posisi nya sesuai.. Disini saya menggunakan ukuran 1280 x 1280px (ratio 1:1) maka ukuran yang melebihi itu akan di-\", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"adjust\"), \" supaya berada di tengah template dasar nya..\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"javascript\"\n  }, mdx(\"pre\", {\n    parentName: \"div\",\n    \"className\": \"language-javascript\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"var\"), \" canvas \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" document\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"createElement\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'canvas'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\nmax_width \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"1280\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\nmax_height \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"1280\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\nwidth \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" image\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"width\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\nheight \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" image\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"height\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"if\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"width \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \">=\"), \" height\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n\\theight \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"*=\"), \" max_width \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"/\"), \" width\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\twidth \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" max_width\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\t\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"if\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"height \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"<\"), \" max_height\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n\\t\\twidth \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"*=\"), \" max_height \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"/\"), \" height\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\t\\theight \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" max_height\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\t\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"else\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n\\twidth \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"*=\"), \" max_height \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"/\"), \" height\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\theight \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" max_height\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\t\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"if\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"width \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"<\"), \" max_width\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n\\t\\theight \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"*=\"), \" max_width \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"/\"), \" width\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\t\\twidth \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" max_width\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\t\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n\\ncanvas\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"width \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" max_width\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\ncanvas\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"height \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" max_height\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\ncanvas\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"getContext\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'2d'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"drawImage\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"image\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"width \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \">\"), \" max_width \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"?\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"-\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"width \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"-\"), \" max_width\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"/\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"2\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"0\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"height \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \">\"), \" max_height \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"?\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"-\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"height \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"-\"), \" max_height\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"/\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"2\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"0\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n  width\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" height\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\")))), mdx(\"p\", null, \"Setelah itu kita buat fungsi setPostcard() untuk membuat card nya sesuai dengan apa yang ada dalam dokumentasi script nya..\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"javascript\"\n  }, mdx(\"pre\", {\n    parentName: \"div\",\n    \"className\": \"language-javascript\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"var\"), \" dataUrl \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" canvas\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"toDataURL\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'image/jpeg'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\ntext \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" document\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"getElementById\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'text'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"value\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\nname \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'Oleh: '\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"+\"), \" document\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"getElementById\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'name'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"value\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\ncolor \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" document\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"getElementById\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'color'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"checked \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"?\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'#fff'\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'#333'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"watermark\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"[\"), \"dataUrl\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'assets/images/card-template.png'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"]\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"dataUrl\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"watermark\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"image\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"center\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"1\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"render\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"dataUrl\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"watermark\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"text\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"atPos\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"x\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" y\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" text\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'bold 40px Roboto'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" color\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"1\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"render\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"dataUrl\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"watermark\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"text\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"atPos\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"x2\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" y2\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" name\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'18px Roboto'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" color\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"0.9\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"render\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"dataUrl\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"watermark\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"text\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"atPos\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"x3\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" y3\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'# G e r a k a n J e m a r i A k h i r P e k a n'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'16px Roboto'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" color\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"0.9\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"then\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"function\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token parameter\"\n  }, \"marked\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n\\t\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"var\"), \" obj \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"new\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token class-name\"\n  }, \"Image\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\tobj\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"src \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" marked\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\tdocument\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"getElementById\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'preview'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"innerHTML \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"''\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\tdocument\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"getElementById\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'preview'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"appendChild\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"obj\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"dataUrl\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\tdocument\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"getElementById\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'dl-dcard'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"innerHTML \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'<br/><a class=\\\"btn btn-primary width-100\\\" download=\\\"gerakan-jemari-akhir-pekan\\\" href=\\\"'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"+\"), \"obj\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"src\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"+\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'\\\">Klik disini untuk mengunduh</a>'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\")))), mdx(\"p\", null, \"Selanjutnya kita set agar jika ada perubahan data dalam input form, maka akan sistem akan memproses nya..\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"javascript\"\n  }, mdx(\"pre\", {\n    parentName: \"div\",\n    \"className\": \"language-javascript\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\"\n  }, \"document\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"addEventListener\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'DOMContentLoaded'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"function\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n\\tdocument\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"getElementById\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'uploadForm'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"addEventListener\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'change'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"function\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token parameter\"\n  }, \"e\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n\\t\\t\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"var\"), \" input \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" e\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"target\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\t\\t\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"if\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"input\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"type \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"===\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'text'\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"&&\"), \" imgToMark\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"||\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"input\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"type \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"===\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'radio'\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"&&\"), \" imgToMark\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n\\t\\t\\t\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"setPostcard\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"imgToMark\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\t\\t\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\t\\t\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"if\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"input\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"type \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"===\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'file'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n\\t\\t\\timgToMark \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" input\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"files\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"[\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"0\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"]\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\t\\t\\t\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"setPostcard\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"imgToMark\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\t\\t\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n\\t\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\")))), mdx(\"p\", null, \"Hasil tampilan nya kira-kira seperti dibawah ini..\"), mdx(\"p\", {\n    \"className\": \"blog-img\"\n  }, \"\\n  \", mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"640px\"\n    }\n  }, \"\\n      \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"170.62499999999997%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAiABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAUDBAH/xAAVAQEBAAAAAAAAAAAAAAAAAAABAP/aAAwDAQACEAMQAAABt+8WdUmKo0+nzjUaE6wnoH//xAAgEAABAgUFAAAAAAAAAAAAAAACAQMABBAREhMUITE0/9oACAEBAAEFAqk8gnughk0cCZ4Mu5DzP5K7pksSY4sWSLJT/8QAFBEBAAAAAAAAAAAAAAAAAAAAIP/aAAgBAwEBPwFf/8QAFBEBAAAAAAAAAAAAAAAAAAAAIP/aAAgBAgEBPwFf/8QAIRAAAgEDAwUAAAAAAAAAAAAAAAEhAhAREjEyI2GBkaH/2gAIAQEABj8Cu1n4cn6NSkrfcZ5Kum3JwZhxJsbW/8QAHhAAAwABBQEBAAAAAAAAAAAAAAERITFBUXGREGH/2gAIAQEAAT8hmSd/HSdTgNOpaJiyyEVMzBHJcU0uwiWLctxsNwbUyhkiqwU2eH5PCJaYP//aAAwDAQACAAMAAAAQwAA88A//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAEDAQE/EF//xAAXEQADAQAAAAAAAAAAAAAAAAABECAh/9oACAECAQE/EFoj/8QAIBABAAIBBAIDAAAAAAAAAAAAAQARITFBUXEQoWHw8f/aAAgBAQABPxDJZfc7+3hQg0SyppLm2m2FZj4hsw6hHWE27FxzFa/e5sBXQlNGB+0WDEDPBLdzWKruifipoQDgKn//2Q==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"regga rantai digital promotion card tool sample\",\n    \"title\": \"regga rantai digital promotion card tool sample\",\n    \"src\": \"/static/6b44abdfc7bdabc2d21d7fd05df2a8ff/312de/regga-rantai-digital-promotion-card-tool-sample.jpg\",\n    \"srcSet\": [\"/static/6b44abdfc7bdabc2d21d7fd05df2a8ff/3bb43/regga-rantai-digital-promotion-card-tool-sample.jpg 160w\", \"/static/6b44abdfc7bdabc2d21d7fd05df2a8ff/617b8/regga-rantai-digital-promotion-card-tool-sample.jpg 320w\", \"/static/6b44abdfc7bdabc2d21d7fd05df2a8ff/312de/regga-rantai-digital-promotion-card-tool-sample.jpg 640w\", \"/static/6b44abdfc7bdabc2d21d7fd05df2a8ff/41eff/regga-rantai-digital-promotion-card-tool-sample.jpg 960w\", \"/static/6b44abdfc7bdabc2d21d7fd05df2a8ff/533d0/regga-rantai-digital-promotion-card-tool-sample.jpg 1280w\"],\n    \"sizes\": \"(max-width: 640px) 100vw, 640px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\",\n    \"decoding\": \"async\"\n  }), \"\\n    \"), \"\\n\"), mdx(\"p\", null, \"Untuk script lengkap nya bisa diliat di \", mdx(\"a\", {\n    href: \"https://github.com/reggarantai/digital-promotion-card-tool/\",\n    target: \"_blank\"\n  }, \"github.com/reggarantai/digital-promotion-card-tool\"), \"..\\u2028\\u2028\\u2028 Ini hanya basic nya saja ya.. Silahkan dimodifikasi sendiri agar sesuai dengan apa yang diinginkan..\"), mdx(\"p\", null, \"Kelebihan dari apa yang kita buat ini adalah bahwa proses nya terjadi di client side (perangkat pengunjung) sehingga tidak membebani server..\"), mdx(\"p\", null, \"Untuk contoh live nya bisa dilihat di \", mdx(\"a\", {\n    href: \"https://gerakanjemariakhirpekan.com/\",\n    target: \"_blank\"\n  }, \"gerakanjemariakhirpekan.com\")), mdx(\"p\", null, \"Semoga ada manfaatnya..\", mdx(\"br\", null), \"\\nWassalaamu\\u2019alaikum..\"));\n}\n;\nMDXContent.isMDXComponent = true;","fields":{"slug":"/coding/membuat-digital-promotion-card-tool-sederhana/"},"excerpt":"Digital promotion card disini maksud nya pengunjung bisa mengunggah gambar mereka sendiri untuk dipasang ke template dasar yang kita sediakan.. Pada dasar nya…","frontmatter":{"title":"Membuat digital promotion card tool sederhana","date":"12 March 2021","hijriah":"28 Rajab 1442","description":"Digital promotion card bisa anda gunakan untuk media branding atau marketing sebuah produk, perusahaan, cafe, toko, restoran, dll..","postType":"coding","tags":["javascript"],"featuredImage":{"childImageSharp":{"resize":{"src":"/static/b484803dac8f7e6712af513a2ba6bb87/cd2b2/regga-rantai-membuat-digital-promotion-tool-sederhana.jpg","width":1280,"height":640},"gatsbyImageData":{"layout":"fixed","backgroundColor":"#181818","images":{"fallback":{"src":"/static/b484803dac8f7e6712af513a2ba6bb87/5111d/regga-rantai-membuat-digital-promotion-tool-sederhana.jpg","srcSet":"/static/b484803dac8f7e6712af513a2ba6bb87/5111d/regga-rantai-membuat-digital-promotion-tool-sederhana.jpg 20w,\n/static/b484803dac8f7e6712af513a2ba6bb87/99651/regga-rantai-membuat-digital-promotion-tool-sederhana.jpg 40w","sizes":"20px"},"sources":[{"srcSet":"/static/b484803dac8f7e6712af513a2ba6bb87/4926b/regga-rantai-membuat-digital-promotion-tool-sederhana.webp 20w,\n/static/b484803dac8f7e6712af513a2ba6bb87/455ff/regga-rantai-membuat-digital-promotion-tool-sederhana.webp 40w","type":"image/webp","sizes":"20px"}]},"width":20,"height":10}}}}},"previous":{"fields":{"slug":"/coding/membuat-kalkulator-indeks-massa-tubuh/"},"frontmatter":{"title":"Membuat kalkulator untuk menghitung indeks massa tubuh","hijriah":"29 Rajab 1442","featuredImage":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","backgroundColor":"#e8e8e8","images":{"fallback":{"src":"/static/634232327b4cbc606f3dff478861d599/a171f/regga-rantai-membuat-kalkulator-bmi-menggunakan-jquery-o.jpg","srcSet":"/static/634232327b4cbc606f3dff478861d599/2122f/regga-rantai-membuat-kalkulator-bmi-menggunakan-jquery-o.jpg 160w,\n/static/634232327b4cbc606f3dff478861d599/3da3e/regga-rantai-membuat-kalkulator-bmi-menggunakan-jquery-o.jpg 320w,\n/static/634232327b4cbc606f3dff478861d599/a171f/regga-rantai-membuat-kalkulator-bmi-menggunakan-jquery-o.jpg 640w,\n/static/634232327b4cbc606f3dff478861d599/f2f1c/regga-rantai-membuat-kalkulator-bmi-menggunakan-jquery-o.jpg 1280w","sizes":"(min-width: 640px) 640px, 100vw"},"sources":[{"srcSet":"/static/634232327b4cbc606f3dff478861d599/960e3/regga-rantai-membuat-kalkulator-bmi-menggunakan-jquery-o.webp 160w,\n/static/634232327b4cbc606f3dff478861d599/aeec2/regga-rantai-membuat-kalkulator-bmi-menggunakan-jquery-o.webp 320w,\n/static/634232327b4cbc606f3dff478861d599/99f93/regga-rantai-membuat-kalkulator-bmi-menggunakan-jquery-o.webp 640w,\n/static/634232327b4cbc606f3dff478861d599/b584c/regga-rantai-membuat-kalkulator-bmi-menggunakan-jquery-o.webp 1280w","type":"image/webp","sizes":"(min-width: 640px) 640px, 100vw"}]},"width":640,"height":320}}}}},"next":{"fields":{"slug":"/coding/membuat-peta-dengan-custom-map-marker-menggunakan-openlayers/"},"frontmatter":{"title":"Membuat peta dengan custom map marker menggunakan Openlayers","hijriah":"29 Jumadil Akhirah 1442","featuredImage":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","backgroundColor":"#f8f8f8","images":{"fallback":{"src":"/static/ee2b4810e182c7dfb19cd9a0a48b347a/a171f/regga-rantai-membuat-peta-dengan-custom-map-marker-menggunakan-openlayers.jpg","srcSet":"/static/ee2b4810e182c7dfb19cd9a0a48b347a/2122f/regga-rantai-membuat-peta-dengan-custom-map-marker-menggunakan-openlayers.jpg 160w,\n/static/ee2b4810e182c7dfb19cd9a0a48b347a/3da3e/regga-rantai-membuat-peta-dengan-custom-map-marker-menggunakan-openlayers.jpg 320w,\n/static/ee2b4810e182c7dfb19cd9a0a48b347a/a171f/regga-rantai-membuat-peta-dengan-custom-map-marker-menggunakan-openlayers.jpg 640w,\n/static/ee2b4810e182c7dfb19cd9a0a48b347a/f2f1c/regga-rantai-membuat-peta-dengan-custom-map-marker-menggunakan-openlayers.jpg 1280w","sizes":"(min-width: 640px) 640px, 100vw"},"sources":[{"srcSet":"/static/ee2b4810e182c7dfb19cd9a0a48b347a/960e3/regga-rantai-membuat-peta-dengan-custom-map-marker-menggunakan-openlayers.webp 160w,\n/static/ee2b4810e182c7dfb19cd9a0a48b347a/aeec2/regga-rantai-membuat-peta-dengan-custom-map-marker-menggunakan-openlayers.webp 320w,\n/static/ee2b4810e182c7dfb19cd9a0a48b347a/99f93/regga-rantai-membuat-peta-dengan-custom-map-marker-menggunakan-openlayers.webp 640w,\n/static/ee2b4810e182c7dfb19cd9a0a48b347a/b584c/regga-rantai-membuat-peta-dengan-custom-map-marker-menggunakan-openlayers.webp 1280w","type":"image/webp","sizes":"(min-width: 640px) 640px, 100vw"}]},"width":640,"height":320}}}}},"quotes":{"edges":[{"node":{"fields":{"slug":"/kutipan/live-in-the-now/"},"frontmatter":{"title":"Live in the now","featuredImage":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","backgroundColor":"#986848","images":{"fallback":{"src":"/static/a3361071e9752cc1d0ba79dc229d784c/e3115/regga-rantai-live-in-the-now.jpg","srcSet":"/static/a3361071e9752cc1d0ba79dc229d784c/1d851/regga-rantai-live-in-the-now.jpg 160w,\n/static/a3361071e9752cc1d0ba79dc229d784c/82d5c/regga-rantai-live-in-the-now.jpg 320w,\n/static/a3361071e9752cc1d0ba79dc229d784c/e3115/regga-rantai-live-in-the-now.jpg 640w,\n/static/a3361071e9752cc1d0ba79dc229d784c/4cdba/regga-rantai-live-in-the-now.jpg 1280w","sizes":"(min-width: 640px) 640px, 100vw"},"sources":[{"srcSet":"/static/a3361071e9752cc1d0ba79dc229d784c/3883e/regga-rantai-live-in-the-now.webp 160w,\n/static/a3361071e9752cc1d0ba79dc229d784c/202f5/regga-rantai-live-in-the-now.webp 320w,\n/static/a3361071e9752cc1d0ba79dc229d784c/8ffad/regga-rantai-live-in-the-now.webp 640w,\n/static/a3361071e9752cc1d0ba79dc229d784c/0bd36/regga-rantai-live-in-the-now.webp 1280w","type":"image/webp","sizes":"(min-width: 640px) 640px, 100vw"}]},"width":640,"height":800}}}}}},{"node":{"fields":{"slug":"/kutipan/bersemangatlah-dalam-hal-yang-bermanfaat/"},"frontmatter":{"title":"Bersemangatlah dalam hal-hal yang bermanfaat","featuredImage":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","backgroundColor":"#f8f8f8","images":{"fallback":{"src":"/static/25d9c371a73ba4a440d44c95eec79114/e3115/regga-rantai-bersemangatlah-dalam-hal-yang-bermanfaat.jpg","srcSet":"/static/25d9c371a73ba4a440d44c95eec79114/1d851/regga-rantai-bersemangatlah-dalam-hal-yang-bermanfaat.jpg 160w,\n/static/25d9c371a73ba4a440d44c95eec79114/82d5c/regga-rantai-bersemangatlah-dalam-hal-yang-bermanfaat.jpg 320w,\n/static/25d9c371a73ba4a440d44c95eec79114/e3115/regga-rantai-bersemangatlah-dalam-hal-yang-bermanfaat.jpg 640w,\n/static/25d9c371a73ba4a440d44c95eec79114/4cdba/regga-rantai-bersemangatlah-dalam-hal-yang-bermanfaat.jpg 1280w","sizes":"(min-width: 640px) 640px, 100vw"},"sources":[{"srcSet":"/static/25d9c371a73ba4a440d44c95eec79114/3883e/regga-rantai-bersemangatlah-dalam-hal-yang-bermanfaat.webp 160w,\n/static/25d9c371a73ba4a440d44c95eec79114/202f5/regga-rantai-bersemangatlah-dalam-hal-yang-bermanfaat.webp 320w,\n/static/25d9c371a73ba4a440d44c95eec79114/8ffad/regga-rantai-bersemangatlah-dalam-hal-yang-bermanfaat.webp 640w,\n/static/25d9c371a73ba4a440d44c95eec79114/0bd36/regga-rantai-bersemangatlah-dalam-hal-yang-bermanfaat.webp 1280w","type":"image/webp","sizes":"(min-width: 640px) 640px, 100vw"}]},"width":640,"height":800}}}}}},{"node":{"fields":{"slug":"/kutipan/ilmu-adalah-cahaya/"},"frontmatter":{"title":"Ilmu adalah cahaya","featuredImage":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","backgroundColor":"#080808","images":{"fallback":{"src":"/static/43a28fe66cae5811fc4802578ce82e59/e3115/regga-rantai-ilmu-adalah-cahaya.jpg","srcSet":"/static/43a28fe66cae5811fc4802578ce82e59/1d851/regga-rantai-ilmu-adalah-cahaya.jpg 160w,\n/static/43a28fe66cae5811fc4802578ce82e59/82d5c/regga-rantai-ilmu-adalah-cahaya.jpg 320w,\n/static/43a28fe66cae5811fc4802578ce82e59/e3115/regga-rantai-ilmu-adalah-cahaya.jpg 640w,\n/static/43a28fe66cae5811fc4802578ce82e59/4cdba/regga-rantai-ilmu-adalah-cahaya.jpg 1280w","sizes":"(min-width: 640px) 640px, 100vw"},"sources":[{"srcSet":"/static/43a28fe66cae5811fc4802578ce82e59/3883e/regga-rantai-ilmu-adalah-cahaya.webp 160w,\n/static/43a28fe66cae5811fc4802578ce82e59/202f5/regga-rantai-ilmu-adalah-cahaya.webp 320w,\n/static/43a28fe66cae5811fc4802578ce82e59/8ffad/regga-rantai-ilmu-adalah-cahaya.webp 640w,\n/static/43a28fe66cae5811fc4802578ce82e59/0bd36/regga-rantai-ilmu-adalah-cahaya.webp 1280w","type":"image/webp","sizes":"(min-width: 640px) 640px, 100vw"}]},"width":640,"height":800}}}}}}]},"defImg":{"childImageSharp":{"resize":{"src":"/static/f3c4f36e532cd4010b93d2d301151ca2/70c1e/regga-coffee.jpg"}}}},"pageContext":{"slug":"/coding/membuat-digital-promotion-card-tool-sederhana/","previousPostId":"eb600f3c-1d44-52c7-abf8-d9bb75e837da","nextPostId":"66c7405c-4571-5a53-a341-cf2abf4fdc54"}},
    "staticQueryHashes": ["2996832855","3245940048","3343187749"]}