Friday, 1 November 2013

Malware spreading via Skype


Malware spreads via Skype. Just sends the file to all your contacts, nothing more, nothing less. (no message to invite you to check out "photos", no call, ...)


### Analysis ###

Known MD5's:
293cc1f379c4fc81a7584c40f7c82410
66def80d6f87f6f79156557172f9f295


Callback to IP's:
88.150.177.162

Callback to domains:
Random & partial DGA(1) - Pattern:
http://%random%.aingo.cc

Persistence:
Creates key in:
HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Run
Injects into:
explorer.exe
Sets Proxy:
Yes


Type of malware: Caphaw - Banking malware


Technical details ~~

Meta-data
================================================================================
File:    /home/remnux/samples/invoice_171658.pdf.exe_
Size:    360448 bytes
Type:    PE32 executable for MS Windows (GUI) Intel 80386 32-bit
MD5:     293cc1f379c4fc81a7584c40f7c82410
SHA1:    7bb5b71513e01c2095d37f42c64982a3edb523b5
ssdeep:  3072:fkrImDVQFgEHQPqviUBSnk92oKMcs3JVJXnGcYHmZ52ZgMed1pJ8t/Jpm3dDlnx/:MkpCEwCvi2b92NMxBnUmyZ9o1z8tL
Date:    0x52739069 [Fri Nov  1 11:28:41 2013 UTC]
EP:      0x401270 .text 0/4
CRC:     Claimed: 0x5eb47, Actual: 0x5eb47

Resource entries
================================================================================
Name               RVA      Size     Lang         Sublang                  Type
--------------------------------------------------------------------------------
RT_CURSOR          0x532b0  0x134    LANG_RUSSIAN SUBLANG_RUSSIAN          data
RT_BITMAP          0x536c0  0x1eec   LANG_RUSSIAN SUBLANG_RUSSIAN          data
RT_BITMAP          0x555b0  0x4e8    LANG_RUSSIAN SUBLANG_RUSSIAN          data
RT_ICON            0x55a98  0x128    LANG_RUSSIAN SUBLANG_RUSSIAN          GLS_BINARY_LSB_FIRST
RT_ICON            0x55bc0  0xea8    LANG_RUSSIAN SUBLANG_RUSSIAN          data
RT_ICON            0x56a68  0x568    LANG_RUSSIAN SUBLANG_RUSSIAN          GLS_BINARY_LSB_FIRST
RT_ICON            0x56fd0  0x10a8   LANG_RUSSIAN SUBLANG_RUSSIAN          data
RT_ICON            0x58078  0x468    LANG_RUSSIAN SUBLANG_RUSSIAN          GLS_BINARY_LSB_FIRST
RT_GROUP_CURSOR    0x533e8  0x14     LANG_RUSSIAN SUBLANG_RUSSIAN          Lotus 1-2-3
RT_GROUP_ICON      0x584e0  0x4c     LANG_RUSSIAN SUBLANG_RUSSIAN          MS Windows icon resource - 5 icons, 16x16, 16-colors
RT_VERSION         0x53400  0x2c0    LANG_RUSSIAN SUBLANG_RUSSIAN          data

Sections
================================================================================
Name       VirtAddr     VirtSize     RawSize      Entropy    
--------------------------------------------------------------------------------
.text      0x1000       0xee6        0x1000       5.764246   
.rdata     0x2000       0x49ce2      0x4a000      5.440947   
.data      0x4c000      0x619c       0x6000       0.012147    [SUSPICIOUS]
.rsrc      0x53000      0x5530       0x6000       3.693765   

Version info
================================================================================
LegalCopyright: gex Copright   ls soft
InternalName:  jex  MUWEfess dlle
FileVersion: 13, 13, 201, 1241
ProductName:  jox  Weaex Apps
ProductVersion: 13, 13, 21, 153
FileDescription:  jex dllx
OriginalFilename: lexlse.exe
Translation: 0x0419 0x04b0

~~


### Prevention ###

* Check your Skype settings. Only allow contacts to send you messages/files & contact you
* Don't download and run unknown files, especially PE(2) files


### Disinfection ###

* Run a full scan with your installed antivirus product
* Look for suspicious Run keys and delete the associated file(s)
* Run a full scan with another antivirus and/or antimalware product
* Change your Skype password
* Change your proxy to the original one(3) (usually none)
* Change ALL your other passwords
* Call your bank to ensure there was no unauthorized withdrawal or transaction

