{"id":3492,"date":"2020-07-03T09:32:47","date_gmt":"2020-07-03T09:32:47","guid":{"rendered":"https:\/\/www.hostnic.id\/blog\/?p=3492"},"modified":"2020-07-03T09:34:47","modified_gmt":"2020-07-03T09:34:47","slug":"membuat-efek-ketikan-pada-text-di-website","status":"publish","type":"post","link":"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-efek-ketikan-pada-text-di-website\/","title":{"rendered":"Membuat efek ketikan pada text di Website"},"content":{"rendered":"<p>Pernah gak sih kalian menemukan website terus ngeliat ada tulisan yang kaya diketik gitu padahal kita gak mencet apa-apa ? Tenang itu bukan hantu kok hehehe, itu adalah sebuah fungsi yang dipakai oleh web developer untuk mempercantik tampilan webnya. Terus gimana buatnya ? Iya nanti mimin kasih tau kok caranya beserta source codenya juga kok hehe.<\/p>\n<p>Jadi kali ini kita akan melanjutkan project website portofolio yang sebelumnya sudah sampai jumbotron, bagi yang belum lihat bisa dibaca dan dipelajari dulu ya &#8230;<\/p>\n<p><a href=\"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-jumbotron-di-website\/\">Membuat jumbotron di Website<\/a><\/p>\n<p>Nah setelah itu, mari kita ganti tulisan yg menunjukan &#8220;skill&#8221; yang kita input memakai efek ketikan gitu. Bukan hanya 1 loh, tapi bisa digunakan untuk beberapa kalimat juga. Pasti keren banget deh apalagi nanti kalo ada HRD melihat halaman website kita hehe.<\/p>\n<p><strong>Eksekusi<\/strong><\/p>\n<ul>\n<li>Pertama, kita memakai javascript untuk membuat efek ketikan pada teks tersebut<\/li>\n<li>Kedua, buka VS Code kalian dan open folder website<\/li>\n<li>Ketiga, open file html kalian<\/li>\n<li>Keempat, copy paste kan code dibawah ini kedalam folder html kalian :\n<div>&lt;!&#8211;\u00a0Skill\u00a0Text\u00a0Slider\u00a0&#8211;&gt;<\/div>\n<div>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"color: #ff0000\">&lt;div\u00a0class=&#8221;skill&#8221;&gt;<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;form\u00a0name=&#8221;news&#8221;&gt;<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input\u00a0name=&#8221;news2&#8243;\u00a0type=&#8221;text&#8221;\u00a0wrap=virtual&gt;&lt;\/input&gt;<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/form&gt;<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;script\u00a0language=JavaScript&gt;<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var\u00a0newsText\u00a0=\u00a0new\u00a0Array();<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0newsText[0]\u00a0=\u00a0&#8220;Selamat\u00a0Datang\u00a0di\u00a0Websiteku&#8221;;<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0newsText[1]\u00a0=\u00a0&#8220;Frontend\u00a0Web\u00a0Developer&#8221;;<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0newsText[2]\u00a0=\u00a0&#8220;Graphic\u00a0Designer&#8221;;<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0newsText[3]\u00a0=\u00a0&#8220;Video\u00a0Editor&#8221;;<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0newsText[4]\u00a0=\u00a0&#8220;Universitas\u00a0Pelita\u00a0Bangsa&#8221;;<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var\u00a0ttloop\u00a0=\u00a01;\u00a0\u00a0\u00a0\u00a0\/\/\u00a0Repeat\u00a0forever?\u00a0(1\u00a0=\u00a0True;\u00a00\u00a0=\u00a0False)<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var\u00a0tspeed\u00a0=\u00a050;\u00a0\u00a0\u00a0\/\/\u00a0Typing\u00a0speed\u00a0in\u00a0milliseconds\u00a0(larger\u00a0number\u00a0=\u00a0slower)<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var\u00a0tdelay\u00a0=\u00a01000;\u00a0\/\/\u00a0Time\u00a0delay\u00a0between\u00a0newsTexts\u00a0in\u00a0milliseconds<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/\u00a0&#8212;&#8212;&#8212;&#8212;-\u00a0JANGAN\u00a0DI\u00a0EDIT\u00a0DISINI\u00a0&#8212;&#8212;&#8212;&#8212;-\u00a0\\\\<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var\u00a0dwAText,\u00a0cnews=0,\u00a0eline=0,\u00a0cchar=0,\u00a0mxText;<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0function\u00a0doNews()\u00a0{<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0mxText\u00a0=\u00a0newsText.length\u00a0&#8211;\u00a01;<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0dwAText\u00a0=\u00a0newsText[cnews];<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0setTimeout(&#8220;addChar()&#8221;,1000)<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0function\u00a0addNews()\u00a0{<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0cnews\u00a0+=\u00a01;<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if\u00a0(cnews\u00a0&lt;=\u00a0mxText)\u00a0{<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0dwAText\u00a0=\u00a0newsText[cnews];<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if\u00a0(dwAText.length\u00a0!=\u00a00)\u00a0{<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0document.news.news2.value\u00a0=\u00a0&#8220;&#8221;;<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0eline\u00a0=\u00a00;<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0setTimeout(&#8220;addChar()&#8221;,tspeed)<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/Biarin\u00a0aja<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0function\u00a0addChar()\u00a0{<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if\u00a0(eline!=1)\u00a0{<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if\u00a0(cchar\u00a0!=\u00a0dwAText.length)\u00a0{<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0nmttxt\u00a0=\u00a0&#8220;&#8221;;\u00a0for\u00a0(var\u00a0k=0;\u00a0k&lt;=cchar;k++)\u00a0nmttxt\u00a0+=\u00a0dwAText.charAt(k);<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0document.news.news2.value\u00a0=\u00a0nmttxt;<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0cchar\u00a0+=\u00a01;<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if\u00a0(cchar\u00a0!=\u00a0dwAText.length)\u00a0document.news.news2.value\u00a0+=\u00a0&#8220;_&#8221;;<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\u00a0else\u00a0{<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0cchar\u00a0=\u00a00;<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0eline\u00a0=\u00a01;<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if\u00a0(mxText==cnews\u00a0&amp;&amp;\u00a0eline!=0\u00a0&amp;&amp;\u00a0ttloop!=0)\u00a0{<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0cnews\u00a0=\u00a00;\u00a0setTimeout(&#8220;addNews()&#8221;,tdelay);<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\u00a0else\u00a0setTimeout(&#8220;addChar()&#8221;,tspeed);<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\u00a0else\u00a0{<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0setTimeout(&#8220;addNews()&#8221;,tdelay)<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0doNews()<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/script&gt;<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;<\/span><\/div>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"3495\" data-permalink=\"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-efek-ketikan-pada-text-di-website\/attachment\/screenshot_15\/\" data-orig-file=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_15.png?fit=1365%2C767&amp;ssl=1?v=1593768464\" data-orig-size=\"1365,767\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Screenshot_15\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_15.png?fit=1024%2C575&amp;ssl=1?v=1593768464\" class=\"aligncenter wp-image-3495\" src=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_15.png?resize=572%2C322&#038;ssl=1\" alt=\"\" width=\"572\" height=\"322\" srcset=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_15.png?resize=300%2C169&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_15.png?resize=1024%2C575&amp;ssl=1 1024w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_15.png?resize=768%2C432&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_15.png?resize=740%2C415&amp;ssl=1 740w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_15.png?resize=310%2C175&amp;ssl=1 310w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_15.png?w=1365&amp;ssl=1 1365w\" sizes=\"auto, (max-width: 572px) 100vw, 572px\" \/><\/li>\n<li>Lalu pada file css kalian copy paste kan code dibawah ini :\n<div><\/div>\n<div><span style=\"color: #ff0000\">@media\u00a0(min-width:\u00a0992px)\u00a0{<\/span><\/div>\n<div><span style=\"color: #ff0000\">.skill\u00a0input\u00a0{<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0background:\u00a0none;<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0border:\u00a0none;<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0color:\u00a0white;<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0padding:\u00a02px;<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0width:\u00a0600px;<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0justify-content:\u00a0center;<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0font-size:\u00a02rem;<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0font-weight:\u00a0400;<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0font-family:\u00a0SB\u00a0Heading,-apple-system,BlinkMacSystemFont,Segoe\u00a0UI,Roboto,Helvetica\u00a0Neue,Arial,Noto\u00a0Sans,sans-serif,Apple\u00a0Color\u00a0Emoji,Segoe\u00a0UI\u00a0Emoji,Segoe\u00a0UI\u00a0Symbol,Noto\u00a0Color\u00a0Emoji;<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0text-align:\u00a0center;<\/span><\/div>\n<div><span style=\"color: #ff0000\">}\u00a0}<\/span><\/div>\n<div><span style=\"color: #ff0000\">.skill\u00a0input\u00a0{<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0background:\u00a0none;<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0border:\u00a0none;<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0color:\u00a0white;<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0padding:\u00a02px;<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0width:\u00a0320px;<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0justify-content:\u00a0center;<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0font-size:\u00a01.5rem;<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0font-weight:\u00a0400;<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0font-family:\u00a0SB\u00a0Heading,-apple-system,BlinkMacSystemFont,Segoe\u00a0UI,Roboto,Helvetica\u00a0Neue,Arial,Noto\u00a0Sans,sans-serif,Apple\u00a0Color\u00a0Emoji,Segoe\u00a0UI\u00a0Emoji,Segoe\u00a0UI\u00a0Symbol,Noto\u00a0Color\u00a0Emoji;<\/span><\/div>\n<div><span style=\"color: #ff0000\">\u00a0\u00a0\u00a0\u00a0text-align:\u00a0center;<\/span><\/div>\n<div><span style=\"color: #ff0000\">}<\/span><\/div>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"3496\" data-permalink=\"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-efek-ketikan-pada-text-di-website\/attachment\/screenshot_16\/\" data-orig-file=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_16.png?fit=1365%2C765&amp;ssl=1?v=1593768489\" data-orig-size=\"1365,765\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Screenshot_16\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_16.png?fit=1024%2C574&amp;ssl=1?v=1593768489\" class=\"aligncenter wp-image-3496\" src=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_16.png?resize=637%2C357&#038;ssl=1\" alt=\"\" width=\"637\" height=\"357\" srcset=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_16.png?resize=300%2C168&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_16.png?resize=1024%2C574&amp;ssl=1 1024w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_16.png?resize=768%2C430&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_16.png?resize=740%2C415&amp;ssl=1 740w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_16.png?resize=310%2C175&amp;ssl=1 310w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_16.png?w=1365&amp;ssl=1 1365w\" sizes=\"auto, (max-width: 637px) 100vw, 637px\" \/><\/li>\n<\/ul>\n<p>Setelah sukses, lihat hasilnya menggunakan live server atau akses file html kalian melalu web browser yg dimiliki.<\/p>\n<p>Untuk contoh hasil bisa lihat video dibawah ini ya&#8230;<\/p>\n<div class=\"wp-playlist wp-video-playlist wp-playlist-light\">\n\t\t<video controls=\"controls\" preload=\"none\" width=\"640\"\n\t\t height=\"361\"\t><\/video>\n\t<div class=\"wp-playlist-next\"><\/div>\n\t<div class=\"wp-playlist-prev\"><\/div>\n\t<noscript>\n\t<ol>\n\t\t<li><a href='https:\/\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/2020-07-03-15-24-25_Trim.mp4'>2020-07-03-15-24-25_Trim<\/a><\/li>\t<\/ol>\n\t<\/noscript>\n\t<script type=\"application\/json\" class=\"wp-playlist-script\">{\"type\":\"video\",\"tracklist\":true,\"tracknumbers\":true,\"images\":true,\"artists\":true,\"tracks\":[{\"src\":\"https:\/\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/2020-07-03-15-24-25_Trim.mp4\",\"type\":\"video\/mp4\",\"title\":\"2020-07-03-15-24-25_Trim\",\"caption\":\"\",\"description\":\"\",\"meta\":{\"length_formatted\":\"0:16\"},\"dimensions\":{\"original\":{\"width\":1360,\"height\":768},\"resized\":{\"width\":640,\"height\":361}},\"image\":{\"src\":\"https:\/\/www.hostnic.id\/blog\/wp-includes\/images\/media\/video.svg\",\"width\":48,\"height\":64},\"thumb\":{\"src\":\"https:\/\/www.hostnic.id\/blog\/wp-includes\/images\/media\/video.svg\",\"width\":48,\"height\":64}}]}<\/script>\n<\/div>\n\t\n","protected":false},"excerpt":{"rendered":"<p>Pernah gak sih kalian menemukan website terus ngeliat ada tulisan yang kaya diketik gitu padahal kita gak mencet apa-apa ? Tenang itu bukan hantu kok hehehe, itu adalah sebuah fungsi yang dipakai oleh web developer untuk mempercantik tampilan webnya. Terus gimana buatnya ? Iya nanti mimin kasih tau kok caranya beserta source codenya juga kok [&hellip;]<\/p>\n","protected":false},"author":18,"featured_media":3495,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[246,79,248,82],"tags":[],"class_list":["post-3492","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bootstrap","category-tutorial","category-v4","category-website"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Membuat efek ketikan pada text di Website - Hostnic.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.hostnic.id\/blog\/tutorial\/membuat-efek-ketikan-pada-text-di-website\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Membuat efek ketikan pada text di Website - Hostnic.id\" \/>\n<meta property=\"og:description\" content=\"Pernah gak sih kalian menemukan website terus ngeliat ada tulisan yang kaya diketik gitu padahal kita gak mencet apa-apa ? Tenang itu bukan hantu kok hehehe, itu adalah sebuah fungsi yang dipakai oleh web developer untuk mempercantik tampilan webnya. Terus gimana buatnya ? Iya nanti mimin kasih tau kok caranya beserta source codenya juga kok [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-efek-ketikan-pada-text-di-website\/\" \/>\n<meta property=\"og:site_name\" content=\"Hostnic.id\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-03T09:32:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-07-03T09:34:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_15.png?v=1593768464\" \/>\n\t<meta property=\"og:image:width\" content=\"1365\" \/>\n\t<meta property=\"og:image:height\" content=\"767\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Monic\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Ditulis oleh\" \/>\n\t<meta name=\"twitter:data1\" content=\"Monic\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimasi waktu membaca\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 menit\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/membuat-efek-ketikan-pada-text-di-website\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/membuat-efek-ketikan-pada-text-di-website\\\/\"},\"author\":{\"name\":\"Monic\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/#\\\/schema\\\/person\\\/07d47eecbbce5d998aaf01aa209cb5b2\"},\"headline\":\"Membuat efek ketikan pada text di Website\",\"datePublished\":\"2020-07-03T09:32:47+00:00\",\"dateModified\":\"2020-07-03T09:34:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/membuat-efek-ketikan-pada-text-di-website\\\/\"},\"wordCount\":495,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/membuat-efek-ketikan-pada-text-di-website\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/www.hostnic.id\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/Screenshot_15.png?fit=1365%2C767&ssl=1?v=1593768464\",\"articleSection\":[\"Bootstrap\",\"Tutorial\",\"v4\",\"Website\"],\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/membuat-efek-ketikan-pada-text-di-website\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/membuat-efek-ketikan-pada-text-di-website\\\/\",\"url\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/membuat-efek-ketikan-pada-text-di-website\\\/\",\"name\":\"Membuat efek ketikan pada text di Website - Hostnic.id\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/membuat-efek-ketikan-pada-text-di-website\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/membuat-efek-ketikan-pada-text-di-website\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/www.hostnic.id\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/Screenshot_15.png?fit=1365%2C767&ssl=1?v=1593768464\",\"datePublished\":\"2020-07-03T09:32:47+00:00\",\"dateModified\":\"2020-07-03T09:34:47+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/#\\\/schema\\\/person\\\/07d47eecbbce5d998aaf01aa209cb5b2\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/membuat-efek-ketikan-pada-text-di-website\\\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/membuat-efek-ketikan-pada-text-di-website\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/membuat-efek-ketikan-pada-text-di-website\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.hostnic.id\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/Screenshot_15.png?fit=1365%2C767&ssl=1?v=1593768464\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/www.hostnic.id\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/Screenshot_15.png?fit=1365%2C767&ssl=1?v=1593768464\",\"width\":1365,\"height\":767},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/membuat-efek-ketikan-pada-text-di-website\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Membuat efek ketikan pada text di Website\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/\",\"name\":\"hostnic.id\",\"description\":\"Info, Tips dan Tutorial Seputar Layanan Hostnic\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"id\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/#\\\/schema\\\/person\\\/07d47eecbbce5d998aaf01aa209cb5b2\",\"name\":\"Monic\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/618c16e73ff4b8611ffef11074c3fc0cd2557bbef47ecbcce803b2dd1b3e7284?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/618c16e73ff4b8611ffef11074c3fc0cd2557bbef47ecbcce803b2dd1b3e7284?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/618c16e73ff4b8611ffef11074c3fc0cd2557bbef47ecbcce803b2dd1b3e7284?s=96&d=mm&r=g\",\"caption\":\"Monic\"},\"url\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/author\\\/blog-writer\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Membuat efek ketikan pada text di Website - Hostnic.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.hostnic.id\/blog\/tutorial\/membuat-efek-ketikan-pada-text-di-website\/","og_locale":"id_ID","og_type":"article","og_title":"Membuat efek ketikan pada text di Website - Hostnic.id","og_description":"Pernah gak sih kalian menemukan website terus ngeliat ada tulisan yang kaya diketik gitu padahal kita gak mencet apa-apa ? Tenang itu bukan hantu kok hehehe, itu adalah sebuah fungsi yang dipakai oleh web developer untuk mempercantik tampilan webnya. Terus gimana buatnya ? Iya nanti mimin kasih tau kok caranya beserta source codenya juga kok [&hellip;]","og_url":"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-efek-ketikan-pada-text-di-website\/","og_site_name":"Hostnic.id","article_published_time":"2020-07-03T09:32:47+00:00","article_modified_time":"2020-07-03T09:34:47+00:00","og_image":[{"width":1365,"height":767,"url":"https:\/\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_15.png?v=1593768464","type":"image\/png"}],"author":"Monic","twitter_card":"summary_large_image","twitter_misc":{"Ditulis oleh":"Monic","Estimasi waktu membaca":"2 menit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-efek-ketikan-pada-text-di-website\/#article","isPartOf":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-efek-ketikan-pada-text-di-website\/"},"author":{"name":"Monic","@id":"https:\/\/www.hostnic.id\/blog\/#\/schema\/person\/07d47eecbbce5d998aaf01aa209cb5b2"},"headline":"Membuat efek ketikan pada text di Website","datePublished":"2020-07-03T09:32:47+00:00","dateModified":"2020-07-03T09:34:47+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-efek-ketikan-pada-text-di-website\/"},"wordCount":495,"commentCount":0,"image":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-efek-ketikan-pada-text-di-website\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_15.png?fit=1365%2C767&ssl=1?v=1593768464","articleSection":["Bootstrap","Tutorial","v4","Website"],"inLanguage":"id","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-efek-ketikan-pada-text-di-website\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-efek-ketikan-pada-text-di-website\/","url":"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-efek-ketikan-pada-text-di-website\/","name":"Membuat efek ketikan pada text di Website - Hostnic.id","isPartOf":{"@id":"https:\/\/www.hostnic.id\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-efek-ketikan-pada-text-di-website\/#primaryimage"},"image":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-efek-ketikan-pada-text-di-website\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_15.png?fit=1365%2C767&ssl=1?v=1593768464","datePublished":"2020-07-03T09:32:47+00:00","dateModified":"2020-07-03T09:34:47+00:00","author":{"@id":"https:\/\/www.hostnic.id\/blog\/#\/schema\/person\/07d47eecbbce5d998aaf01aa209cb5b2"},"breadcrumb":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-efek-ketikan-pada-text-di-website\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-efek-ketikan-pada-text-di-website\/"]}]},{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-efek-ketikan-pada-text-di-website\/#primaryimage","url":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_15.png?fit=1365%2C767&ssl=1?v=1593768464","contentUrl":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_15.png?fit=1365%2C767&ssl=1?v=1593768464","width":1365,"height":767},{"@type":"BreadcrumbList","@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-efek-ketikan-pada-text-di-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hostnic.id\/blog\/"},{"@type":"ListItem","position":2,"name":"Membuat efek ketikan pada text di Website"}]},{"@type":"WebSite","@id":"https:\/\/www.hostnic.id\/blog\/#website","url":"https:\/\/www.hostnic.id\/blog\/","name":"hostnic.id","description":"Info, Tips dan Tutorial Seputar Layanan Hostnic","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hostnic.id\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"id"},{"@type":"Person","@id":"https:\/\/www.hostnic.id\/blog\/#\/schema\/person\/07d47eecbbce5d998aaf01aa209cb5b2","name":"Monic","image":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/secure.gravatar.com\/avatar\/618c16e73ff4b8611ffef11074c3fc0cd2557bbef47ecbcce803b2dd1b3e7284?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/618c16e73ff4b8611ffef11074c3fc0cd2557bbef47ecbcce803b2dd1b3e7284?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/618c16e73ff4b8611ffef11074c3fc0cd2557bbef47ecbcce803b2dd1b3e7284?s=96&d=mm&r=g","caption":"Monic"},"url":"https:\/\/www.hostnic.id\/blog\/author\/blog-writer\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_15.png?fit=1365%2C767&ssl=1?v=1593768464","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8D2mv-Uk","jetpack-related-posts":[{"id":3486,"url":"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-jumbotron-di-website\/","url_meta":{"origin":3492,"position":0},"title":"Membuat jumbotron di Website","author":"Monic","date":"2020-07-02","format":false,"excerpt":"\u00a0 Hallo sobat Hostnic... Oke, kita lanjutkan project website yang sudah pernah kita buat. Kali ini kita akan membuat jumbotron di website kita. Apa sih Jumbotron itu ? Jumbotron merupakan suatu elemen pada website yang digunakan untuk menyampaikan informasi dari website atau pengumuman pada website. Website yang akan kita buat\u2026","rel":"","context":"dalam &quot;Bootstrap&quot;","block_context":{"text":"Bootstrap","link":"https:\/\/www.hostnic.id\/blog\/.\/tutorial\/website\/bootstrap\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_14.png?fit=1200%2C586&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_14.png?fit=1200%2C586&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_14.png?fit=1200%2C586&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_14.png?fit=1200%2C586&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_14.png?fit=1200%2C586&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":3377,"url":"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-navbar-lebih-rapih\/","url_meta":{"origin":3492,"position":1},"title":"Membuat navbar lebih rapih","author":"Monic","date":"2020-06-17","format":false,"excerpt":"\u00a0 Hallo sobat Hostnic... Nah sekarang saatnya mimin kasih tau agar navbar atau Navigation Bar di website kita bisa lebih rapih dan yang pasti enak untuk dilihat terutama HRD perusahaan yang akan kita lamar nantinya. Sebelumnya dibaca juga : Cara menghubungkan HTML dengan CSS Cara membuat navbar mudah \u00a0 Nah\u2026","rel":"","context":"dalam &quot;Bootstrap&quot;","block_context":{"text":"Bootstrap","link":"https:\/\/www.hostnic.id\/blog\/.\/tutorial\/website\/bootstrap\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_5-1.png?fit=1200%2C674&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_5-1.png?fit=1200%2C674&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_5-1.png?fit=1200%2C674&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_5-1.png?fit=1200%2C674&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_5-1.png?fit=1200%2C674&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":3328,"url":"https:\/\/www.hostnic.id\/blog\/tutorial\/cara-download-jquery-dan-menggunakannya-di-website\/","url_meta":{"origin":3492,"position":2},"title":"Cara download jQuery dan menggunakannya di Website","author":"Monic","date":"2020-06-15","format":false,"excerpt":"Hallo sobat Hostnic.. Sebelum kita melanjutan coding mimin mau ngasih tips dan trik agar website yang nanti akan kita biar gak terlalu monoton atau flat. Caranya adalah dengan menggunakan script yaitu jQuery, yaps bagi yang sudah pernah membuat website nama ini sangat familiar dikalangan web developer. Pengenalan jQuery jQuery adalah\u2026","rel":"","context":"dalam &quot;Tutorial&quot;","block_context":{"text":"Tutorial","link":"https:\/\/www.hostnic.id\/blog\/.\/tutorial\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/jQuery-featured-duniailkom.png?fit=730%2C430&ssl=1%3Fv%3D1592221622&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/jQuery-featured-duniailkom.png?fit=730%2C430&ssl=1%3Fv%3D1592221622&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/jQuery-featured-duniailkom.png?fit=730%2C430&ssl=1%3Fv%3D1592221622&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/jQuery-featured-duniailkom.png?fit=730%2C430&ssl=1%3Fv%3D1592221622&resize=700%2C400 2x"},"classes":[]},{"id":6450,"url":"https:\/\/www.hostnic.id\/blog\/teknologi\/cara-melihat-nama-pembuat-website-dengan-mudah\/","url_meta":{"origin":3492,"position":3},"title":"Cara Melihat Nama Pembuat Website Dengan Mudah","author":"Monic","date":"2023-08-18","format":false,"excerpt":"Hostnic.id\u00a0\u2013\u00a0Halo pembaca setia, bagaimana kabar Kamu hari ini? Pada kesempatan kali ini, kita akan membahas tentang cara melihat nama pembuat website dengan mudah. Saat ini, semakin banyak orang yang mulai tertarik untuk membuat website sebagai media untuk mengekspresikan diri atau bahkan sebagai sarana bisnis. Namun, terkadang kita ingin mengetahui siapa\u2026","rel":"","context":"dalam &quot;Teknologi&quot;","block_context":{"text":"Teknologi","link":"https:\/\/www.hostnic.id\/blog\/.\/teknologi\/"},"img":{"alt_text":"Cara Melihat Nama Pembuat Website Dengan Mudah","src":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2023\/08\/PB.png?fit=1020%2C578&ssl=1%3Fv%3D1692338135&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2023\/08\/PB.png?fit=1020%2C578&ssl=1%3Fv%3D1692338135&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2023\/08\/PB.png?fit=1020%2C578&ssl=1%3Fv%3D1692338135&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2023\/08\/PB.png?fit=1020%2C578&ssl=1%3Fv%3D1692338135&resize=700%2C400 2x"},"classes":[]},{"id":9280,"url":"https:\/\/www.hostnic.id\/blog\/teknologi\/contoh-coding-html-website-pribadi-membangun-karya-digital-yang-personal\/","url_meta":{"origin":3492,"position":4},"title":"Contoh Coding HTML Website Pribadi: Membangun Karya Digital Yang Personal","author":"Monic","date":"2024-03-08","format":false,"excerpt":"Halo pembaca yang terhormat! Bagaimana kabar Kamu? Selamat datang di artikel kami yang akan membahas tentang contoh coding HTML untuk website pribadi. Kami sangat senang bisa berbagi pengetahuan ini dengan Kamu. Mari kita mulai dengan memberikan salam hangat kepada Kamu di paragraf pertama ini. Silakan lanjutkan membaca untuk mengetahui lebih\u2026","rel":"","context":"dalam &quot;Teknologi&quot;","block_context":{"text":"Teknologi","link":"https:\/\/www.hostnic.id\/blog\/.\/teknologi\/"},"img":{"alt_text":"Contoh Coding HTML Website Pribadi: Membangun Karya Digital Yang Personal","src":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2024\/03\/WA.jpg?fit=883%2C515&ssl=1%3Fv%3D1709877477&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2024\/03\/WA.jpg?fit=883%2C515&ssl=1%3Fv%3D1709877477&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2024\/03\/WA.jpg?fit=883%2C515&ssl=1%3Fv%3D1709877477&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2024\/03\/WA.jpg?fit=883%2C515&ssl=1%3Fv%3D1709877477&resize=700%2C400 2x"},"classes":[]},{"id":3583,"url":"https:\/\/www.hostnic.id\/blog\/tutorial\/tips\/ingin-punya-website-simak-disini\/","url_meta":{"origin":3492,"position":5},"title":"Ingin punya website ? Simak disini.","author":"Monic","date":"2020-07-08","format":false,"excerpt":"Kamu seorang pebisnis atau mahasiswa atau penjual yang ingin melebarkan sayap usahamu atau juga kamu hanya orang biasa yang ingin mempunyai website ? Siapapun kamu, semua orang dapat untuk mempunyai website, mulai dari website untuk e-commerce (jual-beli online), web komunitas, web profil perusahaan, maupun web pribadi untuk melamar suatu pekerjaan.\u2026","rel":"","context":"dalam &quot;Berita&quot;","block_context":{"text":"Berita","link":"https:\/\/www.hostnic.id\/blog\/.\/berita\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/images.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/posts\/3492","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/comments?post=3492"}],"version-history":[{"count":2,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/posts\/3492\/revisions"}],"predecessor-version":[{"id":3497,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/posts\/3492\/revisions\/3497"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/media\/3495"}],"wp:attachment":[{"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/media?parent=3492"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/categories?post=3492"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/tags?post=3492"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}