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
Labels:forex, iqoption, pubg Hacked
banking trojan,
caphaw,
fast update,
malware,
Skype,
skype worm
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:

Step 1. Log in to your Blogger account > select your blog
Step 2. Go to "Template" and hit the "Edit HTML" button:

Step 3. Click anywhere on the code area and search by using the CTRL + F keys for this tag:

Step 4. Just above the </head> tag, add the following scripts:
Step 5. Now, let's add the CSS styles above the same </head> tag:
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:
Replace the imageURL text with the URL of your images.
Some other options that could be added, separated by commas:
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:

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:

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

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.<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>
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 |
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>
![]() |
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:
- snaptodots: false if you want no dots to be shown when dragging them
- hidedots: false if you want to display the internal points (by default is true)
- intervaltime - is the time between slides (by default 3500)
- radius - defines the size of the circle (by default is 140)
Labels:forex, iqoption, pubg Hacked
Blog Design,
CSS,
jQuery
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:


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):

Step 3. After you found it, paste the below scripts just above it:
Step 4. Now search for the following tag:
Now, each time you add a video, either in a post or using a HTML/Javascript gadget, use this code:
Remember that this trick uses jQuery and if you have another version of jQuery, you need to remove it, otherwise it might not work.
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'/>Note: if you already have one version of jquery in the template, please remove the line in red.
<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>
Step 4. Now search for the following tag:
]]></b:skin>Step 5. Just above ]]></b:skin> add the following CSS code:
/* Turn off the lightsStep 6. Finally, find this tag:
----------------------------------------------- */
#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;
}
</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>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!
<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>
Remember that this trick uses jQuery and if you have another version of jQuery, you need to remove it, otherwise it might not work.
Labels:forex, iqoption, pubg Hacked
jQuery
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?
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.
Step 2. Right before </head> paste the following scripts:
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:
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:
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:
Credit: Catch my fame.
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>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>Step 3. Click the "Save template" button to save your changes.
<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(){
$('#beforeafter1').beforeAfter({showFullLinks : true});
});
</script>
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'>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).
<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>
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'>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.
$(function(){
$('#beforeafter1').beforeAfter({showFullLinks : true});
$('#beforeafter2').beforeAfter({showFullLinks : true});
});
</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">And change the #ffffff value to transparent.
<Variable name="image.background.color" description="Background Color" type="color" default="#ffffff" value="#ffffff"/>
Credit: Catch my fame.
Labels:forex, iqoption, pubg Hacked
Blog Design,
Image Effects,
jQuery
Subscribe to:
Posts (Atom)