* When in doubt, seek advise on a professional malware removal forum(4)




### Conclusion ###

* Follow above prevention tips
* Use common sense & do not click on or run anything you encounter
* When in doubt, check the file on VirusTotal for example





# Links #

(1) http://en.wikipedia.org/wiki/Domain_generation_algorithm
(2) http://en.wikipedia.org/wiki/Portable_Executable
(3) http://www.wikihow.com/Change-Proxy-Settings
(4) http://www.bleepingcomputer.com/forums/f/22/virus-trojan-spyware-and-malware-removal-logs

Monday, 28 October 2013

How to Add a Tiny jQuery Circleslider to Blogger

Tiny Circleslider is a small jQuery plugin generating a circular carousel of images that we can slide infinitely (circular). When clicking on the red dot, the main picture moves to the left and another set of images will slide out.

There is nothing complicated about using this type of carousel, however when it is about customizing it, we need to use a bit of arithmetic. All these details can be found in the author's homepage, so I'll just limit myself to show you the basics.

To see it in action, please visit the below demo blog and just drag the red dot:


tiny jquery circleslider, image slider

Adding the Tiny CircleSlider to a Blogger Blog

In order to make it work, first task is to add the javascript jQuery library in the template:

Step 1. Log in to your Blogger account > select your blog

Step 2. Go to "Template" and hit the "Edit HTML" button:

blogger template, edit html

Step 3. Click anywhere on the code area and search by using the CTRL + F keys for this tag:
</head>
blogger template html

Step 4. Just above the </head> tag, add the following scripts:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script>
//<![CDATA[
/*! Tiny Circleslider - v2.0.8 - 2015-08-08
 * http://www.baijs.com/tinycircleslider
 *
 * Copyright (c) 2015 Maarten Baijs <wieringen@gmail.com>;
 * Licensed under the MIT license */

