tag:blogger.com,1999:blog-90872988992364005282024-12-19T10:25:50.696+07:00PintasanOKEJalan pintas paling oke buat para blogger. PintasanOKE mencakup tutorial blog, template blogger, berita terkini seputar internet, dan banyak lagi.Ghufroni Sholihhttp://www.blogger.com/profile/12492584548556916477noreply@blogger.comBlogger4125tag:blogger.com,1999:blog-9087298899236400528.post-83932121448053261612016-04-23T09:38:00.003+07:002016-05-18T10:18:34.588+07:00Cara Defer @font-face<div itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject'> <meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk5B5KTMP4liCIL23WKegby_1S895wqwTSWfu72k4P1Dl_DuxbrV7dqtT1bUeav_rZVKgYzs0yozMqIE96YpAdK_YFrqKpceDQrlN2XUKIT83X6SgQh8BsgLw4Szx1lts8o06bhllgVhQ/s1600/cara-defer-font-face-blog.png' name='twitter:image'/> <meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk5B5KTMP4liCIL23WKegby_1S895wqwTSWfu72k4P1Dl_DuxbrV7dqtT1bUeav_rZVKgYzs0yozMqIE96YpAdK_YFrqKpceDQrlN2XUKIT83X6SgQh8BsgLw4Szx1lts8o06bhllgVhQ/s1600/cara-defer-font-face-blog.png' itemprop='url'/> <meta content='700' itemprop='width'/> <meta content='700' itemprop='height'/> </div> <p class='snippet-post'> Defer(menunda pemuatan) @font-face ini berguna untuk mengurangi HTTP Request yang mempengaruhi kecepatan muat suatu halaman. </p> <a name='more'></a> <img class='img-post no-postDisplay' alt="Cara Defer @font-face" title="Cara Defer @font-face" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk5B5KTMP4liCIL23WKegby_1S895wqwTSWfu72k4P1Dl_DuxbrV7dqtT1bUeav_rZVKgYzs0yozMqIE96YpAdK_YFrqKpceDQrlN2XUKIT83X6SgQh8BsgLw4Szx1lts8o06bhllgVhQ/s1600/cara-defer-font-face-blog.png" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk5B5KTMP4liCIL23WKegby_1S895wqwTSWfu72k4P1Dl_DuxbrV7dqtT1bUeav_rZVKgYzs0yozMqIE96YpAdK_YFrqKpceDQrlN2XUKIT83X6SgQh8BsgLw4Szx1lts8o06bhllgVhQ/s1600/cara-defer-font-face-blog.png" width="0" height="0" /> <p class='p-post'> Sobat menggunakan @font-face pada template blog sobat ? kalau sobat menggunakan @font-face, biasanya saat sobat cek kecepatan di gtmetrix sobat akan melihat banyaknya HTTP Request yang salah-satunya disebabkan oleh @font-face ini. Padahal semakin banyak HTTP Request maka waktu yang dibutuhkan untuk memuat suatu halaman akan jadi lebih lama. </p> <p class='p-post'> Cara ini sebenarnya hanyalah penambahan class pada elemen html dengan bantuan javascript. Sehingga @font-face baru dimuat setelah class ditambahkan pada elemen html tersebut. Cara ini juga menggunakan <span class='po-tt' data-judul='pengertian' data-deskripsi='Data yang dibuat oleh website saat seorang pengunjung mengunjungi website tersebut dan menyimpannya dalam bentuk file teks pada komputer si pengunjung, itulah cookie.' data-link='&lt;a class=&quot;tt-more&quot; href=&quot;https://pintasanoke.blogspot.com/2016/04/javascript-cookie.html&quot; target=&quot;_blank&quot;&gt;&lt;i class=&quot;mdi mdi-plus&quot;/&gt;&lt;/a&gt;'>cookie</span> agar font lebih cepat dimuat saat pemuatan halaman untuk kedua kalinya dan seterusnya. </p> <h2>Cara Pemasangan</h2> <p class='p-post'> 1.Pertama, Karena pada cara ini kita akan menggunakan cookie maka bagi sobat yang belum pasang javascript cookie, silahkan pasang terlebih dahulu. caranya ada <a class='link-blue' href='https://pintasanoke.blogspot.com/2016/04/javascript-cookie.html' target='_blank'>disini</a>. Kalau sudah pasang ga usah dipasang lagi sob. </p> <p class='p-post'> 2. Selanjutnya, pasang kode dibawah ini dan letakkan tepat dibawah kode javascript cookie-nya : </p> <div class='code-tab js'> <ul class='tab-pre'><li class='pre-uncompressed aktif'>Uncompressed</li><li class='pre-compressed'>Compressed</li><li class='clear'></li></ul> <pre><code class='javascript uncompressed'> &lt;script type=&quot;text/javascript&quot;&gt; //&lt;![CDATA[ function deferFont() { document.getElementsByTagName("html")[0].setAttribute("class", "font-loaded"); createCookie("fontEX", null, 7e3) } if (readCookie("fontEX")) { document.getElementsByTagName("html")[0].setAttribute("class", "font-loaded") } else { if (window.addEventListener) { window.addEventListener("load", deferFont, false) } else if (window.attachEvent) { window.attachEvent("onload", deferFont) } else { window.onload = deferFont } } //]]&gt; &lt;script&gt; </code><code class='javascript compressed kode hide'> &lt;script type=&quot;text/javascript&quot;&gt;<br/> //&lt;![CDATA[<br/> function deferFont(){document.getElementsByTagName("html")[0].setAttribute("class","font-loaded"),createCookie("fontEX",null,7e3)}readCookie("fontEX")?document.getElementsByTagName("html")[0].setAttribute("class","font-loaded"):window.addEventListener?window.addEventListener("load",deferFont,!1):window.attachEvent?window.attachEvent("onload",deferFont):window.onload=deferFont;<br/> //]]&gt;<br/> &lt;script&gt; </code></pre> </div> <p class='p-post'> Sebenarnya kode diatas dapat sobat letakkan dimana saja sesuai keinginan, yang penting harus dibawah kode javascript cookie-nya. Tapi saya anjurkan untuk meletakkan kode javascript cookie dan kode diatas tadi, dibawah &lt;body&gt; bukan diatas &lt;/body&gt;. Ini dilakukan agar font dimuat sesegera mungkin. </p> <p class='p-post'> 3. Setelah kode diatas terpasang kita beralih ke kode cssnya. Pertama, sobat harus temukan kode css yang ada <i>font:</i> dan <i>font-family:</i>-nya, setelah itu sobat ikuti seperti yang saya contohkan dibawah ini : </p> <pre class='code-snippet'><code class='css'> /* KODE CSS ELEMEN DENGAN FONT-FAMILY: */ body { font-family: "Roboto Condensed", Arial, Tahoma, Verdana; font-weight: normal; font-style: normal; font-size: 16px } /* RUBAH KODE DIATAS MENJADI SEPERTI INI : */ body { font-weight: normal; font-style: normal; font-size: 16px } .font-loaded body { font-family: "Roboto Condensed", Arial, Tahoma, Verdana } /* KODE CSS ELEMEN DENGAN FONT: */ .post { font:normal normal 16px/1.5 "Roboto Condensed", Arial, Tahoma, Verdana } /* RUBAH KODE DIATAS MENJADI SEPERTI INI : */ .post { font-weight: normal; font-style: normal; font-size: 16px; line-height:1.5em } .font-loaded .post { font-family: "Roboto Condensed", Arial, Tahoma, Verdana } </code></pre> <p class='p-post'> Masih bingung sob ? nih lihat demo dan kodenya biar ga bingung lagi : </p> <div class='iframe-post'> <iframe height='250' scrolling='no' data-src='//codepen.io/guprooon/embed/VaxzVP/?height=250&theme-id=0&default-tab=result' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/guprooon/pen/VaxzVP/' rel='nofollow'>Cara Defer @font-face</a> by Ghufroni Sholih (<a href='https://codepen.io/guprooon' rel='nofollow'>@guprooon</a>) on CodePen. </iframe> </div> <p class='p-post'> Sekian artikel tentang <a class='link-blue' href='https://pintasanoke.blogspot.com/2016/04/cara-defer-font-face.html'>cara defer @font-face</a> ini. Jika ada yang kurang jelas silahkan bertanya di kolom komentar. Terima kasih.</p> <div style="display:none;">Tag : <span class="artikel-kategori"><a href="https://pintasanoke.blogspot.com/search/label/Kecepatan &amp; Performa?&max-results=21" title="Categories" rel='nofollow' target='_blank'>Kecepatan &amp; Performa</a></span></div>Ghufroni Sholihhttp://www.blogger.com/profile/12492584548556916477noreply@blogger.com0tag:blogger.com,1999:blog-9087298899236400528.post-6095352102303387112016-04-15T22:14:00.000+07:002016-05-17T09:50:11.456+07:00Membuat Night Mode Di Blog Dengan Cookie<div itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject'> <meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg281UpQQZuc1DcO-GdtJRpyf7W8a6Ch2ZUw65cbM9_d6Al38EUqCGWPv9vzVu6MLt0kr4ArgUIYGw2FtKsELyU2N5Mv04rfdlb5am12HotO3YOuBfTH0QSAsSsWSmOR2O9bBWZYyGldCE/s1600/cara-membuat-night-mode-blog.png' name='twitter:image'/> <meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg281UpQQZuc1DcO-GdtJRpyf7W8a6Ch2ZUw65cbM9_d6Al38EUqCGWPv9vzVu6MLt0kr4ArgUIYGw2FtKsELyU2N5Mv04rfdlb5am12HotO3YOuBfTH0QSAsSsWSmOR2O9bBWZYyGldCE/s1600/cara-membuat-night-mode-blog.png' itemprop='url'/> <meta content='700' itemprop='width'/> <meta content='700' itemprop='height'/> </div> <p class='snippet-post'> Night mode adalah sebuah fitur yang bertujuan untuk membuat tampilan menjadi gelap, ini dimaksudkan agar mata pengguna tidak sakit saat melihat layar dalam kondisi minim cahaya(gelap). </p> <a name='more'></a> <img class='img-post no-postDisplay' alt="Membuat Night Mode Di Blog Dengan Cookie" title="Membuat Night Mode Di Blog Dengan Cookie" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg281UpQQZuc1DcO-GdtJRpyf7W8a6Ch2ZUw65cbM9_d6Al38EUqCGWPv9vzVu6MLt0kr4ArgUIYGw2FtKsELyU2N5Mv04rfdlb5am12HotO3YOuBfTH0QSAsSsWSmOR2O9bBWZYyGldCE/s1/cara-membuat-night-mode-blog.png" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg281UpQQZuc1DcO-GdtJRpyf7W8a6Ch2ZUw65cbM9_d6Al38EUqCGWPv9vzVu6MLt0kr4ArgUIYGw2FtKsELyU2N5Mv04rfdlb5am12HotO3YOuBfTH0QSAsSsWSmOR2O9bBWZYyGldCE/s1600/cara-membuat-night-mode-blog.png" width="0" height="0" /> <p class='p-post'> Oke sob, Kali ini kita akan membahas bagaimana <a class='link-blue' href='https://pintasanoke.blogspot.com/2016/04/membuat-night-mode-blog-cookie.html'>cara membuat night mode di blog dengan bantuan cookie</a>. Saya rasa penjelasan saya diawal sudah jelas apa itu yang disebut night mode dan fungsinya untuk apa. Sekarang tinggal saya jelaskan sedikit apa kegunaan <span class='po-tt' data-judul='pengertian' data-deskripsi='Data yang dibuat oleh website saat seorang pengunjung mengunjungi website tersebut dan menyimpannya dalam bentuk file teks pada komputer si pengunjung, itulah cookie.' data-link='&lt;a class=&quot;tt-more&quot; href=&quot;https://pintasanoke.blogspot.com/2016/04/javascript-cookie.html&quot; target=&quot;_blank&quot;&gt;&lt;i class=&quot;mdi mdi-plus&quot;/&gt;&lt;/a&gt;'>cookie</span> pada fitur night mode ini. Jadi dengan bantuan cookie kita dapat mempertahankan night mode ini walaupun halaman dimuat ulang(reload) atau berpindah halaman sekalipun. </p> <p class='p-post'> Sekarang menurut saya sudah jelas semuanya. Mari kita beralih ke tahap selanjutnya yaitu cara pembuatan fitur night mode ini. </p> <h2>Cara Pembuatan</h2> <p class='p-post'> 1. Pertama-tama pasang dulu <span class='po-tt' data-judul='cara pasang' data-deskripsi='letakkan kode dibawah ini diatas &lt;/head&gt;' data-pre='&lt;script type=&quot;text/javascript&quot; src=&quot;http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js&quot;/&gt;'>jquery</span> di template sobat, jika sobat belum memasangnya. Soalnya nanti kita akan menggunakan kode jquery. </p> <p class='p-post'> 2. Setelah itu sobat juga harus memasang javascript cookienya. Untuk cara pemasangannya lihat artikel saya yang <a class='link-blue' href='https://pintasanoke.blogspot.com/2016/04/javascript-cookie.html' target='_blank'>ini</a> sob. </p> <p class='p-post'> 3. Selanjutnya, barulah kita buat tombol yang berfungsi untuk merubah ke night modenya. Sobat bisa letakkan kodenya dimana saja sesuai keinginan. </p> <pre class='code-snippet'><code class='html'> &lt;button id=&quot;night-mode&quot;&gt;Dark Mode&lt;/button&gt; </code></pre> <p class='p-post'> 3. Selanjutnya letakkan kode dibawah ini sebelum &lt;/body&gt;. </p> <div class='code-tab js'> <ul class='tab-pre'><li class='pre-uncompressed aktif'>Uncompressed</li><li class='pre-compressed'>Compressed</li><li class='clear'></li></ul> <pre><code class='javascript uncompressed'> &lt;script type=&quot;text/javascript&quot;&gt; //&lt;![CDATA[ $(document).ready(function() { if (readCookie("night")) { $("*").addClass("night"); $("#night-mode").html("Light Mode") } $("#night-mode").click(function() { if ($(this).hasClass("night")) { $("*").removeClass("night"); $("#night-mode").html("Dark Mode"); eraseCookie("night") } else { $("*").addClass("night"); $("#night-mode").html("Light Mode"); createCookie("night", null, 7000) } }) }) //]]&gt; &lt;script&gt; </code><code class='javascript kode compressed hide'> &lt;script type=&quot;text/javascript&quot;&gt;<br/> //&lt;![CDATA[<br/> $(document).ready(function(){readCookie("night")&&($("*").addClass("night"),$("#night-mode").html("Light Mode")),$("#night-mode").click(function(){$(this).hasClass("night")?($("*").removeClass("night"),$("#night-mode").html("Dark Mode"),eraseCookie("night")):($("*").addClass("night"),$("#night-mode").html("Light Mode"),createCookie("night",null,7e3))})});<br/> //]]&gt;<br/> &lt;script&gt; </code></pre> </div> <p class='p-post'> 5. Kalau sudah sekarang kita tinggal membuat kode cssnya agar tampilan berubah menjadi warna gelap semua. Caranya dengan menambah <i>.night</i> pada elemen yang ingin diubah warnanya. Supaya tidak bingung lihat contoh dibawah ini : </p> <pre class='code-snippet'><code class='css'> <mark class='mark-light'>tag</mark>.night { background:#303030; color:#fff } <mark class='mark-light'>#id</mark>.night { background:#303030; color:#fff } <mark class='mark-light'>.class</mark>.night { background:#303030; color:#fff } </code></pre> <p class='p-post'> Lihat kode yang saya tandai, ganti kode tersebut dengan id/class/tag elemen html yang ingin diubah warnanya. Hasil keseluruhannya kurang lebih seperti ini sob : </p> <pre class='ex'><code class='html'> &lt;head&gt;    &lt;style type=&quot;text/css&quot;&gt;       body {       background:#fff       }       #night-mode {       background:#fff;       border:none;       outline:none;       border-radius:2px;       padding:10px;       color:#000;       cursor:pointer       }       body.night {       background:#303030       }       #night-mode.night {       background:#303030;       color:#fff       }    &lt;/style&gt; &lt;script type=&quot;text/javascript&quot; src=&quot;/jquery.min.js&quot;&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt;    &lt;button id=&quot;night-mode&quot;&gt;Dark Mode&lt;/button&gt;    &lt;script type=&quot;text/javascript&quot;&gt;       //&lt;![CDATA[              // MASUKKAN KODE JAVASCRIPT COOKIE DISINI, SEBELUM KODE DIBAWAH INI              $(document).ready(function() {           if (readCookie(&quot;night&quot;)) {               $(&quot;*&quot;).addClass(&quot;night&quot;);               $(&quot;#night-mode&quot;).html(&quot;Light Mode&quot;)           }           $(&quot;#night-mode&quot;).click(function() {               if ($(this).hasClass(&quot;night&quot;)) {                   $(&quot;*&quot;).removeClass(&quot;night&quot;);                   $(&quot;#night-mode&quot;).html(&quot;Dark Mode&quot;);                   eraseCookie(&quot;night&quot;)               } else {                   $(&quot;*&quot;).addClass(&quot;night&quot;);                   $(&quot;#night-mode&quot;).html(&quot;Light Mode&quot;);                   createCookie(&quot;night&quot;, null, 7000)               }           })       })       //]]&gt;    &lt;/script&gt; &lt;/body&gt; </code></pre> <p class='p-post'> Supaya sobat lebih jelas lagi, silahkan lihat demo dan kodenya dibawah ini : </p> <div class='iframe-post'> <iframe height='430' scrolling='no' data-src='//codepen.io/guprooon/embed/MyGgOy/?height=430&theme-id=0&default-tab=result' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/guprooon/pen/MyGgOy/' rel='nofollow'>Night Mode Dengan Cookie</a> by Ghufroni Sholih (<a href='https://codepen.io/guprooon' rel='nofollow'>@guprooon</a>) on CodePen. </iframe> </div> <p class='p-post'> Sekian artikel amburadul ini, semoga bermanfaat bagi sobat sekalian. Jika ada yang kurang jelas sobat bisa bertanya dikolom komentar. terima kasih. </p> <div style="display:none;">Tag : <span class="artikel-kategori"><a href="https://pintasanoke.blogspot.com/search/label/Tutorial Pembuatan?&max-results=21" title="Categories" rel='nofollow' target='_blank'>Tutorial Pembuatan</a></span></div>Ghufroni Sholihhttp://www.blogger.com/profile/12492584548556916477noreply@blogger.com0tag:blogger.com,1999:blog-9087298899236400528.post-18290920721029073542016-04-12T09:37:00.000+07:002016-05-17T09:49:59.546+07:00Mengenal Cookie<div itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject'> <meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3BmjbPlaQXBwKCVqkSogPHA4PblEMzOdc_AWM7ngUZQGILjbIs4nUL4hDV6PvRBf8JtfsXrAPHrGG12OpmgVJXMileBqNJbGtvQVXgTBVbMGQLFCl0XD8nIcykSC_ZOGqoC25J2v3Ub0/s1600/mengenal-cookie.png' name='twitter:image'/> <meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3BmjbPlaQXBwKCVqkSogPHA4PblEMzOdc_AWM7ngUZQGILjbIs4nUL4hDV6PvRBf8JtfsXrAPHrGG12OpmgVJXMileBqNJbGtvQVXgTBVbMGQLFCl0XD8nIcykSC_ZOGqoC25J2v3Ub0/s1600/mengenal-cookie.png' itemprop='url'/> <meta content='700' itemprop='width'/> <meta content='700' itemprop='height'/> </div> <p class='snippet-post'> Data yang dibuat oleh website saat seorang pengunjung mengunjungi website tersebut dan menyimpannya dalam bentuk file teks pada komputer si pengunjung, itulah cookie. </p> <a name='more'></a> <img class='img-post no-postDisplay' alt="Mengenal Cookie" title="Mengenal Cookie" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3BmjbPlaQXBwKCVqkSogPHA4PblEMzOdc_AWM7ngUZQGILjbIs4nUL4hDV6PvRBf8JtfsXrAPHrGG12OpmgVJXMileBqNJbGtvQVXgTBVbMGQLFCl0XD8nIcykSC_ZOGqoC25J2v3Ub0/s1/mengenal-cookie.png" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3BmjbPlaQXBwKCVqkSogPHA4PblEMzOdc_AWM7ngUZQGILjbIs4nUL4hDV6PvRBf8JtfsXrAPHrGG12OpmgVJXMileBqNJbGtvQVXgTBVbMGQLFCl0XD8nIcykSC_ZOGqoC25J2v3Ub0/s1600/mengenal-cookie.png" width="0" height="0" /> <p class='p-post'> Data yang dibuat oleh website ini biasanya adalah sebuah pengaturan tertentu atau bisa juga berupa informasi pribadi kita seperti nama, telepon, dan sebagainya yang biasa kita jumpai ketika mengisi form biodata di beberapa website. Namun perlu diingat bahwa data tersebut hanya akan didapat website ketika kita menyetujui atau memberikan informasi tersebut. </p> <h2>Fungsi Cookie</h2> <p class='p-post'> Seperti yang sudah saya paparkan sebelumnya pada prolog artikel ini yaitu tentang pengertian cookie. Maka dari pengertian tersebut kita dapat menarik kesimpulan bahwa cookie dapat mengidentifikasi dan menyimpan informasi seorang pengunjung yang mengunjungi suatu website. Sehingga ketika si pengunjung kembali ke website tersebut, website akan mengenali si pengunjung. </p> <p class='p-post'> Sebagai contoh ketika sobat hendak masuk ke akun email sobat misalnya, maka sobat akan dimintai username dan password akun. setelah sobat mengisinya, barulah sobat akan dibawa masuk ke akun email sobat tersebut. Kemudian ketika sobat menutup browser dan membuka kembali email sobat, maka secara otomatis sobat akan masuk ke akun email sobat tanpa perlu mengisikan username dan password lagi. </p> <p class='p-post'> Bagi sobat yang memiliki website atau blog, cookie dapat digunakan untuk beberapa keperluan. Misal, sobat ingin membuat kotak dialog yang hanya tampil sekali untuk setiap pengunjung yang mengunjungi website sobat. Maka dengan cookie hal tersebut dapat dilakukan. Cookie juga memungkinkan kita untuk membuat pengaturan font, merubah tema, dsb. </p> <h2>Dasar Javascript Cookie</h2> <p class='p-post'> Javascript cookie adalah pembuatan cookie dengan menggunakan javascript. sebelum saya membahas cara pembuatan cookie dengan fungsi javascript, alangkah baiknya jika kita memahami dulu document.cookie. </p> <p class='p-post'> Cookie terdiri dari : </p> <ol class='ol-post'> <li>Nama dan Isi</li> <li>Waktu Berakhir</li> <li>Domain dan Path</li> </ol> <p class='p-post'> Kurang lebih strukturnya seperti ini : </p> <pre class='code-snippet'><code class='javascript'> namacookie=isicookie; expires=Sun, 1 Jan 9999 00:00:00 GMT; path=/ </code></pre> <p class='p-post'> Nama/isi, waktu berakhir, dan path cookie tersebut dapat kita tentukan sendiri. Biasanya jika hanya untuk mengingat sebuah fungsi, isi cookie dapat dibiarkan kosong. Namun jika kita memerlukan sesuatu yang lebih spesifik, misalnya membedakan pengunjung maka isi cookie diperlukan. </p> <p class='p-post'> Jika ada lebih dari satu cookie maka kita pisahkan dengan tanda "; "(titik koma dan spasi), jadinya akan seperti ini : </p> <pre class='code-snippet'><code class='javascript'> namacookie1=isicookie1; namacookie2=isicookie2 </code></pre> <h3 class='h3-pre'>Dasar Membuat Cookie</h3> <pre class='code-snippet'><code class='javascript'> //Pembuatan cookie biasa<br/> document.cookie = "namacookie=isicookie";<br/> //Pembuatan cookie dengan menetapkan batas waktu akhir<br/> document.cookie = "namacookie=isicookie; expires=Sun, 1 Jan 9999 00:00:00 GMT"; </code></pre> <h3 class='h3-pre'>Dasar Membaca Cookie</h3> <pre class='code-snippet'><code class='javascript'> var semuaCookie = document.cookie; </code></pre> <h3 class='h3-pre'>Dasar Merubah Isi Cookie</h3> <pre class='code-snippet'><code class='javascript'> document.cookie = "namacookie=isicookie";<br/> //misalkan, menjadi :<br/> document.cookie = "namacookie=cookievalue"; </code></pre> <h3 class='h3-pre'>Dasar Menghapus Cookie</h3> <pre class='code-snippet'><code class='javascript'> document.cookie = "namacookie=isicookie";<br/> //menjadi :<br/> document.cookie = "namacookie=cookievalue; expires=Sun, 1 Jan 2000 00:00:00 GMT"; </code></pre> <p class='p-post'> Sampai disini saya anggap sobat sudah memahami pengertian, fungsi, dan dasar-dasar javascript cookie. Kita beralih ke bagian selanjutnya, yang mana bagian ini adalah inti dari artikel kali ini. </p> <h2>Javascript Cookie</h2> <p class='p-post'> Javascript cookie ini hanya terdiri dari 3 fungsi, yaitu fungsi untuk membuat(createCookie), membaca(readCookie), dan menghapus(eraseCookie). Lihatlah kode berikut : </p> <div class='code-tab js'> <ul class='tab-pre'><li class='pre-uncompressed aktif'>Uncompressed</li><li class='pre-compressed'>Compressed</li><li class='clear'></li></ul> <pre><code class='javascript uncompressed'> &lt;script type=&quot;text/javascript&quot;&gt; //&lt;![CDATA[ function createCookie(name, value, days) { if (days) { var date = new Date(); date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); var expires = "; expires=" + date.toGMTString(); } else var expires = ""; document.cookie = name + "=" + value + expires + "; path=/"; } function readCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for (var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') c = c.substring(1, c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length); } return null; } function eraseCookie(name) { createCookie(name, "", -1); } //]]&gt; &lt;/script&gt; </code><code class='javascript kode compressed hide'> &lt;script type=&quot;text/javascript&quot;&gt;<br/> //&lt;![CDATA[<br/> function createCookie(e,t,n){if(n){var o=new Date;o.setTime(o.getTime()+24*n*60*60*1e3);var r=&quot;; expires=&quot;+o.toGMTString()}else var r=&quot;&quot;;document.cookie=e+&quot;=&quot;+t+r+&quot;; path=/&quot;}function readCookie(e){for(var t=e+&quot;=&quot;,n=document.cookie.split(&quot;;&quot;),o=0;o&lt;n.length;o++){for(var r=n[o];&quot; &quot;==r.charAt(0);)r=r.substring(1,r.length);if(0==r.indexOf(t))return r.substring(t.length,r.length)}return null}function eraseCookie(e){createCookie(e,&quot;&quot;,-1)}<br/> //]]&gt;<br/> &lt;/script&gt; </code></pre> </div> <p class='p-post'> Untuk menerapkannya di blog sobat, Silahkan copy kode diatas ke html template sobat. Letakkan disebelum &lt;/head&gt; atau disetelah &lt;body&gt;. Jika sudah, kita lanjutkan ke cara menjalankannya. </p> <h3>Membuat Cookie</h3> <p class='p-post'> Untuk membuat cookie kita tinggal menjalankan fungsi createCookie, caranya seperti ini : </p> <pre class='code-snippet'><code class='javascript'> createCookie(namacookie, isicookie, hari); </code></pre> <p class='p-post'> Namacookie berarti adalah nama dari cookie yang akan kita buat. Namacookie ini berupa string(teks), jadi letakan namacookienya didalam tanda kutip sehingga menjadi <i>"namacookie"</i>. Lalu isicookie dapat dikosongkan dengan menuliskan <i>null</i> jika tidak diperlukan. Namun apabila diperlukan maka isilah isicookie-nya(bisa berupa string ataupun integer). Untuk hari maka isi dengan berapa hari, misal 10 hari maka tuliskan saja 10. </p> <p class='p-post'> Kurang lebih jadinya akan seperti ini : </p> <pre class='code-snippet'><code class='javascript'> createCookie("contoh", null, 10); </code></pre> <h3>Membaca Cookie</h3> <p class='p-post'> Sama halnya membuat cookie, Untuk membaca cookie yang tadi dibuat kita tinggal menjalankan fungsi readCookienya, seperti ini : </p> <pre class='code-snippet'><code class='javascript'> readCookie(namacookie); </code></pre> <h3>Menghapus Cookie</h3> <p class='p-post'> Dan yang terakhir, untuk menghapus cookie yang tadi dibuat. Jalankan fungsi eraseCookie, lihat dibawah ini : </p> <pre class='code-snippet'><code class='javascript'> eraseCookie(namacookie); </code></pre> <h3>Demo</h3> <p class='p-post'> Supaya tambah jelas lagi saya sudah siapkan demonya untuk menjalankan ketiga fungsi tersebut, silahkan sobat lihat dibawah ini : </p> <div class='iframe-post'> <iframe height='300' scrolling='no' data-src='//codepen.io/guprooon/embed/BKYPgm/?height=300&theme-id=0&default-tab=result' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='//codepen.io/guprooon/pen/BKYPgm/' rel='nofollow'>Javascript Cookie</a> by Ghufroni Sholih (<a href='//codepen.io/guprooon' rel='nofollow'>@guprooon</a>) on CodePen. </iframe> </div> <p class='p-post'> Penjelasan demo diatas :<br/> Tombol change background akan mengubah warna background menjadi gelap sekaligus menjalankan fungsi createCookie. Fungsi readCookie akan dijalankan ketika di re-run, inilah alasan kenapa background tidak kembali jadi cerah. Tombol reset background akan menghapus cookie yang tadi dibuat, sehingga ketika dire-run lagi background akan jadi cerah lagi. </p> <p class='p-post'> Sekian artikel tentang <a class='link-blue' href='https://pintasanoke.blogspot.com/2016/04/javascript-cookie.html'>Cookie</a> ini. Jika ada kesalahan atau kekurangan mohon kritik dan sarannya. </p> <p class='p-post'> Sumber : </p> <ul class='ul-post'> <li><a class='link-green' href='//www.quirksmode.org/js/cookies.html' rel='nofollow' target='_blank'>http://www.quirksmode.org/js/cookies.html</a></li> <li><a class='link-green' href='//www.w3schools.com/js/js_cookies.asp' rel='nofollow' target='_blank'>http://www.w3schools.com/js/js_cookies.asp</a></li> </ul> <div style="display:none;">Tag : <span class="artikel-kategori"><a href="https://pintasanoke.blogspot.com/search/label/Pembelajaran?&max-results=21" title="Categories" rel='nofollow' target='_blank'>Pembelajaran</a></span></div>Ghufroni Sholihhttp://www.blogger.com/profile/12492584548556916477noreply@blogger.com0tag:blogger.com,1999:blog-9087298899236400528.post-4396825187340686552016-03-02T13:43:00.000+07:002016-05-17T09:49:47.925+07:00Window smooth scroll untuk blog dengan jQuery<div class='' itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject'> <meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk6PRDez-snnQm9JcyI8R8maJb8ZspPJwSkBAcDYD_VzIsPBmc3uvrun52bY6kJWId-WzAlNtFCvdx4PeSyw0AXgChfQNC4fjhtw1YHX2qjsovJQpWdOtl3sVgMqAn4Qy4dx140a2Gr80/s1600/window-smooth-scroll.gif' name='twitter:image'/> <meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk6PRDez-snnQm9JcyI8R8maJb8ZspPJwSkBAcDYD_VzIsPBmc3uvrun52bY6kJWId-WzAlNtFCvdx4PeSyw0AXgChfQNC4fjhtw1YHX2qjsovJQpWdOtl3sVgMqAn4Qy4dx140a2Gr80/s1600/window-smooth-scroll.gif' itemprop='url'/> <meta content='700' itemprop='width'/> <meta content='700' itemprop='height'/> </div> <p class='snippet-post'> Window smooth scroll dengan jquery yang saya maksud disini adalah menciptakan efek smooth(halus) saat window di scroll. </p> <a name='more'></a> <img class='img-post no-postDisplay' alt="Window smooth scroll untuk blog dengan jQuery" title="window smooth scroll" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk6PRDez-snnQm9JcyI8R8maJb8ZspPJwSkBAcDYD_VzIsPBmc3uvrun52bY6kJWId-WzAlNtFCvdx4PeSyw0AXgChfQNC4fjhtw1YHX2qjsovJQpWdOtl3sVgMqAn4Qy4dx140a2Gr80/s1/window-smooth-scroll.gif" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk6PRDez-snnQm9JcyI8R8maJb8ZspPJwSkBAcDYD_VzIsPBmc3uvrun52bY6kJWId-WzAlNtFCvdx4PeSyw0AXgChfQNC4fjhtw1YHX2qjsovJQpWdOtl3sVgMqAn4Qy4dx140a2Gr80/s1600/window-smooth-scroll.gif" width="0" height="0" /> <p class='p-post'> Sobat pernah mengeluh sama scroll bawaan browser yang tidak smooth? Kalau pernah maka beruntunglah sobat karena menemukan artikel ini, karena disini saya akan membagikan kode yang fungsinya untuk <a class='link-blue' href='https://pintasanoke.blogspot.com/2016/03/blog-smooth-scroll-jquery.html'>menciptakan efek smooth saat window di scroll</a>. Saya mulai memiliki inisiatif untuk menulis artikel ini dimana saat saya berhasil menemukan kode ini di salah satu web setelah mencarinya berjam-jam. Entahlah, mungkin karena saya salah memasukkan keywordnya atau apalah. </p> <p class='p-post'> Oke, langsung kita mulai cara memasangnya sob. Sebelumnya saya ingatkan lagi bahwa kode ini berbasis jquery jadi jika sobat belum memasang <span class='po-tt' data-judul='cara pasang' data-deskripsi='letakkan kode dibawah ini diatas &lt;/head&gt;' data-pre='&lt;script type=&quot;text/javascript&quot; src=&quot;http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js&quot;/&gt;'>jquery</span>, silahkan pasang terlebih dahulu. Setelah itu baru ikuti step-stepnya. </p> <h2>CARA PEMASANGAN</h2> <p class='p-post'> Lihat kode dibawah ini : </p> <div class='code-tab js'> <ul class='tab-pre'><li class='pre-uncompressed aktif'>Uncompressed</li><li class='pre-compressed'>Compressed</li><li class='clear'></li></ul> <pre><code class='javascript uncompressed'> &lt;script type=&#039;text/javascript&#039;&gt; //&lt;![CDATA[ (function($) { jQuery.scrollSpeed = function(step, speed, easing) { var $document = $(document), $window = $(window), $body = $('html, body'), option = easing || 'default', root = 0, scroll = false, scrollY, scrollX, view; if (window.navigator.msPointerEnabled) return false; $window.on('mousewheel DOMMouseScroll', function(e) { var deltaY = e.originalEvent.wheelDeltaY, detail = e.originalEvent.detail; scrollY = $document.height() > $window.height(); scrollX = $document.width() > $window.width(); scroll = true; if (scrollY) { view = $window.height(); if (deltaY < 0 || detail > 0) root = (root + view) >= $document.height() ? root : root += step; if (deltaY > 0 || detail < 0) root = root <= 0 ? 0 : root -= step; $body.stop().animate({ scrollTop: root }, speed, option, function() { scroll = false; }); } if (scrollX) { view = $window.width(); if (deltaY < 0 || detail > 0) root = (root + view) >= $document.width() ? root : root += step; if (deltaY > 0 || detail < 0) root = root <= 0 ? 0 : root -= step; $body.stop().animate({ scrollLeft: root }, speed, option, function() { scroll = false; }); } return false; }).on('scroll', function() { if (scrollY && !scroll) root = $window.scrollTop(); if (scrollX && !scroll) root = $window.scrollLeft(); }).on('resize', function() { if (scrollY && !scroll) view = $window.height(); if (scrollX && !scroll) view = $window.width(); }); }; jQuery.easing.default = function (x,t,b,c,d) { return -c * ((t=t/d-1)*t*t*t - 1) + b; }; })(jQuery); $(function() { jQuery.scrollSpeed(<mark class='mark-light'>180</mark>,<mark class='mark-light'>900</mark>); }); //]]&gt; &lt;/script&gt; </code><code class='javascript kode compressed hide'> &lt;script type=&#039;text/javascript&#039;&gt;<br/> //&lt;![CDATA[<br/> !function(e){jQuery.scrollSpeed=function(t,n,o){var i,l,r,u=e(document),c=e(window),h=e("html, body"),a=o||"default",d=0,s=!1;return window.navigator.msPointerEnabled?!1:void c.on("mousewheel DOMMouseScroll",function(e){var o=e.originalEvent.wheelDeltaY,f=e.originalEvent.detail;return i=u.height()>c.height(),l=u.width()>c.width(),s=!0,i&&(r=c.height(),(0>o||f>0)&&(d=d+r>=u.height()?d:d+=t),(o>0||0>f)&&(d=0>=d?0:d-=t),h.stop().animate({scrollTop:d},n,a,function(){s=!1})),l&&(r=c.width(),(0>o||f>0)&&(d=d+r>=u.width()?d:d+=t),(o>0||0>f)&&(d=0>=d?0:d-=t),h.stop().animate({scrollLeft:d},n,a,function(){s=!1})),!1}).on("scroll",function(){i&&!s&&(d=c.scrollTop()),l&&!s&&(d=c.scrollLeft())}).on("resize",function(){i&&!s&&(r=c.height()),l&&!s&&(r=c.width())})},jQuery.easing["default"]=function(e,t,n,o,i){return-o*((t=t/i-1)*t*t*t-1)+n}}(jQuery),$(function(){jQuery.scrollSpeed(<mark class='mark-light'>180</mark>,<mark class='mark-light'>900</mark>)});<br/> //]]&gt;<br/> &lt;/script&gt; </code></pre> </div> <p class='p-post'> Diatas terdapat dua kode yaitu kode yang belum dikompres(uncompressed) dan kode yang sudah dikompres(compressed). Sobat pilih salah satunya saja, saya sarankan untuk menggunakan yang sudah dikompres, karena tidak memakan banyak ruang html template sobat. Kode yang belum dikompres saya sediakan sekedar untuk berjaga-jaga, jikalau ada dari beberapa sobat yang ingin menelaah lagi kodenya. </p> <p class='p-post'> Sekarang lihat baris kode yang saya tandai, ganti angkanya sesuai keinginan sobat. Berikut detailnya : </p> <p class='p-post'> 180 : panjang gulungan satu kali scroll. semakin besar angkanya maka semakin panjang gulungannya ketika discroll.<br/> 900 : kecepatan animasi scroll tersebut. semakin besar angkanya maka semakin lambat animasinya. </p> <p class='p-post'> Untuk demonya sobat bisa lihat dibawah ini : </p> <div class='iframe-post'> <iframe height='300' scrolling='no' data-src='//codepen.io/guprooon/embed/LNdZeK/?height=300&theme-id=0&default-tab=result' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='//codepen.io/guprooon/pen/LNdZeK/' rel='nofollow'>LNdZeK</a> by Ghufroni Sholih (<a href='//codepen.io/guprooon' rel='nofollow'>@guprooon</a>) on CodePen. </iframe> </div> <p class='p-post'> Gimana sob mudah kan cara menerapkannya ? </p> <p class='p-post'> Namun sayangnya kode diatas memiliki beberapa kekurangan. Pertama, efek smooth hanya akan terlihat saat scrolling dengan mouse saja. Ini ditunjukkan oleh event "mousewheel DOMMouseScroll". Kedua, Kode diatas tidak bekerja juga di internet explorer. </p> <p class='p-post'> Sekian artikel sederhana tentang <a class='link-blue' href='https://pintasanoke.blogspot.com/2016/03/blog-smooth-scroll-jquery.html'>window smooth scroll untuk blog dengan jquery</a> ini, semoga bermanfaat. Jika ada yang kurang jelas silahkan bertanya dikolom komentar. </p> <p class='p-post'> Sumber : <a class='link-green' rel='nofollow' href='https://github.com/nathco/jQuery.scrollSpeed' target='_blank'>https://github.com/nathco/jQuery.scrollSpeed</a> </p> <div style="display:none;">Tag : <span class="artikel-kategori"><a href="https://pintasanoke.blogspot.com/search/label/Trik &amp; Solusi?&max-results=21" title="Categories" rel='nofollow'>Trik &amp; Solusi</a></span></div>Ghufroni Sholihhttp://www.blogger.com/profile/12492584548556916477noreply@blogger.com0