Hide GIF Image use Giflinks and Turn up when Hover

Sebetulnya AA Koben lagi malas mosting, sudah nggak ada bahan yg menarik plus di waktu ramadhan membuang waktu buat beramal saja (tidur) :)) Gue melihat artikel tentang Giflinks tholman.com/giflinks by Tim Holman. Apakah Giflinks itu...sebuah javascript sederhana yang digunakan untuk menambahkan tindakan gif layar penuh sebagai efek hover
Singkat cerita menyembunyikan gambar berekstensi .GIF (yg mana notabene gambar .gif memakan waktu loading) dan akan muncul ketika sobat melakukan hover pada link giflinks.

Letakan JavaScript berikut sebelum tag </body>

<script type='text/javascript'>
//<![CDATA[
var GifLinks=function(){"use strict";function n(n,e){for(var t in e)t in n||(n[t]=e[t]);return n}function e(n,e){for(var t in e)n.style[t]=e[t]}function t(n,e){if(n.length)for(var t=0;t<n.length;t++)e===!0?o(n[t]):i(n[t]);else e===!0?o(n):i(n)}function o(n){var e=n.getAttribute("data-src");if(e){var t=new Image;t.onload=function(){n.className+=" preloaded",i(n)},t.src=e}}function i(n){n.addEventListener("mouseover",function(){c(this)},!1),n.addEventListener("touchstart",function(){c(this)},!1),n.addEventListener("mouseout",function(){s()},!1),n.addEventListener("touchmove",function(n){n.preventDefault(),s()},!1),n.addEventListener("click",function(){s()},!1),n.addEventListener("dblclick",function(){s()},!1),a(n)}function a(n){n.className+=" giflink ready",n.className+=n.href?" has-link":" no-link"}function r(){var n={backgroundPosition:"50% 50%",backgroundSize:"cover",pointerEvents:"none",position:"fixed",zIndex:"999999",display:"none",height:"100%",width:"100%",margin:"0px",left:"0px",top:"0px"};l=document.createElement("div"),e(l,n),u.appendChild(l)}function c(n){var e=n.getAttribute("data-src");e?(l.style.backgroundImage="url("+e+")",l.style.display="block"):console.log("Sorry, an element doesn't have a data-src!")}function s(){console.log("stop!"),l.style.display="none",l.style.backgroundImage=""}function d(n,e){u=document.body,r();var o=!1;e&&e.preload&&(o=!!e.preload),t(n,o)}var u,l;return n(d,{})}();
//]]>
</script>

<script type='text/javascript'>
var elements = document.querySelectorAll( '.post-body a' );
GifLinks( elements );
</script>

Perhatikan pada script bertuliskan .post-body, gantikan sesuai dengan tagging bagian post template blog kalian masing-masing! Jika ingin memberi sentuhan CSS pada gif links...

.giflink {
 font-style: italic;
 color: rgb(245, 90, 3);
 /* BLAH-BLEH-BLOH HERE */ 
}

Syntax HTML<a data-src="LINK-IMG.gif">Title</a>DONE.

Buat bonusnya, silahkan sobat buka live HTML editor kepunyaan kalian masing² kemudian masukan bumbu ramuan berikut ini Open it atau ini juga boleh Open it

Semoga rakyat Palestina diberikan kesabaran dalam menghadapi cobaan dari tindakan rakyat bar-bar zionis yahudi israel.

Allohu Akbar...