!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a(require("jquery")):a(jQuery)}(function(a){function b(b,e){function f(){return k(),w.append(x.first().clone()).css("width",B.width*(x.length+1)),g(),r(0),v.move(v.options.start,v.options.interval),v}function g(){G&&(b[0].ontouchstart=u,b[0].ontouchmove=q,b[0].ontouchend=s),y.bind("mousedown",u);var c=function(b){return b.preventDefault(),b.stopImmediatePropagation(),v.stop(),v.move(a(this).attr("data-slide-index")),!1};G&&b.delegate(".dot","touchstart",c),b.delegate(".dot","mousedown",c)}function h(a){E=setTimeout(function(){v.move(v.slideCurrent+1,!0)},a?50:v.options.intervalTime)}function i(a){return a*(Math.PI/180)}function j(a){return 180*a/Math.PI}function k(){var c=document.createDocumentFragment();z.remove(),x.each(function(b,d){var e=null,f=parseInt(a(d).attr("data-degrees"),10)||360*b/v.slidesTotal,g={top:-Math.cos(i(f))*v.options.radius+A.height/2-D.height/2,left:Math.sin(i(f))*v.options.radius+A.width/2-D.width/2};z.length>0&&(e=z.clone(),e.addClass(a(d).attr("data-classname")).css(g),c.appendChild(e[0])),v.dots.push({angle:f,slide:d,dot:e})}),v.dots.sort(function(a,b){return a.angle-b.angle}),a.each(v.dots,function(b,c){a(c.dot).length>0&&a(c.dot).addClass("dot-"+(b+1)).attr("data-slide-index",b).html("<span>"+(b+1)+"</span>")}),b.append(c),z=b.find(".dot")}function l(a,b){var c,d,e;return a>b?(c=a-b,d=-(b+360-a)):(c=a+360-b,d=-(b-a)),e=c<Math.abs(d)?c:d,[e,d,c]}function m(b){var c=9999,d=9999,e=9999,f=0,g=0,h=0;return a.each(v.dots,function(a,i){var j=l(i.angle,b);Math.abs(j[0])<Math.abs(e)&&(e=j[0],h=a),Math.abs(j[1])<Math.abs(c)&&(c=j[1],f=a),Math.abs(j[2])<Math.abs(d)&&(d=j[2],g=a)}),[[h,f,g],[e,c,d]]}function n(a){return 0>a?360+a%-360:a%360}function o(a,b,c){var d=a,e=!1;Math.abs(a)>Math.abs(b)?(d=-b,e=!0):I?requestAnimationFrame(function(){o(d,b+a)}):F=setTimeout(function(){o(d,b+a,.9*c)},c),v.angleCurrent=n(v.angleCurrent-d),r(v.angleCurrent,e)}function p(a){return{x:H?a.targetTouches[0].pageX:a.pageX||a.clientX,y:H?a.targetTouches[0].pageY:a.pageY||a.clientY}}function q(a){var c=b.offset(),d={left:p(a).x-c.left-A.width/2,top:p(a).y-c.top-A.height/2};return v.angleCurrent=n(j(Math.atan2(d.left,-d.top))),I||r(v.angleCurrent),!1}function r(a,c){closestSlidesAndAngles=m(a),closestSlides=closestSlidesAndAngles[0],closestAngles=closestSlidesAndAngles[1],w.css("left",-(closestSlides[1]*B.width+Math.abs(closestAngles[1])*B.width/(Math.abs(closestAngles[1])+Math.abs(closestAngles[2])))),y.css({top:-Math.cos(i(a))*v.options.radius+(A.height/2-C.height/2),left:Math.sin(i(a))*v.options.radius+(A.width/2-C.width/2)}),c&&b.trigger("move",[x[v.slideCurrent],v.slideCurrent])}function s(b){return a(b.target).hasClass("dot")?!1:(v.dragging=!1,b.preventDefault(),a(document).unbind("mousemove mouseup"),y.unbind("mouseup"),v.options.dotsHide&&z.stop(!0,!0).fadeOut("slow"),v.options.dotsSnap&&v.move(m(v.angleCurrent)[0][0]),void 0)}function t(){v.dragging&&(r(v.angleCurrent),requestAnimationFrame(function(){t()}))}function u(b){return b.preventDefault(),H="touchstart"==b.type,v.dragging=!0,a(b.target).hasClass("dot")?!1:(v.stop(),a(document).mousemove(q),a(document).mouseup(s),y.mouseup(s),v.options.dotsHide&&z.stop(!0,!0).fadeIn("slow"),I&&t(),void 0)}this.options=a.extend({},d,e),this._defaults=d,this._name=c;var v=this,w=(b.find(".viewport"),b.find(".overview")),x=w.children(),y=b.find(".thumb"),z=b.find(".dot"),A=(x.find("a"),{width:b.outerWidth(!0),height:b.outerHeight(!0)}),B={width:x.first().outerWidth(!0),height:x.first().outerHeight(!0)},C={width:y.outerWidth(!0),height:y.outerHeight(!0)},D={width:z.outerWidth(),height:z.outerHeight()},E=null,F=null,G="ontouchstart"in window,H=!1,I="requestAnimationFrame"in window;return this.dots=[],this.slideCurrent=0,this.angleCurrent=0,this.slidesTotal=x.length,this.intervalActive=!1,this.start=function(a){return v.options.interval&&(v.intervalActive=!0,h(a)),v},this.stop=function(){return v.intervalActive=!1,clearTimeout(E),v},this.move=function(a){var b=Math.max(0,isNaN(a)?v.slideCurrent:a);b>=v.slidesTotal&&(b=0);var c=v.dots[b]&&v.dots[b].angle,d=l(c,v.angleCurrent)[0],e=d>0?-2:2;return v.slideCurrent=b,o(e,d,50),v.start(),v},f()}var c="tinycircleslider",d={interval:!1,intervalTime:3500,dotsSnap:!1,dotsHide:!0,radius:140,start:0};a.fn[c]=function(d){return this.each(function(){a.data(this,"plugin_"+c)||a.data(this,"plugin_"+c,new b(a(this),d))})}});
//]]>
</script>
Please note that if you already have another version of jQuery, you will need to remove the line in red.

