{"id":1085,"date":"2018-12-14T13:50:51","date_gmt":"2018-12-14T06:50:51","guid":{"rendered":"https:\/\/www.yellowweb.id\/blog\/?p=1085"},"modified":"2020-11-25T16:38:08","modified_gmt":"2020-11-25T09:38:08","slug":"scroll-indicator-javascript","status":"publish","type":"post","link":"https:\/\/www.yellowweb.id\/blog\/scroll-indicator-javascript\/","title":{"rendered":"Scroll Indicator (JavaScript)"},"content":{"rendered":"<p>Untuk artikel kali ini kita akan coba membuat efek loading konten dengan menggunakan JavaScript, jadi seperti ini cara kerjanya disaat kita melakukan scroll sebuah halaman web, kita memberikan indikator tambahan, untuk mengetahui sudah sejauh mana, posisi kita berada saat melakukan scroll halaman.<\/p>\n<p><!--more--><\/p>\n<p>Untuk lebih jelasnya kita coba praktekkan, buatlah file index.html lalu isikan kode berikut:<\/p>\n<pre class=\"lang:default decode:true \">&lt;div class=\"header\"&gt;\n  &lt;h2&gt;Scroll Indicator&lt;\/h2&gt;\n  &lt;div class=\"progress-container\"&gt;\n    &lt;div class=\"progress-bar\" id=\"myBar\"&gt;&lt;\/div&gt;\n  &lt;\/div&gt;  \n&lt;\/div&gt;\n\n&lt;div class=\"content\"&gt;\n  &lt;h3&gt;Scroll Down to See The Effect&lt;\/h3&gt;\n  &lt;p&gt;We have created a \"progress bar\" to &lt;b&gt;show how far a page has been scrolled&lt;\/b&gt;.&lt;\/p&gt;\n  &lt;p&gt;It also &lt;b&gt;works when you scroll back up&lt;\/b&gt;.&lt;\/p&gt;\n  &lt;p&gt;It is even &lt;b&gt;responsive&lt;\/b&gt;! Resize the browser window to see the effect.&lt;\/p&gt;\n  &lt;p&gt;Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.&lt;\/p&gt;\n  &lt;p&gt;Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.&lt;\/p&gt;\n  &lt;p&gt;Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.&lt;\/p&gt;\n  &lt;p&gt;Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.&lt;\/p&gt;\n  &lt;p&gt;Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.&lt;\/p&gt;\n  &lt;p&gt;Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.&lt;\/p&gt;\n  &lt;p&gt;Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.&lt;\/p&gt;\n  &lt;p&gt;Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.&lt;\/p&gt;\n  &lt;p&gt;Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.&lt;\/p&gt;\n  &lt;p&gt;Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.&lt;\/p&gt;\n&lt;\/div&gt;<\/pre>\n<p>lalu dilanjutkan dengan membuat file css, kemudian tambahkan kode css berikut:<\/p>\n<pre class=\"lang:default decode:true \">body {\n  margin: 0;\n  font-size: 28px;\n  font-family: Arial, Helvetica, sans-serif;\n}\n\n.header {\n  position: fixed;\n  top: 0;\n  z-index: 1;\n  width: 100%;\n  background-color: #f1f1f1;\n}\n\n.header h2 {\n  text-align: center;\n}\n\n.progress-container {\n  width: 100%;\n  height: 8px;\n  background: #ccc;\n}\n\n.progress-bar {\n  height: 8px;\n  background: #4caf50;\n  width: 0%;\n}\n\n.content {\n  padding: 100px 0;\n  margin: 50px auto 0 auto;\n  width: 80%;\n}<\/pre>\n<p>tahapan selanjutnya sebagai aktivasi, efeks scroll kalian bisa menambahkan skrip berikut:<\/p>\n<pre class=\"lang:default decode:true \">\/\/ When the user scrolls the page, execute myFunction \nwindow.onscroll = function() {myFunction()};\n\nfunction myFunction() {\n  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;\n  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;\n  var scrolled = (winScroll \/ height) * 100;\n  document.getElementById(\"myBar\").style.width = scrolled + \"%\";\n}<\/pre>\n<p>Untuk hasilnya akan terlihat sebagai berikut:<\/p>\n<p><iframe loading=\"lazy\" width=\"100%\" height=\"300\" src=\"\/\/jsfiddle.net\/miftahfs\/8nyz37as\/embedded\/result\/\" allowfullscreen=\"allowfullscreen\" allowpaymentrequest=\"\" frameborder=\"0\"><\/iframe><\/p>\n<p>silahkan bisa diunduh untuk file scroll indicator, link download ada dibawah berikut:\u00a0<\/p>\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class='w3eden'><!-- WPDM Link Template: Default Template -->\n\n<div class=\"link-template-default card mb-2\">\n    <div class=\"card-body\">\n        <div class=\"media\">\n            <div class=\"mr-3 img-48\"><img decoding=\"async\" class=\"wpdm_icon\" alt=\"Icon\" src=\"https:\/\/www.yellowweb.id\/blog\/wp-content\/plugins\/download-manager\/assets\/file-type-icons\/zip.svg\" \/><\/div>\n            <div class=\"media-body\">\n                <h3 class=\"package-title\"><a href='https:\/\/www.yellowweb.id\/blog\/download\/scroll-indicator\/'>Scroll Indicator<\/a><\/h3>\n                <div class=\"text-muted text-small\"><i class=\"fas fa-copy\"><\/i> 1 file(s) <i class=\"fas fa-hdd ml-3\"><\/i> 1.28 KB<\/div>\n            <\/div>\n            <div class=\"ml-3\">\n                <a class='wpdm-download-link download-on-click btn btn-primary ' rel='nofollow' href='#' data-downloadurl=\"https:\/\/www.yellowweb.id\/blog\/download\/scroll-indicator\/?wpdmdl=1296&refresh=69ecaade69d631777117918\">Download<\/a>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Untuk artikel kali ini kita akan coba membuat efek loading konten dengan menggunakan JavaScript, jadi seperti ini cara kerjanya disaat kita melakukan scroll sebuah halaman web, kita memberikan indikator tambahan, untuk mengetahui sudah sejauh mana, posisi kita berada saat melakukan scroll halaman.<\/p>\n","protected":false},"author":1,"featured_media":1093,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[283],"tags":[156,18,325,324,117],"class_list":["post-1085","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-javascript","tag-jquery","tag-menu","tag-navigasi","tag-plugin"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Scroll Indicator (JavaScript) - YELLOWWEB.ID<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.yellowweb.id\/blog\/scroll-indicator-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Scroll Indicator (JavaScript) - YELLOWWEB.ID\" \/>\n<meta property=\"og:description\" content=\"Untuk artikel kali ini kita akan coba membuat efek loading konten dengan menggunakan JavaScript, jadi seperti ini cara kerjanya disaat kita melakukan scroll sebuah halaman web, kita memberikan indikator tambahan, untuk mengetahui sudah sejauh mana, posisi kita berada saat melakukan scroll halaman.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.yellowweb.id\/blog\/scroll-indicator-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"YELLOWWEB.ID\" \/>\n<meta property=\"article:published_time\" content=\"2018-12-14T06:50:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-11-25T09:38:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i0.wp.com\/www.yellowweb.id\/blog\/wp-content\/uploads\/2018\/12\/scroll-in.jpg?fit=1200%2C628&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"yellowweb\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"yellowweb\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/scroll-indicator-javascript\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/scroll-indicator-javascript\\\/\"},\"author\":{\"name\":\"yellowweb\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#\\\/schema\\\/person\\\/75188044e080844724e381ab6a5b9829\"},\"headline\":\"Scroll Indicator (JavaScript)\",\"datePublished\":\"2018-12-14T06:50:51+00:00\",\"dateModified\":\"2020-11-25T09:38:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/scroll-indicator-javascript\\\/\"},\"wordCount\":104,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/scroll-indicator-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/12\\\/scroll-in.jpg\",\"keywords\":[\"javascript\",\"jquery\",\"menu\",\"navigasi\",\"plugin\"],\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/scroll-indicator-javascript\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/scroll-indicator-javascript\\\/\",\"url\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/scroll-indicator-javascript\\\/\",\"name\":\"Scroll Indicator (JavaScript) - YELLOWWEB.ID\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/scroll-indicator-javascript\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/scroll-indicator-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/12\\\/scroll-in.jpg\",\"datePublished\":\"2018-12-14T06:50:51+00:00\",\"dateModified\":\"2020-11-25T09:38:08+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#\\\/schema\\\/person\\\/75188044e080844724e381ab6a5b9829\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/scroll-indicator-javascript\\\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/scroll-indicator-javascript\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/scroll-indicator-javascript\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/12\\\/scroll-in.jpg\",\"contentUrl\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/12\\\/scroll-in.jpg\",\"width\":1200,\"height\":628,\"caption\":\"Scroll Indicator\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/scroll-indicator-javascript\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Scroll Indicator (JavaScript)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/\",\"name\":\"YELLOWWEB.ID\",\"description\":\"Kursus Web Design | Kursus Web Programming | Mobile Web Apps | Digital Marketing\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#\\\/schema\\\/person\\\/75188044e080844724e381ab6a5b9829\",\"name\":\"yellowweb\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g\",\"caption\":\"yellowweb\"},\"sameAs\":[\"https:\\\/\\\/www.yellowweb.id\"],\"url\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/author\\\/yellowweb\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Scroll Indicator (JavaScript) - YELLOWWEB.ID","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.yellowweb.id\/blog\/scroll-indicator-javascript\/","og_locale":"en_GB","og_type":"article","og_title":"Scroll Indicator (JavaScript) - YELLOWWEB.ID","og_description":"Untuk artikel kali ini kita akan coba membuat efek loading konten dengan menggunakan JavaScript, jadi seperti ini cara kerjanya disaat kita melakukan scroll sebuah halaman web, kita memberikan indikator tambahan, untuk mengetahui sudah sejauh mana, posisi kita berada saat melakukan scroll halaman.","og_url":"https:\/\/www.yellowweb.id\/blog\/scroll-indicator-javascript\/","og_site_name":"YELLOWWEB.ID","article_published_time":"2018-12-14T06:50:51+00:00","article_modified_time":"2020-11-25T09:38:08+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/i0.wp.com\/www.yellowweb.id\/blog\/wp-content\/uploads\/2018\/12\/scroll-in.jpg?fit=1200%2C628&ssl=1","type":"image\/jpeg"}],"author":"yellowweb","twitter_card":"summary_large_image","twitter_misc":{"Written by":"yellowweb","Estimated reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.yellowweb.id\/blog\/scroll-indicator-javascript\/#article","isPartOf":{"@id":"https:\/\/www.yellowweb.id\/blog\/scroll-indicator-javascript\/"},"author":{"name":"yellowweb","@id":"https:\/\/www.yellowweb.id\/blog\/#\/schema\/person\/75188044e080844724e381ab6a5b9829"},"headline":"Scroll Indicator (JavaScript)","datePublished":"2018-12-14T06:50:51+00:00","dateModified":"2020-11-25T09:38:08+00:00","mainEntityOfPage":{"@id":"https:\/\/www.yellowweb.id\/blog\/scroll-indicator-javascript\/"},"wordCount":104,"commentCount":0,"image":{"@id":"https:\/\/www.yellowweb.id\/blog\/scroll-indicator-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2018\/12\/scroll-in.jpg","keywords":["javascript","jquery","menu","navigasi","plugin"],"articleSection":["JavaScript"],"inLanguage":"en-GB","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.yellowweb.id\/blog\/scroll-indicator-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.yellowweb.id\/blog\/scroll-indicator-javascript\/","url":"https:\/\/www.yellowweb.id\/blog\/scroll-indicator-javascript\/","name":"Scroll Indicator (JavaScript) - YELLOWWEB.ID","isPartOf":{"@id":"https:\/\/www.yellowweb.id\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.yellowweb.id\/blog\/scroll-indicator-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.yellowweb.id\/blog\/scroll-indicator-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2018\/12\/scroll-in.jpg","datePublished":"2018-12-14T06:50:51+00:00","dateModified":"2020-11-25T09:38:08+00:00","author":{"@id":"https:\/\/www.yellowweb.id\/blog\/#\/schema\/person\/75188044e080844724e381ab6a5b9829"},"breadcrumb":{"@id":"https:\/\/www.yellowweb.id\/blog\/scroll-indicator-javascript\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.yellowweb.id\/blog\/scroll-indicator-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.yellowweb.id\/blog\/scroll-indicator-javascript\/#primaryimage","url":"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2018\/12\/scroll-in.jpg","contentUrl":"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2018\/12\/scroll-in.jpg","width":1200,"height":628,"caption":"Scroll Indicator"},{"@type":"BreadcrumbList","@id":"https:\/\/www.yellowweb.id\/blog\/scroll-indicator-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.yellowweb.id\/blog\/"},{"@type":"ListItem","position":2,"name":"Scroll Indicator (JavaScript)"}]},{"@type":"WebSite","@id":"https:\/\/www.yellowweb.id\/blog\/#website","url":"https:\/\/www.yellowweb.id\/blog\/","name":"YELLOWWEB.ID","description":"Kursus Web Design | Kursus Web Programming | Mobile Web Apps | Digital Marketing","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.yellowweb.id\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/www.yellowweb.id\/blog\/#\/schema\/person\/75188044e080844724e381ab6a5b9829","name":"yellowweb","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/secure.gravatar.com\/avatar\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g","caption":"yellowweb"},"sameAs":["https:\/\/www.yellowweb.id"],"url":"https:\/\/www.yellowweb.id\/blog\/author\/yellowweb\/"}]}},"_links":{"self":[{"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/posts\/1085","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/comments?post=1085"}],"version-history":[{"count":8,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/posts\/1085\/revisions"}],"predecessor-version":[{"id":1299,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/posts\/1085\/revisions\/1299"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/media\/1093"}],"wp:attachment":[{"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/media?parent=1085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/categories?post=1085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/tags?post=1085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}