{"id":15171,"date":"2018-03-28T06:21:24","date_gmt":"2018-03-27T23:21:24","guid":{"rendered":"https:\/\/www.pugam.com\/?p=15171"},"modified":"2018-03-28T07:32:25","modified_gmt":"2018-03-28T00:32:25","slug":"mengenal-css-counter-incremental-dan-cara-menggunakannya","status":"publish","type":"post","link":"https:\/\/www.pugam.com\/15171\/mengenal-css-counter-incremental-dan-cara-menggunakannya\/","title":{"rendered":"Mengenal CSS Counter Incremental dan Cara Menggunakannya"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-15174\" src=\"https:\/\/img.pugam.com\/2018\/03\/Mengenal-CSS-Counter-Incremental-dan-Cara-Menggunakannya.jpg\" alt=\"Mengenal Css Counter Incremental Dan Cara Menggunakannya\" width=\"609\" height=\"252\" srcset=\"https:\/\/img.pugam.com\/2018\/03\/Mengenal-CSS-Counter-Incremental-dan-Cara-Menggunakannya.jpg 609w, https:\/\/img.pugam.com\/2018\/03\/Mengenal-CSS-Counter-Incremental-dan-Cara-Menggunakannya-388x161.jpg 388w\" sizes=\"(max-width: 609px) 100vw, 609px\" \/><\/p>\n<p>Jika HTML punya tag <code>&lt;ol&gt;<\/code> (ordered-list) yang berfungsi untuk membuat daftar terurut maka CSS pun memiliki fungsi serupa. Pada CSS, fungsi semacam ini disebut <strong>CSS Counters<\/strong>.<\/p>\n<p>Ada 3 properti pada CSS Counters:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">counter-reset: nama-counter;\r\ncounter-increment: nama-counter;\r\ncontent: counter(nama-counter, gaya penomoran);\r\n<\/pre>\n<p>Untuk dapat menggunakannya, Anda perlu menyertakan 3 properti tersebut pada elemen yang berbeda.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_45_2 counter-hierarchy ez-toc-counter ez-toc-white ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\">Daftar Isi<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.pugam.com\/15171\/mengenal-css-counter-incremental-dan-cara-menggunakannya\/#counter-reset\" title=\"counter-reset\">counter-reset<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.pugam.com\/15171\/mengenal-css-counter-incremental-dan-cara-menggunakannya\/#counter-increment\" title=\"counter-increment\">counter-increment<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.pugam.com\/15171\/mengenal-css-counter-incremental-dan-cara-menggunakannya\/#content\" title=\"content\">content<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.pugam.com\/15171\/mengenal-css-counter-incremental-dan-cara-menggunakannya\/#Contoh_Penggunaan\" title=\"Contoh Penggunaan\">Contoh Penggunaan<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"counter-reset\"><\/span>counter-reset<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Properti <code>counter-reset<\/code> digunakan untuk me-reset nilai dari counter. Properti ini harus disertakan pada <em>parent-element<\/em>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"counter-increment\"><\/span>counter-increment<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Properti <code>counter-increment<\/code> diisi dengan attribute nama counter. Properti ini harus disertakan pada elemen yang ingin Anda urutkan.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"content\"><\/span>content<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Properti <code>content<\/code> digunakan sebagai isi dari konten counter Anda. Properti ini disertakan pada elemen <a href=\"https:\/\/www.w3schools.com\/css\/css_pseudo_elements.asp\" class=\"external\" rel=\"nofollow\" target=\"_blank\"><strong>pseudo<\/strong><\/a> baik itu berupa <code>:before<\/code> atau <code>:after<\/code>. Gunakan pemisah koma untuk menyertakan attribute gaya penomoran.<\/p>\n<p>Contoh:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-linenumbers=\"false\">\/*Contoh properti \"content\"*\/\r\ncontent: counter(nama-counter, upper-alpha); \/*Jika gaya penomoran tidak ditentukan (tidak diisi), secara default akan dipilih gaya numeric (angka).*\/\r\n<\/pre>\n<p>Daftar gaya penomoran:<\/p>\n<ul>\n<li>default (1,2,3&#8230;)<\/li>\n<li>lower-alpha (a,b,c&#8230;)<\/li>\n<li>upper-alpha (A,B,C&#8230;)<\/li>\n<li>lower-greek (\u03b1,\u03b2&#8230;)<\/li>\n<li>lower-roman (i,ii,iii&#8230;)<\/li>\n<li>upper-roman (I,II,III&#8230;)<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Contoh_Penggunaan\"><\/span>Contoh Penggunaan<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Saya ingin memberikan penomoran pada tag <code>&lt;h2&gt;<\/code> di dalam sebuah halaman menggunakan CSS Counters. Pertama, saya akan membuat struktur HTML nya terlebih dahulu:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;body&gt;\r\n  &lt;div id=\"primary-content\"&gt;\r\n    &lt;h2&gt;Urutan Pertama&lt;\/h2&gt;\r\n    &lt;h2&gt;Urutan Kedua&lt;\/h2&gt;\r\n    &lt;h2&gt;Urutan Ketiga&lt;\/h2&gt;\r\n    &lt;h2&gt;Urutan Keempat&lt;\/h2&gt;\r\n    &lt;h2&gt;Urutan Kelima&lt;\/h2&gt;\r\n  &lt;\/div&gt;\r\n  &lt;div id=\"secondary-content\"&gt;\r\n    &lt;h2&gt;Urutan Pertama&lt;\/h2&gt;\r\n    &lt;h2&gt;Urutan Kedua&lt;\/h2&gt;\r\n    &lt;h2&gt;Urutan Ketiga&lt;\/h2&gt;\r\n    &lt;h2&gt;Urutan Keempat&lt;\/h2&gt;\r\n    &lt;h2&gt;Urutan Kelima&lt;\/h2&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/body&gt;<\/pre>\n<p>Dalam contoh kode di atas, saya membuat dua blok elemen yang masing-masing memiliki elemen dengan tag <code>&lt;h2&gt;<\/code> di dalamnya.<\/p>\n<p>Bagaimana caranya, agar penomoran pada blok elemen pertama tidak berlanjut pada blok elemen kedua. Dengan kata lain, masing-masing blok elemen memiliki sistem penomorannya sendiri.<\/p>\n<p>Berikut kode CSS nya:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">body {\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n#primary-content {\r\n  width: 50%;\r\n  counter-reset: counter-h2;\r\n  display:inline-block;\r\n  float: left;\r\n}\r\n\r\n#primary-content h2 {\r\n  counter-increment: counter-h2;\r\n  padding: 0 0 0 50px;\r\n  position: relative;\r\n}\r\n\r\n#primary-content h2:before {\r\n  content: counter(counter-h2);\r\n  padding: 0px 13px;\r\n  background: red;\r\n  color:#ffffff;\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n}\r\n\r\n#secondary-content {\r\n  width: 50%;\r\n  counter-reset: counter-h2-a;\r\n  display:inline-block;\r\n  float: right;\r\n}\r\n\r\n#secondary-content h2 {\r\n  counter-increment: counter-h2-a;\r\n  padding: 0 0 0 50px;\r\n  position: relative;\r\n}\r\n\r\n#secondary-content h2:before {\r\n  content: counter(counter-h2-a, upper-alpha);\r\n  padding: 0px 13px;\r\n  background: blue;\r\n  color:#ffffff;\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n}<\/pre>\n<p>Berikut hasilnya:<\/p>\n<p><p data-height=\"500\" data-embed-version=\"1\" data-theme-id=\"0\" data-slug-hash=\"vRpXeJ\" data-default-tab=\"result\" data-user=\"vRpXeJ\" data-preview=\"true\" class='codepen'>See the Pen on <a href='http:\/\/codepen.io' class=\"external\" rel=\"nofollow\" target=\"_blank\">CodePen<\/a>.<\/p><script async src=\"\/\/assets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>Silakan dipahami lebih lanjut, jika ada pertanyaan gunakan kolom komentar.<\/p>\n<p><strong>Referensi:<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/www.w3.org\/TR\/css-content-3\/#counters\" class=\"external\" rel=\"nofollow\" target=\"_blank\">CSS3<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Lists_and_Counters\/Using_CSS_counters?redirectlocale=en-US&amp;redirectslug=CSS_Counters\" class=\"external\" rel=\"nofollow\" target=\"_blank\">MDN web docs<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"Jika HTML punya tag &lt;ol&gt; (ordered-list) yang berfungsi untuk membuat daftar terurut maka CSS pun memiliki fungsi serupa. Pada CSS, \n<a class=\"moretag\" href=\"https:\/\/www.pugam.com\/15171\/mengenal-css-counter-incremental-dan-cara-menggunakannya\/\"> ...<\/a>","protected":false},"author":3,"featured_media":15174,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","two_page_speed":[]},"categories":[2105],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Mengenal CSS Counter Incremental dan Cara Menggunakannya | Pugam<\/title>\n<meta name=\"description\" content=\"Mengenal CSS Counter Incremental dan Cara Menggunakannya | Mengenal CSS Counter Incremental dan Cara Menggunakannya\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.pugam.com\/15171\/mengenal-css-counter-incremental-dan-cara-menggunakannya\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mengenal CSS Counter Incremental dan Cara Menggunakannya | Pugam\" \/>\n<meta property=\"og:description\" content=\"Mengenal CSS Counter Incremental dan Cara Menggunakannya | Mengenal CSS Counter Incremental dan Cara Menggunakannya\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.pugam.com\/15171\/mengenal-css-counter-incremental-dan-cara-menggunakannya\/\" \/>\n<meta property=\"og:site_name\" content=\"Pugam\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/pugamdotcom\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/pugamdotcom\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-03-27T23:21:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-03-28T00:32:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/img.pugam.com\/2018\/03\/Mengenal-CSS-Counter-Incremental-dan-Cara-Menggunakannya.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"609\" \/>\n\t<meta property=\"og:image:height\" content=\"252\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Biralie Nugraha\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Biralie Nugraha\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.pugam.com\/15171\/mengenal-css-counter-incremental-dan-cara-menggunakannya\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.pugam.com\/15171\/mengenal-css-counter-incremental-dan-cara-menggunakannya\/\"},\"author\":{\"name\":\"Biralie Nugraha\",\"@id\":\"https:\/\/www.pugam.com\/#\/schema\/person\/b903cfe7ebcaa1948d7db8622a7d056c\"},\"headline\":\"Mengenal CSS Counter Incremental dan Cara Menggunakannya\",\"datePublished\":\"2018-03-27T23:21:24+00:00\",\"dateModified\":\"2018-03-28T00:32:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.pugam.com\/15171\/mengenal-css-counter-incremental-dan-cara-menggunakannya\/\"},\"wordCount\":223,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.pugam.com\/#\/schema\/person\/4226929fc3ad7c26a33895e82a9bbcd4\"},\"articleSection\":[\"Web Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.pugam.com\/15171\/mengenal-css-counter-incremental-dan-cara-menggunakannya\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.pugam.com\/15171\/mengenal-css-counter-incremental-dan-cara-menggunakannya\/\",\"url\":\"https:\/\/www.pugam.com\/15171\/mengenal-css-counter-incremental-dan-cara-menggunakannya\/\",\"name\":\"Mengenal CSS Counter Incremental dan Cara Menggunakannya | Pugam\",\"isPartOf\":{\"@id\":\"https:\/\/www.pugam.com\/#website\"},\"datePublished\":\"2018-03-27T23:21:24+00:00\",\"dateModified\":\"2018-03-28T00:32:25+00:00\",\"description\":\"Mengenal CSS Counter Incremental dan Cara Menggunakannya | Mengenal CSS Counter Incremental dan Cara Menggunakannya\",\"breadcrumb\":{\"@id\":\"https:\/\/www.pugam.com\/15171\/mengenal-css-counter-incremental-dan-cara-menggunakannya\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.pugam.com\/15171\/mengenal-css-counter-incremental-dan-cara-menggunakannya\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.pugam.com\/15171\/mengenal-css-counter-incremental-dan-cara-menggunakannya\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.pugam.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Development\",\"item\":\"https:\/\/www.pugam.com\/.\/web-development\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Mengenal CSS Counter Incremental dan Cara Menggunakannya\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.pugam.com\/#website\",\"url\":\"https:\/\/www.pugam.com\/\",\"name\":\"Pugam\",\"description\":\"Techno Guide\",\"publisher\":{\"@id\":\"https:\/\/www.pugam.com\/#\/schema\/person\/4226929fc3ad7c26a33895e82a9bbcd4\"},\"alternateName\":\"Pugam.com\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.pugam.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/www.pugam.com\/#\/schema\/person\/4226929fc3ad7c26a33895e82a9bbcd4\",\"name\":\"Asterix\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.pugam.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/img.pugam.com\/2018\/11\/Rendy-Image-Profile.jpg\",\"contentUrl\":\"https:\/\/img.pugam.com\/2018\/11\/Rendy-Image-Profile.jpg\",\"width\":750,\"height\":750,\"caption\":\"Asterix\"},\"logo\":{\"@id\":\"https:\/\/www.pugam.com\/#\/schema\/person\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/pugamdotcom\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.pugam.com\/#\/schema\/person\/b903cfe7ebcaa1948d7db8622a7d056c\",\"name\":\"Biralie Nugraha\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.pugam.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/img.pugam.com\/2018\/02\/avatar1.png\",\"contentUrl\":\"https:\/\/img.pugam.com\/2018\/02\/avatar1.png\",\"caption\":\"Biralie Nugraha\"},\"sameAs\":[\"https:\/\/www.facebook.com\/pugamdotcom\/\"],\"url\":\"https:\/\/www.pugam.com\/profile\/anggrisixpack9aydftt186\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Mengenal CSS Counter Incremental dan Cara Menggunakannya | Pugam","description":"Mengenal CSS Counter Incremental dan Cara Menggunakannya | Mengenal CSS Counter Incremental dan Cara Menggunakannya","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.pugam.com\/15171\/mengenal-css-counter-incremental-dan-cara-menggunakannya\/","og_locale":"en_US","og_type":"article","og_title":"Mengenal CSS Counter Incremental dan Cara Menggunakannya | Pugam","og_description":"Mengenal CSS Counter Incremental dan Cara Menggunakannya | Mengenal CSS Counter Incremental dan Cara Menggunakannya","og_url":"https:\/\/www.pugam.com\/15171\/mengenal-css-counter-incremental-dan-cara-menggunakannya\/","og_site_name":"Pugam","article_publisher":"https:\/\/www.facebook.com\/pugamdotcom\/","article_author":"https:\/\/www.facebook.com\/pugamdotcom\/","article_published_time":"2018-03-27T23:21:24+00:00","article_modified_time":"2018-03-28T00:32:25+00:00","og_image":[{"width":609,"height":252,"url":"https:\/\/img.pugam.com\/2018\/03\/Mengenal-CSS-Counter-Incremental-dan-Cara-Menggunakannya.jpg","type":"image\/jpeg"}],"author":"Biralie Nugraha","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Biralie Nugraha","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.pugam.com\/15171\/mengenal-css-counter-incremental-dan-cara-menggunakannya\/#article","isPartOf":{"@id":"https:\/\/www.pugam.com\/15171\/mengenal-css-counter-incremental-dan-cara-menggunakannya\/"},"author":{"name":"Biralie Nugraha","@id":"https:\/\/www.pugam.com\/#\/schema\/person\/b903cfe7ebcaa1948d7db8622a7d056c"},"headline":"Mengenal CSS Counter Incremental dan Cara Menggunakannya","datePublished":"2018-03-27T23:21:24+00:00","dateModified":"2018-03-28T00:32:25+00:00","mainEntityOfPage":{"@id":"https:\/\/www.pugam.com\/15171\/mengenal-css-counter-incremental-dan-cara-menggunakannya\/"},"wordCount":223,"commentCount":0,"publisher":{"@id":"https:\/\/www.pugam.com\/#\/schema\/person\/4226929fc3ad7c26a33895e82a9bbcd4"},"articleSection":["Web Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.pugam.com\/15171\/mengenal-css-counter-incremental-dan-cara-menggunakannya\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.pugam.com\/15171\/mengenal-css-counter-incremental-dan-cara-menggunakannya\/","url":"https:\/\/www.pugam.com\/15171\/mengenal-css-counter-incremental-dan-cara-menggunakannya\/","name":"Mengenal CSS Counter Incremental dan Cara Menggunakannya | Pugam","isPartOf":{"@id":"https:\/\/www.pugam.com\/#website"},"datePublished":"2018-03-27T23:21:24+00:00","dateModified":"2018-03-28T00:32:25+00:00","description":"Mengenal CSS Counter Incremental dan Cara Menggunakannya | Mengenal CSS Counter Incremental dan Cara Menggunakannya","breadcrumb":{"@id":"https:\/\/www.pugam.com\/15171\/mengenal-css-counter-incremental-dan-cara-menggunakannya\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.pugam.com\/15171\/mengenal-css-counter-incremental-dan-cara-menggunakannya\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.pugam.com\/15171\/mengenal-css-counter-incremental-dan-cara-menggunakannya\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.pugam.com\/"},{"@type":"ListItem","position":2,"name":"Web Development","item":"https:\/\/www.pugam.com\/.\/web-development\/"},{"@type":"ListItem","position":3,"name":"Mengenal CSS Counter Incremental dan Cara Menggunakannya"}]},{"@type":"WebSite","@id":"https:\/\/www.pugam.com\/#website","url":"https:\/\/www.pugam.com\/","name":"Pugam","description":"Techno Guide","publisher":{"@id":"https:\/\/www.pugam.com\/#\/schema\/person\/4226929fc3ad7c26a33895e82a9bbcd4"},"alternateName":"Pugam.com","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.pugam.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/www.pugam.com\/#\/schema\/person\/4226929fc3ad7c26a33895e82a9bbcd4","name":"Asterix","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.pugam.com\/#\/schema\/person\/image\/","url":"https:\/\/img.pugam.com\/2018\/11\/Rendy-Image-Profile.jpg","contentUrl":"https:\/\/img.pugam.com\/2018\/11\/Rendy-Image-Profile.jpg","width":750,"height":750,"caption":"Asterix"},"logo":{"@id":"https:\/\/www.pugam.com\/#\/schema\/person\/image\/"},"sameAs":["https:\/\/www.facebook.com\/pugamdotcom\/"]},{"@type":"Person","@id":"https:\/\/www.pugam.com\/#\/schema\/person\/b903cfe7ebcaa1948d7db8622a7d056c","name":"Biralie Nugraha","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.pugam.com\/#\/schema\/person\/image\/","url":"https:\/\/img.pugam.com\/2018\/02\/avatar1.png","contentUrl":"https:\/\/img.pugam.com\/2018\/02\/avatar1.png","caption":"Biralie Nugraha"},"sameAs":["https:\/\/www.facebook.com\/pugamdotcom\/"],"url":"https:\/\/www.pugam.com\/profile\/anggrisixpack9aydftt186\/"}]}},"jetpack_featured_media_url":"https:\/\/img.pugam.com\/2018\/03\/Mengenal-CSS-Counter-Incremental-dan-Cara-Menggunakannya.jpg","jetpack-related-posts":[{"id":7162,"url":"https:\/\/www.pugam.com\/7162\/cara-aktivasi-modem-smartfren-mifi-andromax\/","url_meta":{"origin":15171,"position":0},"title":"Cara Aktivasi Modem Smartfren Mifi Andromax","date":"2 Jan 2017","format":false,"excerpt":"Smartfren termasuk penyedia layanan telekomunikasi dengan penyebaran jaringan 4G LTE yang paling luas di Indonesia. Selain melalui ponsel Andromax, layanan 4G LTE yang ditawarkan Smartfren dapat kita nikmati melalui perangkat MiFi. Sejauh ini ada 5 model\u00a0MiFi Andromax yang ditawarkan oleh Smartfren, diantaranya M2P, M2S, M2Y, M3Y, dan M3Z. Dua model\u2026","rel":"","context":"In &quot;Internet&quot;","img":{"alt_text":"Cara Aktivasi Modem Smartfren MIFI Andromax","src":"https:\/\/i0.wp.com\/img.pugam.com\/2016\/12\/SnapDraw15.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":6917,"url":"https:\/\/www.pugam.com\/6917\/upgrade-kartu-sim-telkomsel-ke-4g-terkendala-data-perbankan\/","url_meta":{"origin":15171,"position":1},"title":"Upgrade Kartu SIM Telkomsel ke 4G Terkendala Data Perbankan","date":"30 Dec 2016","format":false,"excerpt":"Sebelum Anda lanjut membaca ke bawah, kesimpulan untuk tulisan kali ini: \"Meskipun Anda datang ke GraPARI, kartu telkomsel yang terintegrasi\/digunakan untuk layanan perbankan tidak bisa di upgrade ke 4G. Itu berdasarkan apa yang saya alami pada bulan Desember 2016, untuk kebijakan yang sekarang saya kurang tahu.\" PUGAM.com - Dalam rangka\u2026","rel":"","context":"In &quot;Internet&quot;","img":{"alt_text":"Upgrade Kartu SIM Telkomsel ke 4G Terkendala Data Perbankan","src":"https:\/\/i0.wp.com\/img.pugam.com\/2016\/12\/IMG20161223095544.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":15656,"url":"https:\/\/www.pugam.com\/15656\/cara-mengetahui-lagu-musik-pada-sebuah-video-youtube\/","url_meta":{"origin":15171,"position":2},"title":"9 Cara Mengetahui Lagu\/Musik pada Sebuah Video YouTube","date":"8 Apr 2018","format":false,"excerpt":"Untuk sebagian besar video lagu dan musik, tidaklah sulit bagi kita mencari tahu informasi terkait lagu\/musik tersebut karena sudah pasti sang pengunggah akan menuliskan informasi tersebut di judul video atau setidaknya di bagian deskripsi. Bagaimana dengan video-video non-musik, video yang menyertakan musik sebagai latarnya dan tidak ada satu pun informasi\u2026","rel":"","context":"In &quot;Internet&quot;","img":{"alt_text":"Cara Mengetahui Lagu Atau Musik Pada Sebuah Video Youtube","src":"https:\/\/i0.wp.com\/img.pugam.com\/2018\/04\/Cara-Mengetahui-Lagu-atau-Musik-pada-Sebuah-Video-YouTube.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":16288,"url":"https:\/\/www.pugam.com\/16288\/download-whatsapp-plus-terbaru-2023\/","url_meta":{"origin":15171,"position":3},"title":"Download WhatsApp Plus Versi Terbaru v10.03 (Anti-BAN) 2024","date":"9 Jun 2018","format":false,"excerpt":"Terakhir diperbarui 2024 Versi saat ini 10.03 Ukuran file 65 MB Pengembang Sam Mods System requirements Android 4.0+ Apa Itu WhatsApp Plus? Mungkin Anda sudah mendengar nama ini jauh sebelum banyak bermunculan MOD WhatsApp lainnya seperti GBWhatsApp dan OGWhatsApp. WhatsApp Plus adalah MOD pertama untuk aplikasi WhatsApp Android yang\u2026","rel":"","context":"In &quot;Android&quot;","img":{"alt_text":"Download Whatsapp Plus Terbaru","src":"https:\/\/i0.wp.com\/img.pugam.com\/2018\/06\/Download-WhatsApp-Plus-Terbaru.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":18766,"url":"https:\/\/www.pugam.com\/18766\/penjelasan-lengkap-menu-menu-di-gbwhatsapp\/","url_meta":{"origin":15171,"position":4},"title":"Penjelasan Lengkap Menu-Menu di GBWhatsApp","date":"29 Oct 2018","format":false,"excerpt":"[adinserter block=\"8\"] Mungkin banyak menu di GBWhatsApp yang masih belum Anda ketahui fungsi serta kegunaannya. Di artikel kali ini saya akan coba menjelaskan semuanya. Semoga terbantu! DAFTAR ISI Penjelasan Layar Utama\/Beranda Penjelasan Menu Utama Penjelasan Menu Privasi Penjelasan menu Floating Button Penjelasan menu GB Settings GBWHATSAPP GBWHATSAPP UPDATE SOCIAL MEDIA\u2026","rel":"","context":"In &quot;Android&quot;","img":{"alt_text":"Penjelasan Lengkap Menu Menu Di Gbwhatsapp","src":"https:\/\/i0.wp.com\/img.pugam.com\/2018\/10\/Penjelasan-Lengkap-Menu-Menu-di-GBWhatsApp.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":7231,"url":"https:\/\/www.pugam.com\/7231\/cara-setting-modem-smartfren-mifi-andromax-m3y-m3z\/","url_meta":{"origin":15171,"position":5},"title":"Cara Setting Modem Smartfren Mifi Andromax M3Y &#038; M3Z","date":"4 Jan 2017","format":false,"excerpt":"Masih bingung dengan pengaturan modem Smartfren MiFi Andromax M3Y atau M3Z yang baru Anda beli? Jangan khawatir, artikel kali ini bisa menjadi panduan bagi Anda. Namun, sebelum itu pastikan Anda telah mengaktivasi kartu Smartfren yang ada di dalamnya. Baca: Cara Aktivasi Modem Smartfren MiFi Andromax. Banyak juga yang bertanya tentang\u2026","rel":"","context":"In &quot;Internet&quot;","img":{"alt_text":"Konfigurasi Modem Smartfren MIFI Andromax M3Y & M3Z","src":"https:\/\/i0.wp.com\/img.pugam.com\/2017\/01\/SnapDraw18.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.pugam.com\/wp-json\/wp\/v2\/posts\/15171"}],"collection":[{"href":"https:\/\/www.pugam.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.pugam.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.pugam.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pugam.com\/wp-json\/wp\/v2\/comments?post=15171"}],"version-history":[{"count":0,"href":"https:\/\/www.pugam.com\/wp-json\/wp\/v2\/posts\/15171\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.pugam.com\/wp-json\/wp\/v2\/media\/15174"}],"wp:attachment":[{"href":"https:\/\/www.pugam.com\/wp-json\/wp\/v2\/media?parent=15171"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pugam.com\/wp-json\/wp\/v2\/categories?post=15171"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}