Step 5. Now, let's add the CSS styles above the same </head> tag:
<style>
  #rotatescroll { /* is the rectangle container */
    height: 300px;
    position: relative;
    width: 300px;
  }
  #rotatescroll .viewport { /* is the rectangle containing the images */
    height: 300px;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    width: 300px
  }
  #rotatescroll .overview { /* is the list with the images */
    left: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
  }
  #rotatescroll .overview li { /* each item of the list */
    float: left;
    height: 300px;
    position: relative;
    width: 300px;
  }
  #rotatescroll .overlay { /* the image with the circle overlapping the list */
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1VSAxaiLkrWNJK7ZeGj-nUzg3rPB_Xs6m__UhHrEZmwAD821Iqn4A1Vn79AMgAF3q2F6-wR0VWomVen_ua752jbosJaSPnHiLL2VpfdWTTq2STjTP64SCHtphEUHjxtFJXPWLZLXCV5jB/s1600/bg-rotatescroll.png) no-repeat 0 0;
    height: 300px;
    left: 0;
    position: absolute;
    top: 0;
    width:300px;
  }
  #rotatescroll .thumb { /* the red circle that allows us to navigate */
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl4gJnxJiZAKAx2jHHpTVNQnSPiH91BCa0Hcn9p_tiwJuD9h2Dz7LSUexYq6WPf4aAT3sLlMvOvYtrUHkuoyHj47miJBxSRutdz-yGJsRZO67_qPEZqF7b-4XMbVFjleBO9Ch-1WDzn7ZL/s1600/bg-thumb.png) no-repeat 0 0;
    cursor: pointer;
    height: 26px;
    left: 137px;
    position: absolute;
    top: -3px;
    width: 26px;
    z-index: 200;
  }
  #rotatescroll .dot { /* the points indicating the position of each image */
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOr8PRzmipyah0q98vs9iaiA_BqM_fKe_GOXGIBceVdtSh_QVMMXCLaCT22ibDdc5iZ3X7Bh8mHndm_TvdEAAGdBaUPb0hiTLIGiU1-MmTmOwhM1VXEL_msiz7fdsUSNieN5pA4j1cHeLs/s1600/bg-dot.png) no-repeat 0 0;
    display: none;
    height: 12px;
    left: 155px;
    position: absolute;
    top: 3px;
    width: 12px;
    z-index: 100;
  }
  #rotatescroll .dot span { /* are hidden by default */
    display: none;
  }
 #rotatescroll .viewport ul.overview li img {
   width: 300px;
   min-height: 300px;
   object-fit: cover;
   padding:0;
   border:0;
 }
</style>
Screenshot
Step 6. Save the changes by clicking the "Save Template" button

And here's the HTML that has to be added to where we want to display the carousel. To add it inside a post, click the "New post" button on the left side of your dashboard and paste the below code in the "HTML" box of your post:
<div id="rotatescroll">
  <div class="viewport">
    <ul class="overview">
      <li><img src="imageURL" /></li>
      <li><img src="imageURL" /></li>
      <li><img src="imageURL" /></li>
      <li><img src="imageURL" /></li>
      <li><img src="imageURL" /></li>
    </ul>
  </div>
  <div class="dot"></div>
  <div class="overlay"></div>
  <div class="thumb"></div>
</div>

<script type="text/javascript">
$(document).ready(function(){
$('#rotatescroll').tinycircleslider({
interval: true,
snaptodots: true
});
});
</script>
blogger template
Adding HTML inside a Blogger post

Replace the imageURL text with the URL of your images.

Some other options that could be added, separated by commas:
  1. snaptodots: false if you want no dots to be shown when dragging them
  2. hidedots: false if you want to display the internal points (by default is true)
  3. intervaltime - is the time between slides (by default 3500)
  4. radius - defines the size of the circle (by default is 140)
To add the Tiny jQuery Circleslider to your sidebar, simply go to "Layout" > click the "Add a Gadget link" > from the popup window, choose "HTML/Javascript" and paste the code inside the empty box.

Sunday, 27 October 2013

Turn off the lights with jQuery

For those who enjoy watching videos on the internet, this is a very useful script made with jQuery by Janko. And what this script does? It will turn off the lights for you, so that everything on the page will be fading to dark, except the video, and everything around the video will be less visible, in a way that nothing will distract you while watching it.

You can test it on the following demo blog - click the link that says "Turn off the lights" and the page will be darkened. To make the page elements visible again, just click the "Turn on the lights" link:



How to add the "Turn off the Lights" Feature to Blogger/Blogspot

Step 1. Log into your Blogger account and click on your blog, then go to "Template" and hit the "Edit HTML" button


Step 2. Click anywhere inside the code area and search for the following tag by pressing the CTRL + F keys (hit Enter to find it):
</head>

