{"id":1065,"date":"2018-10-24T09:58:30","date_gmt":"2018-10-24T02:58:30","guid":{"rendered":"https:\/\/www.yellowweb.id\/blog\/?p=1065"},"modified":"2018-10-24T09:58:30","modified_gmt":"2018-10-24T02:58:30","slug":"jquery-text-rotator-plugin","status":"publish","type":"post","link":"https:\/\/www.yellowweb.id\/blog\/jquery-text-rotator-plugin\/","title":{"rendered":"jQuery Text Rotator Plugin"},"content":{"rendered":"

Halo teman-teman sahabat Yellow, untuk artikel kali ini kita akan mencoba menggunakan plugin jQuery, yang berfungsi untuk memanipulasi tulisan atau teks. Tentunya kita siapkan dahulu file-file apa saja nanti yang akan kita gunakan.
\n<\/p>\n

File-file yang kita perlukan diantaranya:
\n1. index.html
\n2. Library jQuery
\n3. Plugin jQuery<\/p>\n

Untuk mengunduh file plugin Text Rotator jQuery, kita bisa menuju link berikut:
\nText Rotator Plugin<\/a><\/p>\n

dan tentunya jangan lupa untuk mengunduh Library jQuery dari situsnya:
\njQuery Library<\/a><\/p>\n

File-file tersebut sudah kita siapkan, sekarang saatnya kita memulai:
\nUntuk potongan skrip kode pada bagian head<\/code>,<\/p>\n

<link href='http:\/\/fonts.googleapis.com\/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text\/css'>\r\n\t<link href='http:\/\/fonts.googleapis.com\/css?family=Pacifico:400' rel='stylesheet' type='text\/css'>\r\n\t<script type=\"text\/javascript\" src=\"http:\/\/code.jquery.com\/jquery-1.9.1.js\"><\/script>\r\n  <script type=\"text\/javascript\" src=\"jquery.simple-text-rotator.js\"><\/script><\/pre>\n
Pada potongan skrip diatas, disana untuk Library jQuery dapat menggunakan versi online (CDN). Kemudian untuk CSS<\/code> nya kalian bisa lihat potongan skrip kode berikut:<\/p>\n
html {\r\n      height: 100%;\r\n    }\r\n    body {\r\n      background: #f4eedf;\r\n      padding: 0;\r\n      text-align: center;\r\n      font-family: 'open sans';\r\n      position: relative;\r\n      margin: 0;\r\n      height: 100%;\r\n    }\r\n    \r\n    .wrapper {\r\n    \theight: auto !important;\r\n    \theight: 100%;\r\n    \tmargin: 0 auto; \r\n    \toverflow: hidden;\r\n    }\r\n    \r\n    a {\r\n      text-decoration: none;\r\n    }\r\n    \r\n    \r\n    h1, h2 {\r\n      width: 100%;\r\n      float: left;\r\n    }\r\n    h1 {\r\n      margin-top: 100px;\r\n      color: #555;\r\n      margin-bottom: 5px;\r\n    }\r\n    h2 {\r\n      color: #999;\r\n      font-weight: 100;\r\n      margin-top: 0;\r\n      margin-bottom: 10px;\r\n    }\r\n    \r\n    .pointer {\r\n      color: #9b59b6;\r\n      font-family: 'Pacifico', cursive;\r\n      font-size: 30px;\r\n      margin-top: 15px;\r\n    }\r\n    pre {\r\n      margin: 80px auto;\r\n    }\r\n    pre code {\r\n      padding: 35px;\r\n      border-radius: 5px;\r\n      font-size: 15px;\r\n      background: rgba(0,0,0,0.1);\r\n      border: rgba(0,0,0,0.05) 5px solid;\r\n      max-width: 500px;\r\n    }\r\n\r\n\r\n    .main {\r\n      float: left;\r\n      width: 100%;\r\n      margin: 0 auto;\r\n    }\r\n    \r\n    .main h1 {\r\n      padding:150px 50px;\r\n      float: left;\r\n      width: 100%;\r\n      font-size: 45px;\r\n      box-sizing: border-box;\r\n      -webkit-box-sizing: border-box;\r\n      -moz-box-sizing: border-box;\r\n      font-weight: 100;\r\n      color: white;\r\n      margin: 0;\r\n    }\r\n\r\n    .main h1.demo1 {\r\n      background: #1ABC9C;\r\n    }\r\n    .main h1.demo2 {\r\n      background: #e74c3c;\r\n    }\r\n    .main h1.demo3 {\r\n      background: #e67e22;\r\n    }\r\n    .main h1.demo4 {\r\n      background: #f1c40f;\r\n    }\r\n    .main h1.demo5 {\r\n      background: #34495e;\r\n    }\r\n    \r\n    .reload, .btn{\r\n      display: inline-block;\r\n      border: 4px solid #FFF;\r\n      border-radius: 5px;\r\n      -moz-border-radius: 5px;\r\n      -webkit-border-radius: 5px;\r\n      background: rgba(255,255,255, 0.75);\r\n      display: inline-block;\r\n      line-height: 100%;\r\n      padding: 0.7em;\r\n      text-decoration: none;\r\n      opacity: 0.7;\r\n      color: #555;\r\n      width: 100px;\r\n      line-height: 140%;\r\n      font-size: 17px;\r\n      font-family: open sans;\r\n      font-weight: bold;\r\n    }\r\n    .reload:hover, .btn:hover {\r\n      background: white;\r\n    }\r\n    .btn {\r\n      width: 200px;\r\n    }\r\n    .btns {\r\n      width: 230px;\r\n      margin: 50px auto;\r\n    }\r\n    .credit {\r\n      text-align: center;\r\n      color: #999;\r\n      padding: 10px;\r\n      margin: 0 0 40px 0;\r\n      background: rgba(255,255,255,0.25);\r\n      float: left;\r\n      width: 100%;\r\n    }\r\n    .credit a {\r\n      color: #555;\r\n      text-decoration: none;\r\n      font-weight: bold;\r\n    }<\/pre>\n
Lalu kita menuju ke CSS Plugin<\/code>, potongan skrip kodenya sebagai berikut:<\/p>\n
.rotating {\r\n  display: inline-block;\r\n  -webkit-transform-style: preserve-3d;\r\n  -moz-transform-style: preserve-3d;\r\n  -ms-transform-style: preserve-3d;\r\n  -o-transform-style: preserve-3d;\r\n  transform-style: preserve-3d;\r\n  -webkit-transform: rotateX(0) rotateY(0) rotateZ(0);\r\n  -moz-transform: rotateX(0) rotateY(0) rotateZ(0);\r\n  -ms-transform: rotateX(0) rotateY(0) rotateZ(0);\r\n  -o-transform: rotateX(0) rotateY(0) rotateZ(0);\r\n  transform: rotateX(0) rotateY(0) rotateZ(0);\r\n  -webkit-transition: 0.5s;\r\n  -moz-transition: 0.5s;\r\n  -ms-transition: 0.5s;\r\n  -o-transition: 0.5s;\r\n  transition: 0.5s;\r\n  -webkit-transform-origin-x: 50%;\r\n}\r\n\r\n.rotating.flip {\r\n  position: relative;\r\n}\r\n\r\n.rotating .front, .rotating .back {\r\n  left: 0;\r\n  top: 0;\r\n  -webkit-backface-visibility: hidden;\r\n  -moz-backface-visibility: hidden;\r\n  -ms-backface-visibility: hidden;\r\n  -o-backface-visibility: hidden;\r\n  backface-visibility: hidden;\r\n}\r\n\r\n.rotating .front {\r\n  position: absolute;\r\n  display: inline-block;\r\n  -webkit-transform: translate3d(0,0,1px);\r\n  -moz-transform: translate3d(0,0,1px);\r\n  -ms-transform: translate3d(0,0,1px);\r\n  -o-transform: translate3d(0,0,1px);\r\n  transform: translate3d(0,0,1px);\r\n}\r\n\r\n.rotating.flip .front {\r\n  z-index: 1;\r\n}\r\n\r\n.rotating .back {\r\n  display: block;\r\n  opacity: 0;\r\n}\r\n\r\n.rotating.spin {\r\n  -webkit-transform: rotate(360deg) scale(0);\r\n  -moz-transform: rotate(360deg) scale(0);\r\n  -ms-transform: rotate(360deg) scale(0);\r\n  -o-transform: rotate(360deg) scale(0);\r\n  transform: rotate(360deg) scale(0);\r\n}\r\n\r\n\r\n\r\n.rotating.flip .back {\r\n  z-index: 2;\r\n  display: block;\r\n  opacity: 1;\r\n  \r\n  -webkit-transform: rotateY(180deg) translate3d(0,0,0);\r\n  -moz-transform: rotateY(180deg) translate3d(0,0,0);\r\n  -ms-transform: rotateY(180deg) translate3d(0,0,0);\r\n  -o-transform: rotateY(180deg) translate3d(0,0,0);\r\n  transform: rotateY(180deg) translate3d(0,0,0);\r\n}\r\n\r\n.rotating.flip.up .back {\r\n  -webkit-transform: rotateX(180deg) translate3d(0,0,0);\r\n  -moz-transform: rotateX(180deg) translate3d(0,0,0);\r\n  -ms-transform: rotateX(180deg) translate3d(0,0,0);\r\n  -o-transform: rotateX(180deg) translate3d(0,0,0);\r\n  transform: rotateX(180deg) translate3d(0,0,0);\r\n}\r\n\r\n.rotating.flip.cube .front {\r\n  -webkit-transform: translate3d(0,0,100px) scale(0.9,0.9);\r\n  -moz-transform: translate3d(0,0,100px) scale(0.85,0.85);\r\n  -ms-transform: translate3d(0,0,100px) scale(0.85,0.85);\r\n  -o-transform: translate3d(0,0,100px) scale(0.85,0.85);\r\n  transform: translate3d(0,0,100px) scale(0.85,0.85);\r\n}\r\n\r\n.rotating.flip.cube .back {\r\n  -webkit-transform: rotateY(180deg) translate3d(0,0,100px) scale(0.9,0.9);\r\n  -moz-transform: rotateY(180deg) translate3d(0,0,100px) scale(0.85,0.85);\r\n  -ms-transform: rotateY(180deg) translate3d(0,0,100px) scale(0.85,0.85);\r\n  -o-transform: rotateY(180deg) translate3d(0,0,100px) scale(0.85,0.85);\r\n  transform: rotateY(180deg) translate3d(0,0,100px) scale(0.85,0.85);\r\n}\r\n\r\n.rotating.flip.cube.up .back {\r\n  -webkit-transform: rotateX(180deg) translate3d(0,0,100px) scale(0.9,0.9);\r\n  -moz-transform: rotateX(180deg) translate3d(0,0,100px) scale(0.85,0.85);\r\n  -ms-transform: rotateX(180deg) translate3d(0,0,100px) scale(0.85,0.85);\r\n  -o-transform: rotateX(180deg) translate3d(0,0,100px) scale(0.85,0.85);\r\n  transform: rotateX(180deg) translate3d(0,0,100px) scale(0.85,0.85);\r\n}<\/pre>\n
Lanjutkan ke bagian aktivasi jQuerynya:<\/p>\n
<script>\r\n\t  $(document).ready(function(){\r\n\t\t\t$(\".demo1 .rotate\").textrotator({\r\n        animation: \"fade\",\r\n        speed: 1000\r\n      });\r\n      $(\".demo2 .rotate\").textrotator({\r\n        animation: \"flip\",\r\n        speed: 1250\r\n      });\r\n      $(\".demo3 .rotate\").textrotator({\r\n        animation: \"flipCube\",\r\n        speed: 1500\r\n      });\r\n      $(\".demo4 .rotate\").textrotator({\r\n        animation: \"flipUp\",\r\n        speed: 1750\r\n      });\r\n      $(\".demo5 .rotate\").textrotator({\r\n        animation: \"spin\",\r\n        speed: 2000\r\n      });\r\n\t\t});\r\n\t\t\r\n\t<\/script><\/pre>\n
Untuk isinya sendiri, pada bagian body kalian bisa berikan potongan skrip kode berikut ini:<\/p>\n
<div class=\"wrapper\">\r\n\t  <div class=\"main\">\r\n\t    <h1 class=\"demo1\">Super <span class=\"rotate\">Simple, Customizable, Light Weight, Easy<\/span> Text Rotator with Style<\/h1>\r\n\t    <h1 class=\"demo2\">Super <span class=\"rotate\">Simple, Customizable, Light Weight, Easy<\/span> Text Rotator with Style<\/h1>\r\n\t    <h1 class=\"demo3\">Super <span class=\"rotate\">Simple, Customizable, Light Weight, Easy<\/span> Text Rotator with Style<\/h1>\r\n\t    <h1 class=\"demo4\">Super <span class=\"rotate\">Simple, Customizable, Light Weight, Easy<\/span> Text Rotator with Style<\/h1>\r\n\t    <h1 class=\"demo5\">Super <span class=\"rotate\">Simple, Customizable, Light Weight, Easy<\/span> Text Rotator with Style<\/h1>\r\n    <\/div>\r\n  <\/div><\/pre>\n
Berikut keseluruhan kode, secara utuh:<\/p>\n
<!doctype html>\r\n<html>\r\n<head>\r\n\t<meta charset=\"utf-8\">\r\n\t<title>jQuery Text Rotator | Kursus Web YELLOWWEB.ID<\/title>\r\n\t<meta name=\"title\" content=\"Tutorial jQuery Text Rotator Plugin | YELLOWWEB.ID\" \/>\r\n\t<meta name=\"description\" content=\"Membuat Text Rotator dengan menggunakan Plugin jQuery\" \/>\r\n\t<meta name=\"author\" content=\"YELLOWWEB\">\r\n\t<link href='http:\/\/fonts.googleapis.com\/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text\/css'>\r\n\t<link href='http:\/\/fonts.googleapis.com\/css?family=Pacifico:400' rel='stylesheet' type='text\/css'>\r\n\t<script type=\"text\/javascript\" src=\"http:\/\/code.jquery.com\/jquery-1.9.1.js\"><\/script>\r\n  <script type=\"text\/javascript\" src=\"jquery.simple-text-rotator.js\"><\/script>\r\n  <style>\r\n    html {\r\n      height: 100%;\r\n    }\r\n    body {\r\n      background: #f4eedf;\r\n      padding: 0;\r\n      text-align: center;\r\n      font-family: 'open sans';\r\n      position: relative;\r\n      margin: 0;\r\n      height: 100%;\r\n    }\r\n    \r\n    .wrapper {\r\n    \theight: auto !important;\r\n    \theight: 100%;\r\n    \tmargin: 0 auto; \r\n    \toverflow: hidden;\r\n    }\r\n    \r\n    a {\r\n      text-decoration: none;\r\n    }\r\n    \r\n    \r\n    h1, h2 {\r\n      width: 100%;\r\n      float: left;\r\n    }\r\n    h1 {\r\n      margin-top: 100px;\r\n      color: #555;\r\n      margin-bottom: 5px;\r\n    }\r\n    h2 {\r\n      color: #999;\r\n      font-weight: 100;\r\n      margin-top: 0;\r\n      margin-bottom: 10px;\r\n    }\r\n    \r\n    .pointer {\r\n      color: #9b59b6;\r\n      font-family: 'Pacifico', cursive;\r\n      font-size: 30px;\r\n      margin-top: 15px;\r\n    }\r\n    pre {\r\n      margin: 80px auto;\r\n    }\r\n    pre code {\r\n      padding: 35px;\r\n      border-radius: 5px;\r\n      font-size: 15px;\r\n      background: rgba(0,0,0,0.1);\r\n      border: rgba(0,0,0,0.05) 5px solid;\r\n      max-width: 500px;\r\n    }\r\n\r\n\r\n    .main {\r\n      float: left;\r\n      width: 100%;\r\n      margin: 0 auto;\r\n    }\r\n    \r\n    .main h1 {\r\n      padding:150px 50px;\r\n      float: left;\r\n      width: 100%;\r\n      font-size: 45px;\r\n      box-sizing: border-box;\r\n      -webkit-box-sizing: border-box;\r\n      -moz-box-sizing: border-box;\r\n      font-weight: 100;\r\n      color: white;\r\n      margin: 0;\r\n    }\r\n\r\n    .main h1.demo1 {\r\n      background: #1ABC9C;\r\n    }\r\n    .main h1.demo2 {\r\n      background: #e74c3c;\r\n    }\r\n    .main h1.demo3 {\r\n      background: #e67e22;\r\n    }\r\n    .main h1.demo4 {\r\n      background: #f1c40f;\r\n    }\r\n    .main h1.demo5 {\r\n      background: #34495e;\r\n    }\r\n    \r\n    .reload, .btn{\r\n      display: inline-block;\r\n      border: 4px solid #FFF;\r\n      border-radius: 5px;\r\n      -moz-border-radius: 5px;\r\n      -webkit-border-radius: 5px;\r\n      background: rgba(255,255,255, 0.75);\r\n      display: inline-block;\r\n      line-height: 100%;\r\n      padding: 0.7em;\r\n      text-decoration: none;\r\n      opacity: 0.7;\r\n      color: #555;\r\n      width: 100px;\r\n      line-height: 140%;\r\n      font-size: 17px;\r\n      font-family: open sans;\r\n      font-weight: bold;\r\n    }\r\n    .reload:hover, .btn:hover {\r\n      background: white;\r\n    }\r\n    .btn {\r\n      width: 200px;\r\n    }\r\n    .btns {\r\n      width: 230px;\r\n      margin: 50px auto;\r\n    }\r\n    .credit {\r\n      text-align: center;\r\n      color: #999;\r\n      padding: 10px;\r\n      margin: 0 0 40px 0;\r\n      background: rgba(255,255,255,0.25);\r\n      float: left;\r\n      width: 100%;\r\n    }\r\n    .credit a {\r\n      color: #555;\r\n      text-decoration: none;\r\n      font-weight: bold;\r\n    }\r\n\t<\/style>\r\n\t<link rel=\"stylesheet\" type=\"text\/css\" href=\"simpletextrotator.css\" \/>\r\n\t<script>\r\n\t  $(document).ready(function(){\r\n\t\t\t$(\".demo1 .rotate\").textrotator({\r\n        animation: \"fade\",\r\n        speed: 1000\r\n      });\r\n      $(\".demo2 .rotate\").textrotator({\r\n        animation: \"flip\",\r\n        speed: 1250\r\n      });\r\n      $(\".demo3 .rotate\").textrotator({\r\n        animation: \"flipCube\",\r\n        speed: 1500\r\n      });\r\n      $(\".demo4 .rotate\").textrotator({\r\n        animation: \"flipUp\",\r\n        speed: 1750\r\n      });\r\n      $(\".demo5 .rotate\").textrotator({\r\n        animation: \"spin\",\r\n        speed: 2000\r\n      });\r\n\t\t});\r\n\t\t\r\n\t<\/script>\r\n<\/head>\r\n<body>\r\n  <div class=\"wrapper\">\r\n\t  <div class=\"main\">\r\n\t    <h1 class=\"demo1\">Super <span class=\"rotate\">Simple, Customizable, Light Weight, Easy<\/span> Text Rotator with Style<\/h1>\r\n\t    <h1 class=\"demo2\">Super <span class=\"rotate\">Simple, Customizable, Light Weight, Easy<\/span> Text Rotator with Style<\/h1>\r\n\t    <h1 class=\"demo3\">Super <span class=\"rotate\">Simple, Customizable, Light Weight, Easy<\/span> Text Rotator with Style<\/h1>\r\n\t    <h1 class=\"demo4\">Super <span class=\"rotate\">Simple, Customizable, Light Weight, Easy<\/span> Text Rotator with Style<\/h1>\r\n\t    <h1 class=\"demo5\">Super <span class=\"rotate\">Simple, Customizable, Light Weight, Easy<\/span> Text Rotator with Style<\/h1>\r\n    <\/div>\r\n  <\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Untuk melihat demonya, teman-teman bisa klik link berikut:
\nhttps:\/\/www.yellowweb.id\/demo\/jquery-text-rotator\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Halo teman-teman sahabat Yellow, untuk artikel kali ini kita akan mencoba menggunakan plugin jQuery, yang berfungsi untuk memanipulasi tulisan atau teks. Tentunya kita siapkan dahulu file-file apa saja nanti yang akan kita gunakan.<\/p>\n","protected":false},"author":1,"featured_media":1068,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[116],"tags":[18,424,117,468],"class_list":["post-1065","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-jquery","tag-jquery-plugin","tag-plugin","tag-text-rotator"],"yoast_head":"\njQuery Text Rotator Plugin - 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\/jquery-text-rotator-plugin\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"jQuery Text Rotator Plugin - YELLOWWEB.ID\" \/>\n<meta property=\"og:description\" content=\"Halo teman-teman sahabat Yellow, untuk artikel kali ini kita akan mencoba menggunakan plugin jQuery, yang berfungsi untuk memanipulasi tulisan atau teks. Tentunya kita siapkan dahulu file-file apa saja nanti yang akan kita gunakan.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.yellowweb.id\/blog\/jquery-text-rotator-plugin\/\" \/>\n<meta property=\"og:site_name\" content=\"YELLOWWEB.ID\" \/>\n<meta property=\"article:published_time\" content=\"2018-10-24T02:58:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i0.wp.com\/www.yellowweb.id\/blog\/wp-content\/uploads\/2018\/10\/rot-text.jpg?fit=600%2C290&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"600\" \/>\n\t<meta property=\"og:image:height\" content=\"290\" \/>\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=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/jquery-text-rotator-plugin\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/jquery-text-rotator-plugin\\\/\"},\"author\":{\"name\":\"yellowweb\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#\\\/schema\\\/person\\\/75188044e080844724e381ab6a5b9829\"},\"headline\":\"jQuery Text Rotator Plugin\",\"datePublished\":\"2018-10-24T02:58:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/jquery-text-rotator-plugin\\\/\"},\"wordCount\":160,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/jquery-text-rotator-plugin\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/10\\\/rot-text.jpg\",\"keywords\":[\"jquery\",\"jquery plugin\",\"plugin\",\"text-rotator\"],\"articleSection\":[\"jQuery\"],\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/jquery-text-rotator-plugin\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/jquery-text-rotator-plugin\\\/\",\"url\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/jquery-text-rotator-plugin\\\/\",\"name\":\"jQuery Text Rotator Plugin - YELLOWWEB.ID\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/jquery-text-rotator-plugin\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/jquery-text-rotator-plugin\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/10\\\/rot-text.jpg\",\"datePublished\":\"2018-10-24T02:58:30+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#\\\/schema\\\/person\\\/75188044e080844724e381ab6a5b9829\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/jquery-text-rotator-plugin\\\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/jquery-text-rotator-plugin\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/jquery-text-rotator-plugin\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/10\\\/rot-text.jpg\",\"contentUrl\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/10\\\/rot-text.jpg\",\"width\":600,\"height\":290,\"caption\":\"text-rotator\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/jquery-text-rotator-plugin\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"jQuery Text Rotator Plugin\"}]},{\"@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":"jQuery Text Rotator Plugin - 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\/jquery-text-rotator-plugin\/","og_locale":"en_GB","og_type":"article","og_title":"jQuery Text Rotator Plugin - YELLOWWEB.ID","og_description":"Halo teman-teman sahabat Yellow, untuk artikel kali ini kita akan mencoba menggunakan plugin jQuery, yang berfungsi untuk memanipulasi tulisan atau teks. Tentunya kita siapkan dahulu file-file apa saja nanti yang akan kita gunakan.","og_url":"https:\/\/www.yellowweb.id\/blog\/jquery-text-rotator-plugin\/","og_site_name":"YELLOWWEB.ID","article_published_time":"2018-10-24T02:58:30+00:00","og_image":[{"width":600,"height":290,"url":"https:\/\/i0.wp.com\/www.yellowweb.id\/blog\/wp-content\/uploads\/2018\/10\/rot-text.jpg?fit=600%2C290&ssl=1","type":"image\/jpeg"}],"author":"yellowweb","twitter_card":"summary_large_image","twitter_misc":{"Written by":"yellowweb","Estimated reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.yellowweb.id\/blog\/jquery-text-rotator-plugin\/#article","isPartOf":{"@id":"https:\/\/www.yellowweb.id\/blog\/jquery-text-rotator-plugin\/"},"author":{"name":"yellowweb","@id":"https:\/\/www.yellowweb.id\/blog\/#\/schema\/person\/75188044e080844724e381ab6a5b9829"},"headline":"jQuery Text Rotator Plugin","datePublished":"2018-10-24T02:58:30+00:00","mainEntityOfPage":{"@id":"https:\/\/www.yellowweb.id\/blog\/jquery-text-rotator-plugin\/"},"wordCount":160,"commentCount":0,"image":{"@id":"https:\/\/www.yellowweb.id\/blog\/jquery-text-rotator-plugin\/#primaryimage"},"thumbnailUrl":"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2018\/10\/rot-text.jpg","keywords":["jquery","jquery plugin","plugin","text-rotator"],"articleSection":["jQuery"],"inLanguage":"en-GB","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.yellowweb.id\/blog\/jquery-text-rotator-plugin\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.yellowweb.id\/blog\/jquery-text-rotator-plugin\/","url":"https:\/\/www.yellowweb.id\/blog\/jquery-text-rotator-plugin\/","name":"jQuery Text Rotator Plugin - YELLOWWEB.ID","isPartOf":{"@id":"https:\/\/www.yellowweb.id\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.yellowweb.id\/blog\/jquery-text-rotator-plugin\/#primaryimage"},"image":{"@id":"https:\/\/www.yellowweb.id\/blog\/jquery-text-rotator-plugin\/#primaryimage"},"thumbnailUrl":"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2018\/10\/rot-text.jpg","datePublished":"2018-10-24T02:58:30+00:00","author":{"@id":"https:\/\/www.yellowweb.id\/blog\/#\/schema\/person\/75188044e080844724e381ab6a5b9829"},"breadcrumb":{"@id":"https:\/\/www.yellowweb.id\/blog\/jquery-text-rotator-plugin\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.yellowweb.id\/blog\/jquery-text-rotator-plugin\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.yellowweb.id\/blog\/jquery-text-rotator-plugin\/#primaryimage","url":"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2018\/10\/rot-text.jpg","contentUrl":"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2018\/10\/rot-text.jpg","width":600,"height":290,"caption":"text-rotator"},{"@type":"BreadcrumbList","@id":"https:\/\/www.yellowweb.id\/blog\/jquery-text-rotator-plugin\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.yellowweb.id\/blog\/"},{"@type":"ListItem","position":2,"name":"jQuery Text Rotator Plugin"}]},{"@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\/1065","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=1065"}],"version-history":[{"count":2,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/posts\/1065\/revisions"}],"predecessor-version":[{"id":1069,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/posts\/1065\/revisions\/1069"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/media\/1068"}],"wp:attachment":[{"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/media?parent=1065"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/categories?post=1065"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/tags?post=1065"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}