{"id":15649,"date":"2018-04-07T12:42:06","date_gmt":"2018-04-07T05:42:06","guid":{"rendered":"https:\/\/www.pugam.com\/?p=15649"},"modified":"2020-08-06T09:20:59","modified_gmt":"2020-08-06T02:20:59","slug":"membuat-fungsi-resizeable-font-dengan-jquery","status":"publish","type":"post","link":"https:\/\/www.pugam.com\/15649\/membuat-fungsi-resizeable-font-dengan-jquery\/","title":{"rendered":"Membuat Fungsi Resizeable Font dengan jQuery"},"content":{"rendered":"<div id=\"attachment_15653\" class=\"wp-caption aligncenter\" style=\"width: 760px\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-15653\" src=\"https:\/\/img.pugam.com\/2018\/04\/Membuat-Fungsi-Resizeable-Font-dengan-jQuery.jpg\" alt=\"Membuat Fungsi Resizeable Font Dengan Jquery\" width=\"750\" height=\"434\" srcset=\"https:\/\/img.pugam.com\/2018\/04\/Membuat-Fungsi-Resizeable-Font-dengan-jQuery.jpg 750w, https:\/\/img.pugam.com\/2018\/04\/Membuat-Fungsi-Resizeable-Font-dengan-jQuery-380x220.jpg 380w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><p class=\"wp-caption-text\">Fungsi Resizeable Font di situs Okezone \/ via <a href=\"http:\/\/okezone.com\" class=\"external\" rel=\"nofollow\" target=\"_blank\">okezone.com<\/a><\/p><\/div>\n<p>Gambar di atas saya ambil dari situs <a href=\"https:\/\/techno.okezone.com\/read\/2018\/01\/24\/207\/1849442\/android-oreo-kini-bisa-tunjukkan-kecepatan-wifi\" class=\"external\" rel=\"nofollow\" target=\"_blank\">techno.okezone.com<\/a>. Jika diperhatikan, okezone.com menyediakan fungsi <em>resizeable font<\/em>, di mana pengunjung atau <em>user<\/em> dapat memilih atau menyesuaikan ukuran huruf konten utama.<\/p>\n<p>Terinspirasi dari hal tersebut, saya ingin coba membuat fungsi serupa menggunakan jQuery. Cara ini nantinya bisa diterapkan juga di website atau blog Anda masing-masing.<\/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\/15649\/membuat-fungsi-resizeable-font-dengan-jquery\/#Prinsip_Dasar\" title=\"Prinsip Dasar\">Prinsip Dasar<\/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\/15649\/membuat-fungsi-resizeable-font-dengan-jquery\/#Struktur_HTML\" title=\"Struktur HTML\">Struktur HTML<\/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\/15649\/membuat-fungsi-resizeable-font-dengan-jquery\/#CSS\" title=\"CSS\">CSS<\/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\/15649\/membuat-fungsi-resizeable-font-dengan-jquery\/#jQuery\" title=\"jQuery\">jQuery<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.pugam.com\/15649\/membuat-fungsi-resizeable-font-dengan-jquery\/#Khusus_Pengguna_WordPress\" title=\"Khusus Pengguna WordPress\">Khusus Pengguna WordPress<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Prinsip_Dasar\"><\/span>Prinsip Dasar<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Prinsip dasar dari fungsi ini sangat sederhana, Anda hanya perlu menargetkan huruf\/tulisan yang ada pada sebuah area lalu mengubah ukurannya ketika ada aksi tertentu.<\/p>\n<p>Dalam hal ini, aksi yang dipilih adalah ketika &#8216;tombol&#8217; berlabel <strong>A<\/strong> di klik. Ada 3 &#8216;tombol&#8217;, yaitu untuk huruf kecil, huruf normal, dan huruf besar.<\/p>\n<p>Kenapa saya menulis dengan tanda petik &#8216;tombol&#8217;?<\/p>\n<p>Karena jika dilihat dari struktur HTML nya, ketiganya bukan merupakan tombol. Dengan kata lain, tiga elemen ini tidak dibuat dengan menggunakan tag <code>&lt;button&gt;<\/code> melainkan\u00a0 <code>&lt;a&gt;<\/code> <strong>anchor<\/strong>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-15654\" src=\"https:\/\/img.pugam.com\/2018\/04\/Membuat-Fungsi-Resizeable-Font-dengan-jQuery-1.jpg\" alt=\"Membuat Fungsi Resizeable Font Dengan Jquery 1\" width=\"205\" height=\"55\" \/>Dari sini, saya akan menyebutnya <strong>anchor<\/strong> bukan <strong>tombol<\/strong> mudah-mudahan Anda tidak bingung.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Struktur_HTML\"><\/span>Struktur HTML<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Di sini, HTML dan CSS hanya untuk keperluan demo saja jadi jangan fokus ke bagian ini, Anda hanya perlu mempelajari fungsi jQuery yang saya gunakan.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;body&gt;\r\n  &lt;div id=\"wrapper\"&gt;\r\n    &lt;div id=\"container\"&gt;\r\n      &lt;div class=\"title\"&gt;\r\n        &lt;h1&gt;Android Oreo Kini Bisa Tunjukkan Kecepatan WiFi&lt;\/h1&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"meta\"&gt;\r\n        &lt;div class=\"meta-description\"&gt;\r\n          &lt;span class=\"author\"&gt;\r\n            Lely Maulida\r\n          &lt;\/span&gt;\r\n          &lt;span class=\"date\"&gt;\r\n            Rabu 24 Januari 2018 11:26 WIB\r\n          &lt;\/span&gt;\r\n        &lt;\/div&gt;\r\n        &lt;div class=\"resizeable-font\"&gt;\r\n          &lt;a href=\"javascript:void(0)\" class=\"font-button plus\" title=\"Huruf besar\"&gt;A&lt;\/a&gt;\r\n          &lt;a href=\"javascript:void(0)\" class=\"font-button normal\" title=\"Huruf normal\"&gt;A&lt;\/a&gt;\r\n          &lt;a href=\"javascript:void(0)\" class=\"font-button minus\" title=\"Huruf kecil\"&gt;A&lt;\/a&gt;\r\n        &lt;\/div&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"content\"&gt;\r\n        &lt;img src=\"https:\/\/image.ibb.co\/fTY66c\/android_oreo.jpg\" \/&gt;\r\n        &lt;p&gt;\r\n            &lt;strong&gt;JAKARTA&lt;\/strong&gt; - Android Oreo telah diirlis oleh Google sebagai sistem operasi versi terbaru. Berbagai fitur diusung lebih canggih ketimbang versi sebelumnya.\r\n        &lt;\/p&gt;\r\n        &lt;p&gt;\r\n            Kini Android Oreo membawa fitur baru melalui sebuah update. Pengguna akan mendapatkan informasi terkait kecepatan WiFi publik yang biasanya dimanfaatkan oleh banyak pengguna smartphone.\r\n        &lt;\/p&gt;\r\n        &lt;p&gt;\r\n            Fitur itu akan tampil sebelum Anda menghubungkannya ke smartphone. Artinya, Anda bisa mengetahui dan memilih WiFi mana yang memiliki konektivitas tercepat untuk berselancar di dunia maya.\r\n        &lt;\/p&gt;\r\n        &lt;p&gt;\r\n            Beberapa kategori kecepatan akan tercantum mulai dari Sangat Cepat, Cepat, Baik dan Buruk. Standar dalam kategori disini ditentukan berdasarkan kecepatan jaringan saat digunakan untuk mengakses video.\r\n        &lt;\/p&gt;\r\n        &lt;p&gt;\r\n            Hal tersebut berarti, Anda akan menikmati akses video yang lancar ketika menggunakan WiFi dengan kategori kecepatan yang Cepat dan Sangat Cepat. Perbedaannya hanya dari segi kualitas gambar saja. \r\n        &lt;\/p&gt;\r\n        &lt;p&gt;\r\n            Website atau streaming musik sendiri akan dengan lancar dinikmati ketika Anda menggunakan jaringan dengan kategori Baik. Sementara untuk terakhir akan cukup untuk melakukan panggilan maupun berkirim pesan. \r\n        &lt;\/p&gt;\r\n        &lt;p&gt;\r\n            Fitur ini sebelumnya telah diumbar oleh Google dan akhirnya kini dirilis dalam update Android Oreo 8.1. \r\n        &lt;\/p&gt;\r\n        &lt;p&gt;\r\n            Android Oreo hingga saat ini memang masih tersedia secara terbatas. Beberapa smartphone yang telah mendukung OS Android terbaru ini seperti Pixel dan Pixel 2 serta Nexus 6P dan Nexus 5X. \r\n        &lt;\/p&gt;\r\n        &lt;p&gt;\r\n            Sebagai catatan, informasi kecepatan ini tak akan muncul pada WiFi pribadi. Jika tak diinginkan, admin WiFi publik juga bisa menonaktifkan fitur informasi kecepatan jaringan yang akan tampil berkat update Android Oreo. Demikian seperti dilansir TechCruch, Rabu (24\/1\/2018). \r\n        &lt;\/p&gt;\r\n      &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/body&gt;<\/pre>\n<p>Struktur HTML di atas akan menghasilkan semacam halaman artikel. Huruf yang nantinya akan menjadi <em>resizeable<\/em> adalah huruf yang ada di dalam container dengan class <strong>content<\/strong>. Huruf di luar itu tidak akan terpengaruh.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"CSS\"><\/span>CSS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Tidak ada yang istimewa dengan kode CSS nya. Sama seperti HTML, ini dibuat hanya untuk keperluan demo saja.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">body {\r\n  width: 100%;\r\n  height: 100%;\r\n  background: #f1f1f1;\r\n}\r\n\r\na {\r\n  text-decoration: none;\r\n}\r\n\r\n#wrapper {\r\n  width: 75%;\r\n  background: #ffffff;\r\n  padding: 5px 15px;\r\n  margin: 0 auto;\r\n  box-shadow: 0 1px 2px rgba(0,0,0,.1);\r\n}\r\n\r\n#container {\r\n  font-family: Roboto,sans-serif;\r\n  color: #000;\r\n}\r\n\r\n.title {\r\n  font-size: 18px;\r\n  font-weight: bold;\r\n}\r\n\r\n.meta {\r\n  width: 100%;\r\n  font-family: Arial, sans-serif;\r\n  font-size: 14px;\r\n  color: #888888;\r\n}\r\n\r\n.meta-description {\r\n  display: inline-block;\r\n  width: 70%;\r\n  float: left;\r\n  height: 30px;\r\n  line-height: 30px;\r\n}\r\n\r\n.author {\r\n  margin-right: 8px;\r\n}\r\n\r\n.resizeable-font {\r\n  display: inline-block;\r\n  width: 30%;\r\n  float: right;\r\n  text-align: right;\r\n  height: 30px;\r\n  line-height: 30px;\r\n}\r\n\r\n.resizeable-font a {\r\n  color: #888888;\r\n  padding: 0 5px;\r\n}\r\n\r\n.plus {\r\n  font-size: 20px;\r\n}\r\n\r\n.normal {\r\n  font-size: 16px;\r\n}\r\n\r\n.minus {\r\n  font-size: 12px;\r\n}\r\n\r\n.content {\r\n  font-size: 16px;\r\n  padding: 10px 0;\r\n  margin: 65px 0 0 0;\r\n}\r\n\r\n.content img {\r\n  width: 100%;\r\n}\r\n\r\n.content p {\r\n  line-height: 1.8;\r\n}<\/pre>\n<h2><span class=\"ez-toc-section\" id=\"jQuery\"><\/span>jQuery<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Dalam JavaScript, ketika ingin mengubah sesuatu maka terlebih dahulu Anda harus menentukan pemicunya. Bisa juga disebut sebagai kondisi, sesuatu berubah ketika kondisi tertentu terpenuhi. Dalam hal ini, pemicu atau kondisinya adalah aksi klik yang dilakukan <em>user<\/em>.<\/p>\n<p>Ketika <em>user<\/em> mengklik salah satu dari ketiga anchor berlabel &#8220;A&#8221; maka ukuran huruf di dalam container dengan class <strong>content<\/strong> akan berubah.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">$(function () {\r\n  $(\".plus\").click(function(){\r\n    $(\".content\").css(\"font-size\",\"20px\");\r\n    $(this).css(\"color\",\"#333333\");\r\n    $(\".normal, .minus\").css(\"color\",\"#888888\");\r\n  });\r\n  $(\".normal\").click(function(){\r\n    $(\".content\").css(\"font-size\",\"16px\");\r\n    $(this).css(\"color\",\"#333333\");\r\n    $(\".plus, .minus\").css(\"color\",\"#888888\");\r\n  });\r\n  $(\".minus\").click(function(){\r\n    $(\".content\").css(\"font-size\",\"12px\");\r\n    $(this).css(\"color\",\"#333333\");\r\n    $(\".normal, .plus\").css(\"color\",\"#888888\");\r\n  });\r\n});<\/pre>\n<p>Ada 3 anchor yang saya sediakan sama dengan yang ada di situs okezone.com:<\/p>\n<ul>\n<li>anchor dengan class <strong>plus<\/strong>: ketika di klik ukuran huruf akan berubah menjadi <strong>20px<\/strong>.<\/li>\n<li>anchor dengan class <strong>normal<\/strong>: ketika di klik ukuran huruf menjadi <strong>16px<\/strong>.<\/li>\n<li>anchor dengan class <strong>minus<\/strong>: ketika di klik ukuran huruf berubah menjadi <strong>12px<\/strong>.<\/li>\n<\/ul>\n<p>Ukuran huruf default adalah 16 px, ditentukan melalui kode CSS di atas.<\/p>\n<p>Berikut hasilnya:<\/p>\n<p><p data-height=\"1000\" data-embed-version=\"2\" data-theme-id=\"0\" data-slug-hash=\"wmQMvx\" data-default-tab=\"result\" data-user=\"wmQMvx\" 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<h2><span class=\"ez-toc-section\" id=\"Khusus_Pengguna_WordPress\"><\/span>Khusus Pengguna WordPress<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Bagi Anda pengguna WordPress yang ingin menyediakan fungsi semacam ini di website tapi tidak ingin menggunakan metode jQuery yang saya contohkan di atas, Anda dapat menggunakan plugin bernama <strong>Accessibility Widget<\/strong>.<\/p>\n<!-- WP-Appbox (Version: 4.4.12 \/\/ Store: wordpress \/\/ ID: accessibility-widget) -->\n<div class=\"wpappbox wpappbox-f910a464240d80c6de776152db3d6644 wordpress colorful simple\">\n\t<div class=\"qrcode\"><img decoding=\"async\" src=\"https:\/\/chart.googleapis.com\/chart?cht=qr&chl=https%3A%2F%2Fwordpress.org%2Fplugins%2Faccessibility-widget%2F&chs=200x200&chld=L%7C0\" alt=\"Accessibility Widget\" \/><\/div>\n\t<div class=\"appicon\">\n\t\t<a target=\"_blank\" rel=\"nofollow\" href=\"https:\/\/wordpress.org\/plugins\/accessibility-widget\/\" class=\"external\"><img decoding=\"async\" src=\"\/\/www.pugam.com\/wp-content\/plugins\/wp-appbox\/img\/wordpress-logo.png\" alt=\"Accessibility Widget\" \/><\/a>\n\t<\/div>\n\t<div class=\"applinks\">\n\t\t<div class=\"appbuttons\">\n\t\t\t<a target=\"_blank\" rel=\"nofollow\" href=\"https:\/\/wordpress.org\/plugins\/accessibility-widget\/\" class=\"external\">Install<\/a>\n\t\t\t<span onMouseOver=\"jQuery('.wpappbox-f910a464240d80c6de776152db3d6644 .qrcode').show();\" onMouseOut=\"jQuery('.wpappbox-f910a464240d80c6de776152db3d6644 .qrcode').hide();\">QR-Code<\/span>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"appdetails\">\n\t\t<div class=\"apptitle\"><a target=\"_blank\" rel=\"nofollow\" href=\"https:\/\/wordpress.org\/plugins\/accessibility-widget\/\" title=\"Accessibility Widget\" class=\"apptitle external\">Accessibility Widget<\/a><\/div>\n\t\t<div class=\"developer\">\n\t\t\t<span class=\"label\">Developer: <\/span>\n\t\t\t<span class=\"value\"><a target=\"_blank\" rel=\"nofollow\" href=\"http:\/\/webgrrrl.net\" class=\"external\">Lorna Timbah (webgrrrl)<\/a><\/span>\n\t\t<\/div>\n\t\t<div class=\"price\">\n\t\t\t<span class=\"label\">Price: <\/span>\n\t\t\t<span class=\"value\">Free<\/span> \n\t\t\t<span class=\"rating\"><div title=\"4.5 of 5 stars\" class=\"rating-stars stars-colorful stars45\"><\/div><\/span>\n\t\t<\/div>\n\t<\/div>\n<\/div><!-- \/WP-Appbox -->\n","protected":false},"excerpt":{"rendered":"Gambar di atas saya ambil dari situs techno.okezone.com. Jika diperhatikan, okezone.com menyediakan fungsi resizeable font, di mana pengunjung atau user \n<a class=\"moretag\" href=\"https:\/\/www.pugam.com\/15649\/membuat-fungsi-resizeable-font-dengan-jquery\/\"> ...<\/a>","protected":false},"author":3,"featured_media":15653,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","two_page_speed":[]},"categories":[2105,2092],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Membuat Fungsi Resizeable Font dengan jQuery | Pugam<\/title>\n<meta name=\"description\" content=\"Membuat Fungsi Resizeable Font dengan jQuery | Membuat Fungsi Resizeable Font dengan jQuery\" \/>\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\/15649\/membuat-fungsi-resizeable-font-dengan-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Membuat Fungsi Resizeable Font dengan jQuery | Pugam\" \/>\n<meta property=\"og:description\" content=\"Membuat Fungsi Resizeable Font dengan jQuery | Membuat Fungsi Resizeable Font dengan jQuery\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.pugam.com\/15649\/membuat-fungsi-resizeable-font-dengan-jquery\/\" \/>\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-04-07T05:42:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-08-06T02:20:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/img.pugam.com\/2018\/04\/Membuat-Fungsi-Resizeable-Font-dengan-jQuery.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"750\" \/>\n\t<meta property=\"og:image:height\" content=\"434\" \/>\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=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.pugam.com\/15649\/membuat-fungsi-resizeable-font-dengan-jquery\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.pugam.com\/15649\/membuat-fungsi-resizeable-font-dengan-jquery\/\"},\"author\":{\"name\":\"Biralie Nugraha\",\"@id\":\"https:\/\/www.pugam.com\/#\/schema\/person\/b903cfe7ebcaa1948d7db8622a7d056c\"},\"headline\":\"Membuat Fungsi Resizeable Font dengan jQuery\",\"datePublished\":\"2018-04-07T05:42:06+00:00\",\"dateModified\":\"2020-08-06T02:20:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.pugam.com\/15649\/membuat-fungsi-resizeable-font-dengan-jquery\/\"},\"wordCount\":410,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.pugam.com\/#\/schema\/person\/4226929fc3ad7c26a33895e82a9bbcd4\"},\"articleSection\":[\"Web Development\",\"WordPress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.pugam.com\/15649\/membuat-fungsi-resizeable-font-dengan-jquery\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.pugam.com\/15649\/membuat-fungsi-resizeable-font-dengan-jquery\/\",\"url\":\"https:\/\/www.pugam.com\/15649\/membuat-fungsi-resizeable-font-dengan-jquery\/\",\"name\":\"Membuat Fungsi Resizeable Font dengan jQuery | Pugam\",\"isPartOf\":{\"@id\":\"https:\/\/www.pugam.com\/#website\"},\"datePublished\":\"2018-04-07T05:42:06+00:00\",\"dateModified\":\"2020-08-06T02:20:59+00:00\",\"description\":\"Membuat Fungsi Resizeable Font dengan jQuery | Membuat Fungsi Resizeable Font dengan jQuery\",\"breadcrumb\":{\"@id\":\"https:\/\/www.pugam.com\/15649\/membuat-fungsi-resizeable-font-dengan-jquery\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.pugam.com\/15649\/membuat-fungsi-resizeable-font-dengan-jquery\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.pugam.com\/15649\/membuat-fungsi-resizeable-font-dengan-jquery\/#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\":\"Membuat Fungsi Resizeable Font dengan jQuery\"}]},{\"@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":"Membuat Fungsi Resizeable Font dengan jQuery | Pugam","description":"Membuat Fungsi Resizeable Font dengan jQuery | Membuat Fungsi Resizeable Font dengan jQuery","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\/15649\/membuat-fungsi-resizeable-font-dengan-jquery\/","og_locale":"en_US","og_type":"article","og_title":"Membuat Fungsi Resizeable Font dengan jQuery | Pugam","og_description":"Membuat Fungsi Resizeable Font dengan jQuery | Membuat Fungsi Resizeable Font dengan jQuery","og_url":"https:\/\/www.pugam.com\/15649\/membuat-fungsi-resizeable-font-dengan-jquery\/","og_site_name":"Pugam","article_publisher":"https:\/\/www.facebook.com\/pugamdotcom\/","article_author":"https:\/\/www.facebook.com\/pugamdotcom\/","article_published_time":"2018-04-07T05:42:06+00:00","article_modified_time":"2020-08-06T02:20:59+00:00","og_image":[{"width":750,"height":434,"url":"https:\/\/img.pugam.com\/2018\/04\/Membuat-Fungsi-Resizeable-Font-dengan-jQuery.jpg","type":"image\/jpeg"}],"author":"Biralie Nugraha","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Biralie Nugraha","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.pugam.com\/15649\/membuat-fungsi-resizeable-font-dengan-jquery\/#article","isPartOf":{"@id":"https:\/\/www.pugam.com\/15649\/membuat-fungsi-resizeable-font-dengan-jquery\/"},"author":{"name":"Biralie Nugraha","@id":"https:\/\/www.pugam.com\/#\/schema\/person\/b903cfe7ebcaa1948d7db8622a7d056c"},"headline":"Membuat Fungsi Resizeable Font dengan jQuery","datePublished":"2018-04-07T05:42:06+00:00","dateModified":"2020-08-06T02:20:59+00:00","mainEntityOfPage":{"@id":"https:\/\/www.pugam.com\/15649\/membuat-fungsi-resizeable-font-dengan-jquery\/"},"wordCount":410,"commentCount":0,"publisher":{"@id":"https:\/\/www.pugam.com\/#\/schema\/person\/4226929fc3ad7c26a33895e82a9bbcd4"},"articleSection":["Web Development","WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.pugam.com\/15649\/membuat-fungsi-resizeable-font-dengan-jquery\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.pugam.com\/15649\/membuat-fungsi-resizeable-font-dengan-jquery\/","url":"https:\/\/www.pugam.com\/15649\/membuat-fungsi-resizeable-font-dengan-jquery\/","name":"Membuat Fungsi Resizeable Font dengan jQuery | Pugam","isPartOf":{"@id":"https:\/\/www.pugam.com\/#website"},"datePublished":"2018-04-07T05:42:06+00:00","dateModified":"2020-08-06T02:20:59+00:00","description":"Membuat Fungsi Resizeable Font dengan jQuery | Membuat Fungsi Resizeable Font dengan jQuery","breadcrumb":{"@id":"https:\/\/www.pugam.com\/15649\/membuat-fungsi-resizeable-font-dengan-jquery\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.pugam.com\/15649\/membuat-fungsi-resizeable-font-dengan-jquery\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.pugam.com\/15649\/membuat-fungsi-resizeable-font-dengan-jquery\/#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":"Membuat Fungsi Resizeable Font dengan jQuery"}]},{"@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\/04\/Membuat-Fungsi-Resizeable-Font-dengan-jQuery.jpg","jetpack-related-posts":[{"id":18766,"url":"https:\/\/www.pugam.com\/18766\/penjelasan-lengkap-menu-menu-di-gbwhatsapp\/","url_meta":{"origin":15649,"position":0},"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":18645,"url":"https:\/\/www.pugam.com\/18645\/download-yowhatsapp-terbaru-2023\/","url_meta":{"origin":15649,"position":1},"title":"Download YoWhatsApp Versi Terbaru v10.03 (Anti-BAN) 2024","date":"18 Oct 2018","format":false,"excerpt":"Terakhir diperbarui May 2024 Versi saat ini 10.03\u00a0 Ukuran file 64 MB Pengembang Fouad Mokdad System requirements Android 4.0+ YoWhatsApp adalah MOD (modifikasi) dari aplikasi WhatsApp dengan lebih banyak fitur yang tidak akan Anda dapatkan di WhatsApp versi resmi. YoWhatsApp juga merupakan MOD WhatsApp paling populer hingga saat ini\u2026","rel":"","context":"In &quot;Android&quot;","img":{"alt_text":"Download Yowhatsapp Versi Terbaru Thumbnail","src":"https:\/\/i0.wp.com\/img.pugam.com\/2018\/10\/Download-YoWhatsApp-Versi-Terbaru-Thumbnail.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":13506,"url":"https:\/\/www.pugam.com\/13506\/cara-menghapus-header-di-microsoft-excel-2013\/","url_meta":{"origin":15649,"position":2},"title":"Cara Menghapus Header di Microsoft Excel 2013","date":"4 Jan 2018","format":false,"excerpt":"Di Microsoft Excel, kadang kita tidak perlu sampai membuat spreadsheet baru jika tujuannya hanya untuk sekedar mengedit beberapa data yang sudah ada. Atau jika Anda sering mengerjakan laporan rutin, misal laporan mingguan maka saya yakin Anda tidak akan membuat spreadsheet baru untuk setiap laporan Anda. Setidaknya Anda akan menyalin format\u2026","rel":"","context":"In &quot;Microsoft Office&quot;","img":{"alt_text":"Cara Menghapus Header Di Microsoft Excel 2013","src":"https:\/\/i0.wp.com\/img.pugam.com\/2018\/01\/Cara-Menghapus-Header-di-Microsoft-Excel-2013.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":15649,"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":20161,"url":"https:\/\/www.pugam.com\/20161\/cara-menggunakan-dpfilelist-generator-pro-evolutin-soccer\/","url_meta":{"origin":15649,"position":4},"title":"Cara Menggunakan DpFileList Generator (Pro Evolution Soccer)","date":"25 May 2019","format":false,"excerpt":"Sesuai namanya, DpFileList Generator adalah tool yang dapat digunakan untuk membuat atau me-regenerasi file DpFileList.bin. Game seperti Pro Evolution Soccer menggunakan file ini untuk memuat konten permainan. Lalu apa fungsi DpFileList Generator di game seperti PES ini? Jika Anda ingin menambahkan konten baru ke dalam game, seperti sepatu atau kostum\u2026","rel":"","context":"In &quot;Umum&quot;","img":{"alt_text":"Cara Menggunakan Dpfilelist Generator","src":"https:\/\/i0.wp.com\/img.pugam.com\/2019\/05\/Cara-Menggunakan-DpFileList-Generator.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":18728,"url":"https:\/\/www.pugam.com\/18728\/download-fmwhatsapp-versi-terbaru\/","url_meta":{"origin":15649,"position":5},"title":"Download FMWhatsApp Versi Terbaru v10.03 (Anti-BAN) 2024","date":"26 Oct 2018","format":false,"excerpt":"Terakhir diperbarui 2024 Versi saat ini 10.03 Ukuran file 51 MB Pengembang Fouad Mokdad Pengembang situs web fouadmod.com System requirements Android 4.0+ Sama seperti MOD WhatsApp lainnya, FMWhatsApp yang dikembangkan oleh Fouad Mokdad adalah modifikasi dari aplikasi pesan instan paling populer, WhatsApp. Lantas apa perbedaan antara FMWhatsApp jika dibandingkan\u2026","rel":"","context":"In &quot;Android&quot;","img":{"alt_text":"Download Fmwhatsapp Versi Terbaru Cover","src":"https:\/\/i0.wp.com\/img.pugam.com\/2018\/10\/Download-FMWhatsApp-Versi-Terbaru-Cover.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.pugam.com\/wp-json\/wp\/v2\/posts\/15649"}],"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=15649"}],"version-history":[{"count":0,"href":"https:\/\/www.pugam.com\/wp-json\/wp\/v2\/posts\/15649\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.pugam.com\/wp-json\/wp\/v2\/media\/15653"}],"wp:attachment":[{"href":"https:\/\/www.pugam.com\/wp-json\/wp\/v2\/media?parent=15649"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pugam.com\/wp-json\/wp\/v2\/categories?post=15649"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}