Step 3. After you found it, paste the below scripts just above it:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#lightsoff").css("height", $(document).height()).hide();
$(".lightSwitcher").click(function(){
$("#lightsoff").toggle();
if ($("#lightsoff").is(":hidden"))
$(this).html("Turn off the lights").removeClass("turnedOff");
else
$(this).html("Turn on the lights").addClass("turnedOff");
});
});
//]]>
</script>
Note: if you already have one version of jquery in the template, please remove the line in red.

Step 4. Now search for the following tag:
]]></b:skin>
Step 5. Just above ]]></b:skin> add the following CSS code:
/* Turn off the lights
----------------------------------------------- */
#lightsVideo {
position:relative;
z-index:102;
}
#switch {
max-width:640px;
text-align:left;
position:relative;
height:25px;
display:block;
}
.lightSwitcher {
position:absolute;
z-index:101;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWG0RSikvNKrJcbLxs9bkz_vFN4QWfNizjjrecoj8hYYm_96-UhkqS85fAOkgVegM0lTyvOEvT0zk4f6wdGJvPTMQfi0w0I6AqyQVLH1YCOKUOc7tJcwl8nkSY_cf63e5NdU2byrlMxqCn/s1600/lights-on.png);
background-repeat:no-repeat;
background-position:left;
padding: 0 0 0 20px;
outline:none;
text-decoration:none;
}
.lightSwitcher:hover {text-decoration:underline;}
.turnedOff {
color:#ffff00 !important;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh24KXWoe5vdkNQBbGxKhehdmAdErfP7DwI_rMDZ4U_O4u43ZfOFEhH2UyqYdGCa4NWQUjExgiAlr7g0qcNW94l8bEC9XsoaP_D2c-NVvrRlTvq1Kpz_D2F5b2XcWA18uchbkziBgAqbewC/s1600/lights-off.png);
}
#lightsoff {
background:#000;
opacity:0.9;
filter:alpha(opacity=90);
position:absolute;
left:0;
top:0;
width:100%;
z-index:100;
}
Step 6. Finally, find this tag:
</body>
Just above the </body> tag, add this HTML code:
<div id='lightsoff'/>
Step 7. Click the "Save Template" button and that's it!

Now, each time you add a video, either in a post or using a HTML/Javascript gadget, use this code:
<center>
<div id="switch"><a class="lightSwitcher" href="javascript:void(0);">Turn off the lights</a></div>
<div id="lightsVideo">
...Here goes the code of the video...
</div>
</center>
Add the iFrame code of your video instead of the text in blue and "Save" the gadget or "Publish" your post. Now you can enjoy your videos with the lights off!

Remember that this trick uses jQuery and if you have another version of jQuery, you need to remove it, otherwise it might not work.

New releases from the Worldforge project.

Yesterday saw the release of a new version of the client-side software "Ember" for the Worldforge project (an open-source MMO framework).


The focus of this version was to improve the world-editing features, and if not yet included, the GoSC 2013 improvements (for example an updated terrain renderer) should arrive in Ember soon too.

Speaking of the GoSC 2013: Another project benefiting from it under the umbrella of Worldforge was Ryzom Core, the open-sourced MMORPG engine behind the (older) commercial Ryzom MMORPG.

It seems like their OpenGL3.0 renderer is making good progress (see some videos here), and they seem to have finally decided to tackle the lack of proper Blender tools by hiring someone to do it (see paid job advertisement on Blender Artists). As it is an open-source project this seems to have been initiated by one of the developers only, so maybe we can get some people to pledge some extra funds to add to the bounty he is offering?

Before/After Photo Effect with jQuery

If you have a design or makeup blog, or if you are using before and after image comparison, this script will most likely be useful for you. In this tutorial, you will see how to add the Before/After plugin, a script that works with jQuery in order to display two pictures dynamically for comparing them at the same time.

To see how it works, click on the demo link from below and drag horizontally the small bar to see both images that are being compared:



Implementing this script is really easy. We just need jQuery, the Before/After script, and the two images to compare.

How to add Before/After Effect on Blogger Images

