{"id":18372,"date":"2013-10-16T21:01:42","date_gmt":"2013-10-16T13:01:42","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=18372"},"modified":"2025-04-03T22:27:03","modified_gmt":"2025-04-03T14:27:03","slug":"css-scroll-bar","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css-scroll-bar\/","title":{"rendered":"Customizing Browser Scroll Bar With CSS \/ jQuery"},"content":{"rendered":"<p>Windows, OS X and Linux have their own style for the scroll bar as you can see in the following screenshot. This in return could lead to undesired results and consistencies for your design.<\/p>\n<p>In this post we will see what we can do to customize the scroll bar look so that it can sit well with your overall design.<\/p>\n<p class=\"note\"><strong>Recommended Reading:<\/strong> <a rel=\"nofollow\" href=\"https:\/\/www.hongkiat.com\/blog\/css-sticky-position\/\">Sticky Position (Bar) with CSS or jQuery<\/a><\/p>\n<h2>Internet Explorer 5.5<\/h2>\n<p>Back in IE 5.5, the Internet Explorer team introduced a set of non-standard CSS properties that allows us to style the scroll bar, as follows.<\/p>\n<pre>\r\nbody {\r\n\tscrollbar-face-color: #000000;\r\n\tscrollbar-shadow-color: #2D2C4D;\r\n\tscrollbar-highlight-color:#7D7E94;\r\n\tscrollbar-3dlight-color: #7D7E94;\r\n\tscrollbar-darkshadow-color: #2D2C4D;\r\n\tscrollbar-track-color: #7D7E94;\r\n\tscrollbar-arrow-color: #C1C1D1;\t\r\n}\r\n<\/pre>\n<p>There is even a software to generate these style rules. However, these properties do not totally control the scrollbar, only the colors. In addition, these properties has been dropped since Internet Explorer 6, so they are no longer applicable today.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-scroll-bar\/color-designer.jpg\" width=\"500\" height=\"300\"><\/p>\n<h2>Using jQuery Plugin<\/h2>\n<p>There are a number of jQuery plugins to customize the scroll bar. One that is really popular is <strong><a href=\"http:\/\/jscrollpane.kelvinluck.com\/\" rel=\"nofollow\">jScrollPane<\/a><\/strong>. jScrollPane converts the scrollbar into HTML structure so it can be fully customized through CSS, and it also has better cross-browser support. Furthermore, with the APIs provided you can also set scroll bar behaviour on certain mouse events.<\/p>\n<p>The only downside is that it relies on a number of other JavaScript libraries: jQuery, <a href=\"https:\/\/github.com\/jquery\/jquery-mousewheel\" rel=\"nofollow\">Mousewheel<\/a>. Technically, having to load a lot JavaScript combined could affect your website performance. But at the moment, using jQuery is the only best option if you are concerned about browser support.<\/p>\n<p><strong>Alternative jQuery Plugins<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/code.google.com\/p\/jquery-nicescroll\/\" rel=\"nofollow\">Nice Scroller<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/jamesflorentino\/nanoScrollerJS\" rel=\"nofollow\">Nano Scroller<\/a><\/li>\n<\/ul>\n<h2>Webkit CSS Properties<\/h2>\n<p><strong>Webkit<\/strong> introduced its proprietary <a href=\"https:\/\/www.webkit.org\/blog\/363\/styling-scrollbars\/\" rel=\"nofollow\">CSS scrollbar selectors, as follows<\/a>.<\/p>\n<pre>\r\n::-webkit-scrollbar\r\n::-webkit-scrollbar-button\r\n::-webkit-scrollbar-track\r\n::-webkit-scrollbar-track-piece  \r\n::-webkit-scrollbar-thumb\r\n::-webkit-scrollbar-corner\r\n::-webkit-resizer\r\n<\/pre>\n<p>These selectors allow you to customize the scrollbar styles in browsers powered with Webkit such as Google Chrome, Safari, and Opera. Here is a basic example of the implementation.<\/p>\n<pre>\r\n::-webkit-scrollbar {\r\n    width: 12px;\r\n}\r\n::-webkit-scrollbar-track {\r\n    background-color: #eaeaea;\r\n    border-left: 1px solid #ccc;\r\n}\r\n::-webkit-scrollbar-thumb {\r\n    background-color: #ccc;\r\n}\r\n::-webkit-scrollbar-thumb:hover {\r\n\tbackground-color: #aaa;\r\n}\r\n<\/pre>\n<ul class=\"download download-2c\">\n<li><a href=\"https:\/\/hongkiat.github.io\/css-scroll-bar\/\">View Demo<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/hongkiat\/css-scroll-bar\/\">Download Source<\/a><\/li>\n<\/ul>\n<h2>Examples<\/h2>\n<p><a href=\"http:\/\/www.gmail.com\/\" rel=\"nofollow\">Gmail<\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-scroll-bar\/gmail.jpg\" width=\"500\" height=\"300\"><\/p>\n<p><a href=\"https:\/\/www.facebook.com\/\" rel=\"nofollow\">Facebook<\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-scroll-bar\/facebook.jpg\" width=\"500\" height=\"300\"><\/p>\n<p><a href=\"https:\/\/outlook.live.com\/owa\/\" rel=\"nofollow\">Outlook<\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-scroll-bar\/outlook.jpg\" width=\"500\" height=\"300\"><\/p>\n<p><a href=\"https:\/\/codepen.io\/\" rel=\"nofollow\">Codepen<\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-scroll-bar\/codepen.jpg\" width=\"500\" height=\"300\"><\/p>\n<p><a href=\"http:\/\/thenextweb.com\/\" rel=\"nofollow\">The Next Web<\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-scroll-bar\/tnw.jpg\" width=\"500\" height=\"300\"><\/p>","protected":false},"excerpt":{"rendered":"<p>Windows, OS X and Linux have their own style for the scroll bar as you can see in the following screenshot. This in return could lead to undesired results and consistencies for your design. In this post we will see what we can do to customize the scroll bar look so that it can sit&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392,352],"tags":[507,4501,911],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Customizing Browser Scroll Bar With CSS \/ jQuery - Hongkiat<\/title>\n<meta name=\"description\" content=\"Windows, OS X and Linux have their own style for the scroll bar as you can see in the following screenshot. This in return could lead to undesired results\" \/>\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.hongkiat.com\/blog\/css-scroll-bar\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Customizing Browser Scroll Bar With CSS \/ jQuery\" \/>\n<meta property=\"og:description\" content=\"Windows, OS X and Linux have their own style for the scroll bar as you can see in the following screenshot. This in return could lead to undesired results\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/css-scroll-bar\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2013-10-16T13:01:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T14:27:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/css-scroll-bar\/color-designer.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-scroll-bar\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-scroll-bar\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Customizing Browser Scroll Bar With CSS \\\/ jQuery\",\"datePublished\":\"2013-10-16T13:01:42+00:00\",\"dateModified\":\"2025-04-03T14:27:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-scroll-bar\\\/\"},\"wordCount\":308,\"commentCount\":16,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-scroll-bar\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-scroll-bar\\\/color-designer.jpg\",\"keywords\":[\"CSS\",\"CSS Tutorials\",\"jQuery\"],\"articleSection\":[\"Coding\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-scroll-bar\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-scroll-bar\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-scroll-bar\\\/\",\"name\":\"Customizing Browser Scroll Bar With CSS \\\/ jQuery - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-scroll-bar\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-scroll-bar\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-scroll-bar\\\/color-designer.jpg\",\"datePublished\":\"2013-10-16T13:01:42+00:00\",\"dateModified\":\"2025-04-03T14:27:03+00:00\",\"description\":\"Windows, OS X and Linux have their own style for the scroll bar as you can see in the following screenshot. This in return could lead to undesired results\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-scroll-bar\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-scroll-bar\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-scroll-bar\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-scroll-bar\\\/color-designer.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-scroll-bar\\\/color-designer.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-scroll-bar\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Customizing Browser Scroll Bar With CSS \\\/ jQuery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Customizing Browser Scroll Bar With CSS \/ jQuery - Hongkiat","description":"Windows, OS X and Linux have their own style for the scroll bar as you can see in the following screenshot. This in return could lead to undesired results","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.hongkiat.com\/blog\/css-scroll-bar\/","og_locale":"en_US","og_type":"article","og_title":"Customizing Browser Scroll Bar With CSS \/ jQuery","og_description":"Windows, OS X and Linux have their own style for the scroll bar as you can see in the following screenshot. This in return could lead to undesired results","og_url":"https:\/\/www.hongkiat.com\/blog\/css-scroll-bar\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2013-10-16T13:01:42+00:00","article_modified_time":"2025-04-03T14:27:03+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/css-scroll-bar\/color-designer.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/css-scroll-bar\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-scroll-bar\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Customizing Browser Scroll Bar With CSS \/ jQuery","datePublished":"2013-10-16T13:01:42+00:00","dateModified":"2025-04-03T14:27:03+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-scroll-bar\/"},"wordCount":308,"commentCount":16,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-scroll-bar\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-scroll-bar\/color-designer.jpg","keywords":["CSS","CSS Tutorials","jQuery"],"articleSection":["Coding","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/css-scroll-bar\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/css-scroll-bar\/","url":"https:\/\/www.hongkiat.com\/blog\/css-scroll-bar\/","name":"Customizing Browser Scroll Bar With CSS \/ jQuery - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-scroll-bar\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-scroll-bar\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-scroll-bar\/color-designer.jpg","datePublished":"2013-10-16T13:01:42+00:00","dateModified":"2025-04-03T14:27:03+00:00","description":"Windows, OS X and Linux have their own style for the scroll bar as you can see in the following screenshot. This in return could lead to undesired results","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-scroll-bar\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/css-scroll-bar\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/css-scroll-bar\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/css-scroll-bar\/color-designer.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-scroll-bar\/color-designer.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/css-scroll-bar\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Customizing Browser Scroll Bar With CSS \/ jQuery"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-4Mk","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18372","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=18372"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18372\/revisions"}],"predecessor-version":[{"id":73454,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18372\/revisions\/73454"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=18372"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=18372"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=18372"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=18372"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}