Step 1. Go to "Template" and click on the "Edit HTML" button. Once the template HTMK editor opens up, click anywhere inside the code area and press the CTRL + F keys to search for the following tag - hit Enter to find it:
</head>
Step 2. Right before </head> paste the following scripts:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script src='http://code.jquery.com/ui/1.10.3/jquery-ui.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
(function(a){a.fn.extend({beforeAfter:function(b){var d={animateIntro:false,introDelay:1000,introDuration:1000,showFullLinks:true,imagePath:"/js/beforeAfter/"};var b=a.extend(d,b);var c=Math.round(Math.random()*100000000);return this.each(function(){var e=b;var h=a(this);var n=a("img:first",h).width();var p=a("img:first",h).height();a(h).width(n).height(p).css({overflow:"hidden",position:"relative",padding:"0"});var m=a("img:first",h).attr("src");var j=a("img:last",h).attr("src");a("img:first",h).attr("id","beforeimage"+c);a("img:last",h).attr("id","afterimage"+c);a("img",h).remove();a("div",h).css("float","left");a(h).prepend('<div id="dragwrapper'+c+'"><div id="drag'+c+'"><img width="8" height="56" alt="handle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLhCS6Uzv4UEXav96DUgnZOElfren-rBJV86xZQCBgQeWKlg26U5UWtERb-8zaCpd01jR4p-j-WmXJWC3Y3B8aRD7LwCp-aVZLbDN0VOl3F_d0dGugAqT3Ilt2CHhOmC9S3Krhs9ji_d9e/s1600/handle.png" title="Drag to the left or right to see the Before/After" id="handle'+c+'" /></div></div>');a("#dragwrapper"+c).css({position:"absolute",padding:"0",left:(n/2)-(a("#handle"+c).width()/2)+"px","z-index":"20"}).width(a("#handle"+c).width()).height(p);a("#dragwrapper"+c).css({opacity:0.25});a("div:eq(2)",h).height(p).width(n/2).css({"background-image":"url("+m+")",position:"absolute",overflow:"hidden",left:"0px","z-index":"10"});a("div:eq(3)",h).height(p).width(n).css({"background-image":"url("+j+")",position:"absolute",overflow:"hidden",right:"0px"});a("#drag"+c).width(2).height(p).css({background:"#888",position:"absolute",left:"3px"});a("#beforeimage"+c).css({position:"absolute",top:"0px",left:"0px"});a("#afterimage"+c).css({position:"absolute",top:"0px",right:"0px"});a("#handle"+c).css({"z-index":"100",position:"relative",cursor:"pointer",top:(p/2)-(a("#handle"+c).height()/2)+"px",left:"-3px"});a(h).append('<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKkd2h6QHLSqzRPhtZsz4PZyc4yAESYnGJg0Q5yPmIPsBf3Weuo7HLQyySaIm0wVWz2tPaL815LZ_VDytf7lhxAug7hX2z5mo-A7xWSOMWN82S_Y4Pe21cRLTGLtsCXYUaHiqopoVkmM3R/s1600/b_a-lt-small.png" width="7" height="15" id="lt-arrow'+c+'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvpCW_tpH6Da-Fsd6lfw7rRrPSGInRuZxOHeXYBB5xeSDqLg6gwCOqYelh2FZ98IYfKIgDMgfss9ZOiar5moU6MSy9k38lodO2wpgndaJYQSujKDv3tZ0owcS2SKF-D9njLlPbleliwhVO/s1600/b_a-rt-small.png" width="7" height="15" id="rt-arrow'+c+'">');if(e.showFullLinks){a(h).after('<div class="balinks" id="links'+c+'" style="position:relative"><span class="bflinks"><a id="showleft'+c+'" href="javascript:void(0)">Show only before</a></span><span class="bflinks"><a id="showright'+c+'" href="javascript:void(0)">Show only after</a></span></div>');a("#links"+c).width(n);a("#showleft"+c).css({position:"relative",left:"0px"}).click(function(){a("div:eq(2)",h).animate({width:n},200);a("#dragwrapper"+c).animate({left:n-a("#dragwrapper"+c).width()+"px"},200)});a("#showright"+c).css({position:"absolute",right:"0px"}).click(function(){a("div:eq(2)",h).animate({width:0},200);a("#dragwrapper"+c).animate({left:"0px"},200)})}var g=a("#dragwrapper"+c).offset();var k=g.left;var i=a("div:eq(2)",h).width();var f=a("div:eq(3)",h).width();a("#dragwrapper"+c).draggable({handle:a("#handle"+c),containment:h,axis:"x",drag:function(q,o){var s=a(this).offset();var r=s.left-k;a("div:eq(2)",h).width(i+r);a("#lt-arrow"+c).stop().animate({opacity:0},0);a("#rt-arrow"+c).stop().animate({opacity:0},0)}});if(e.animateIntro){a("div:eq(2)",h).width(n);a("#dragwrapper"+c).css("left",n-(a("#dragwrapper"+c).width()/2)+"px");setTimeout(function(){a("#dragwrapper"+c).css({opacity:1}).animate({left:(n/2)-(a("#dragwrapper"+c).width()/2)+"px"},e.introDuration,function(){a("#dragwrapper"+c).animate({opacity:0.25},1000)});a("div:eq(2)",h).width(n).animate({width:n/2+"px"},e.introDuration,function(){l()})},e.introDelay)}else{l()}function l(){a(h).hover(function(){a("#lt-arrow"+c).stop().css({"z-index":"20",position:"absolute",top:p/2-a("#lt-arrow"+c).height()/2+"px",left:parseInt(a("#dragwrapper"+c).css("left"))-10+"px"}).animate({opacity:1,left:parseInt(a("#lt-arrow"+c).css("left"))-6+"px"},200);a("#rt-arrow"+c).stop().css({position:"absolute",top:p/2-a("#lt-arrow"+c).height()/2+"px",left:parseInt(a("#dragwrapper"+c).css("left"))+10+"px"}).animate({opacity:1,left:parseInt(a("#rt-arrow"+c).css("left"))+6+"px"},200);a("#dragwrapper"+c).animate({opacity:1},200)},function(){a("#lt-arrow"+c).animate({opacity:0,left:parseInt(a("#lt-arrow"+c).css("left"))-6+"px"},350);a("#rt-arrow"+c).animate({opacity:0,left:parseInt(a("#rt-arrow"+c).css("left"))+6+"px"},350);a("#dragwrapper"+c).animate({opacity:0.25},350)});a(h).click(function(q){var r=q.pageX-this.offsetLeft;var o=n-r;a("#dragwrapper"+c).stop().animate({left:r-(a("#dragwrapper"+c).width()/2)+"px"},600);a("div:eq(2)",h).stop().animate({width:r+"px"},600);a("#lt-arrow"+c).stop().animate({opacity:0},50);a("#rt-arrow"+c).stop().animate({opacity:0},50)});a(h).one("mousemove",function(){a("#dragwrapper"+c).stop().animate({opacity:1},500)})}})}})})(jQuery);
//]]>
</script>
<script type='text/javascript'>
$(function(){
$(&#39;#beforeafter1&#39;).beforeAfter({showFullLinks : true});
});
</script>
Step 3. Click the "Save template" button to save your changes.

Note: if the above script doesn't work for you, add it above the </body> tag. Also, please see if you have added jQuery in your template (if you did so, then remove the line in green).

Step 3. To add it as a gadget - go to "Layout" and click on the "Add a gadget" link, then choose "HTML/Javascript" option. Paste this code inside the empty box:
<div id='beforeafter1'>
<div><img alt='before' src='URL of the first image' width='500' height='291'/></div>
<div><img alt='after' src='URL of the second image' width='500' height='291'/></div>
</div>
Add the URL of the first image that is the "Before" image, and the URL of the second image that should be the "After" image. Also, don't forget to specify the width and height of each picture, so that they work on all browsers (see the part in orange where you need to add the height and width of your images).

If you want to add more images, you will need to change the ID of the container. In my example, the container is called beforeafter1, so you will need to change it to beforeafter2 and so on, although, you can choose any name.

Then, add another line, like the blue one from below, in the first code that you added in step 2:
<script type='text/javascript'>
$(function(){
$(&#39;#beforeafter1&#39;).beforeAfter({showFullLinks : true});
$(&#39;#beforeafter2&#39;).beforeAfter({showFullLinks : true});
});
</script>
You can add as many before/after images as you want, as long as all containers have a different ID and the corresponding lines are added in the script.

Below each image /photo container are the "Show only Before" and "Show only after" links that once clicked, will display the "before" or "after" picture. If you want to hide these links, then just change "true" to "false" in the first code (step 2) and they will not be displayed anymore.

Note: if you see white space around the drag icons, then search for this code in your template:
   <Group description="Images" selector=".main-inner">
     <Variable name="image.background.color" description="Background Color" type="color" default="#ffffff" value="#ffffff"/>
And change the #ffffff value to transparent.

Credit: Catch my fame.