blogger tools | wewillrock.wordpress.com

Posts Auto Slider Widget For Blogger/Websites

January 8, 2011 Leave a comment

This tutorial will show you how to add Mootools Featured Posts Slider into blogger or any other web site.You can look at the DEMO page of this Mootools Featured Posts Slider.Now if you like to add this slider to your site then follow the steps given below.

STEP #1 .
Login to your blogger dashboard–>Design– -> Edit HTML
Find .
Copy below code and paste it just before the tag .

//<![CDATA[

eval(function(p,a,c,k,e,r){e=function(c){return(c35?String.fromCharCode(c+29):c.toString(36))};if(!”.replace(/^/,String)){while(c–)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return’\\w+’};c=1};while(c–)if(k[c])p=p.replace(new RegExp(‘\\b’+e(c)+’\\b’,’g’),k[c]);return p}(‘11.36=f 12({1M:11,a:{1m:”2s”},X:8(B,A){7.P(“1v”,8(){7.1w=(7.13[“k”+7.1x.37()]!=0);b(7.1w&&2t.2u.38){7.e.39().2v(7.13)}},n);7.e=7.2w=$(B);7.Q(A);9 C=7.e.1n(“13”);7.13=C||f 1c(“3Y”,{3Z:$1Y(7.e.40(“14″,”1N”),{41:”42″})}).43(7.e);7.e.1Z(“13”,7.13).1d(“14″,0);7.l=[];7.1w=n},2s:8(){7.14=”14-15″;7.1x=”21″;7.k=7.e.2x},22:8(){7.14=”14-16″;7.1x=”23″;7.k=7.e.2y},17:8(A){7.e.1d(7.14,A[0]);7.13.1d(7.1x,A[1]);c 7},1O:8(E,D,C){9 B=[];9 A=2;A.3a(8(F){B[F]=11.1O(E[F],D[F],C)});c B},h:8(B,E){b(!7.z(Y.2z,B,E)){c 7}7[E||7.a.1m]();9 D=7.e.1e(7.14).1P();9 C=7.13.1e(7.1x).1P();9 A=[[D,C],[0,7.k]];9 G=[[D,C],[-7.k,0]];9 F;1Q(B){o”R”:F=A;1f;o”3b”:F=G;1f;o”1R”:F=(7.13[“k”+7.1x.37()]==0)?A:G}c 7.Q(F[0],F[1])},3c:8(A){c 7.h(“R”,A)},3d:8(A){c 7.h(“3b”,A)},2A:8(A){7[A||7.a.1m]();7.1w=j;c 7.17([-7.k,0])},2B:8(A){7[A||7.a.1m]();7.1w=n;c 7.17([0,7.k])},1R:8(A){c 7.h(“1R”,A)}});1c.44.r={17:8(B){9 A=7.1n(“r”);b(A){A.Z()}c 7.3e(“r”).1Z(“r:a”,$1Y({2C:”Z”},B))},2D:8(A){b(A||!7.1n(“r”)){b(A||!7.1n(“r:a”)){7.17(“r”,A)}7.1Z(“r”,f 11.36(7,7.1n(“r:a”)))}c 7.1n(“r”)}};1c.1o({r:8(D,E){D=D||”1R”;9 B=7.2D(“r”),A;1Q(D){o”2A”:B.2A(E);1f;o”2B”:B.2B(E);1f;o”1R”:9 C=7.1n(“r:2E”,B.1w);B[(C)?”3d”:”3c”](E);7.1Z(“r:2E”,!C);A=n;1f;45:B.h(D,E)}b(!A){7.3e(“r:2E”)}c 7}});11.46=f 12({1M:11,a:{k:{x:0,y:0},3f:n},X:8(B,A){7.e=7.2w=$(B);7.Q(A);9 D=7.Z.M(7,j);b($10(7.e)!=”e”){7.e=$(7.e.24().25)}9 C=7.e;b(7.a.3f){7.P(“h”,8(){C.P(“2F”,D)},n);7.P(“1v”,8(){C.18(“2F”,D)},n)}},17:8(){9 A=1y.3g(Y);7.e.3h(A[0],A[1])},1O:8(E,D,C){9 B=[];9 A=2;A.3a(8(F){B.26(11.1O(E[F],D[F],C))});c B},h:8(C,H){b(!7.z(Y.2z,C,H)){c 7}9 E=7.e.3i(),F=7.e.47();9 B=7.e.3j(),D={x:C,y:H};S(9 G R D){9 A=F[G]-E[G];b($1z(D[G])){D[G]=($10(D[G])==”2G”)?D[G].m(0,A):A}s{D[G]=B[G]}D[G]+=7.a.k[G]}c 7.Q([B.x,B.y],[D.x,D.y])},48:8(){c 7.h(j,0)},49:8(){c 7.h(0,j)},4a:8(){c 7.h(“1A”,j)},4b:8(){c 7.h(j,”1B”)},4c:8(B){9 A=$(B).27(7.e);c 7.h(A.x,A.y)}});11.3k=f 12({1M:11.4d,X:8(B,A){7.2H=7.2w=$$(B);7.Q(A)},1O:8(G,H,I){9 C={};S(9 D R G){9 A=G[D],E=H[D],F=C[D]={};S(9 B R A){F[B]=7.Q(A[B],E[B],I)}}c C},17:8(B){S(9 C R B){9 A=B[C];S(9 D R A){7.4e(7.2H[C],D,A[D],7.a.2I)}}c 7},h:8(C){b(!7.z(Y.2z,C)){c 7}9 H={},I={};S(9 D R C){9 F=C[D],A=H[D]={},G=I[D]={};S(9 B R F){9 E=7.4f(7.2H[D],B,F[B]);A[B]=E.4g;G[B]=E.4h}}c 7.Q(H,I)}});9 1C=f 12({2J:[2K,2L],a:{1p:6,2I:”4i”,1g:j,2M:n,m:j,28:j,29:j,1q:j,U:{x:”16″,y:”15″}},X:8(){9 B=1y.2C(Y,{a:4j.10,e:$4k});7.e=$(B.e);7.t=7.e.24();7.2N(B.a||{});9 A=$10(7.a.28);7.2O=(A==”4l”||A==”4m”)?$$(7.a.28):$(7.a.28)||7.e;7.19={l:{},2P:{}};7.p={h:{},l:{}};7.2a=(2t.2u.4n)?”4o”:”2b”;7.v={h:7.h.M(7),z:7.z.M(7),V:7.V.M(7),1h:7.1h.M(7),Z:7.Z.M(7),2c:$2Q(j)};7.3l()},3l:8(){7.2O.P(“2b”,7.v.h);c 7},4p:8(){7.2O.18(“2b”,7.v.h);c 7},h:8(C){b(7.a.1q){C.1q()}7.u(“4q”,7.e);7.19.h=C.N;9 A=7.a.m;7.m={x:[],y:[]};S(9 D R 7.a.U){b(!7.a.U[D]){3m}b(7.a.2M){7.p.l[D]=7.e.1e(7.a.U[D]).1P()}s{7.p.l[D]=7.e[7.a.U[D]]}b(7.a.29){7.p.l[D]*=-1}7.19.2P[D]=C.N[D]-7.p.l[D];b(A&&A[D]){S(9 B=2;B–;B){b($1z(A[D][B])){7.m[D][B]=$2Q(A[D][B])()}}}}b($10(7.a.1g)==”2G”){7.a.1g={x:7.a.1g,y:7.a.1g}}7.t.2R({1D:7.v.z,2d:7.v.Z});7.t.P(7.2a,7.v.2c)},z:8(A){b(7.a.1q){A.1q()}9 B=i.O(i.4r(i.3n(A.N.x-7.19.h.x,2)+i.3n(A.N.y-7.19.h.y,2)));b(B>7.a.1p){7.Z();7.t.2R({1D:7.v.V,2d:7.v.1h});7.u(“h”,7.e).u(“1p”,7.e)}},V:8(A){b(7.a.1q){A.1q()}7.19.l=A.N;S(9 B R 7.a.U){b(!7.a.U[B]){3m}7.p.l[B]=7.19.l[B]-7.19.2P[B];b(7.a.29){7.p.l[B]*=-1}b(7.a.m&&7.m[B]){b($1z(7.m[B][1])&&(7.p.l[B]>7.m[B][1])){7.p.l[B]=7.m[B][1]}s{b($1z(7.m[B][0])&&(7.p.l[B]B.16&&A.x<B.1A&&A.yB.15)},2f:8(){9 A=7.1S.4w(7.3s,7).3t();b(7.1s!=A){b(7.1s){7.u(“4x”,[7.e,7.1s])}b(A){7.1s=A;7.u(“4y”,[7.e,A])}s{7.1s=1E}}},V:8(A){7.Q(A);b(7.1S.2g){7.2f()}},1h:8(A){7.2f();7.u(“4z”,[7.e,7.1s]);7.1s=1E;c 7.Q(A)}});1c.1o({4A:8(A){c f 1C.3o(7,A)}});1F.2S=f 12({1M:2S,a:{3u:n},X:8(B,A){7.Q(B,A);7.2h()},3v:8(){9 A=3w.4B(7.2T);b(!A||A.2g>4C){c j}b(A==”{}”){7.39()}s{7.4D(A)}c n},2h:8(){7.2T=f 1F(3w.4E(7.4F(),n));c 7}});1F.2S.1o((8(){9 A={};1F.1r(1F.4G,8(C,B){A[B]=8(){9 D=C.4H(7.2T,Y);b(7.a.3u){7.3v()}c D}});c A})());9 W=f 4I({X:8(B,C){b(Y.2g>=3){C=”1G”;B=1y.2i(Y,0,3)}s{b(4J B==”4K”){b(B.2j(/1G/)){B=B.3x().2U(n)}s{b(B.2j(/q/)){B=B.1T()}s{B=B.2U(n)}}}}C=C||”1G”;1Q(C){o”q”:9 A=B;B=B.1T();B.q=A;1f;o”2V”:B=B.2U(n);1f}B.1G=B.2i(0,3);B.q=B.q||B.2k();B.2V=B.3x();c $1Y(B,7)}});W.1o({4L:8(){9 A=1y.2i(Y);9 C=($10(A.3t())==”2G”)?A.4M():50;9 B=7.2i();A.1r(8(D){D=f W(D);S(9 E=0;E<3;E++){B[E]=i.O((B[E]/1i*(1i-C))+(D[E]/1i*C))}});c f W(B,"1G")},29:8(){c f W(7.4N(8(A){c 1H-A}))},4O:8(A){c f W([A,7.q[1],7.q[2]],"q")},4P:8(A){c f W([7.q[0],A,7.q[2]],"q")},4Q:8(A){c f W([7.q[0],7.q[1],A],"q")}});8 $4R(C,B,A){c f W([C,B,A],"1G")}8 $4S(C,B,A){c f W([C,B,A],"q")}8 $4T(A){c f W(A,"2V")}1y.1o({2k:8(){9 B=7[0],C=7[1],J=7[2];9 G,F,H;9 I=i.1U(B,C,J),E=i.1j(B,C,J);9 K=I-E;H=I/1H;F=(I!=0)?K/I:0;b(F==0){G=0}s{9 D=(I-B)/K;9 A=(I-C)/K;9 L=(I-J)/K;b(B==I){G=L-A}s{b(C==I){G=2+D-L}s{G=4+A-D}}G/=6;b(G0)^(A0)^(A>7.1U))){A=7.1U}7.w=i.O(A);7.2q();7.2p();7.u(“3U”,7.2Z(7.w));c 7},3Q:8(C){9 B=7.T<0?-1:1;9 A=C.N[7.1l]-7.e.27()[7.1l]-7.3S;A=A.m(-7.a.k,7.1b-7.a.k);7.w=i.O(7.1j+B*7.33(A));7.2q();7.2p();7.u("3U",A)},3R:8(A){9 B=(7.a.1m=="22")?(A.2n0);7.17(B?7.w-7.1u:7.w+7.1u);A.1h()},2o:8(){9 B=7.T<0?-1:1;9 A=7.V.p.l[7.1l];A=A.m(-7.a.k,7.1b-7.a.k);7.w=i.O(7.1j+B*7.33(A));7.2q()},2q:8(){b(7.30!=7.w){7.30=7.w;7.u("3V",7.w)}},2p:8(){b(7.31!==7.w){7.31=7.w;7.u("1v",7.w+"")}},33:8(A){9 B=(A+7.a.k)*7.1u/7.1b*7.1k;c 7.a.1k?i.O(B-=B%7.1u):B},2Z:8(A){c(7.1b*i.32(7.1j-A))/(7.1k*7.1u)-7.a.k}});9 5p=f 12({2J:[2K,2L],a:{1W:20,34:1,5q:8(A,B){7.e.3h(A,B)}},X:8(B,A){7.2N(A);7.e=$(B);7.2r=($10(7.e)!="e")?$(7.e.24().25):7.e;7.1X=1E;7.35=7.3W.M(7)},h:8(){7.2r.P("1D",7.35)},1h:8(){7.2r.18("1D",7.35);7.1X=$3H(7.1X)},3W:8(A){7.N=(7.2r.2D("5r")=="25")?A.5s:A.N;b(!7.1X){7.1X=7.3X.3I(50,7)}},3X:8(){9 B=7.e.3i(),A=7.e.3j(),E=7.e.27(),D={x:0,y:0};S(9 C R 7.N){b(7.N[C](B[C]+E[C])&&B[C]+B[C]!=A[C]){D[C]=(7.N[C]-B[C]+7.a.1W-E[C])*7.a.34}}}b(D.y||D.x){7.u(“3V”,[A.x+D.x,A.y+D.y])}}});’,62,339,’|||||||this|function|var|options|if|return||element|new||start|Math|false|offset|now|limit|true|case|value|hsb|slide|else|document|fireEvent|bound|step|||check|||||||||||||bind|page|round|addEvent|parent|in|for|range|modifiers|drag|Color|initialize|arguments|cancel|type|Fx|Class|wrapper|margin|top|left|set|removeEvent|mouse|container|full|Element|setStyle|getStyle|break|grid|stop|100|min|steps|axis|mode|retrieve|implement|snap|preventDefault|each|overed|onload|stepSize|complete|open|layout|Array|chk|right|bottom|Drag|mousemove|null|Hash|rgb|255|events|checker|empty|knob|Extends|position|compute|toInt|switch|toggle|droppables|hsbToRgb|max|property|area|timer|extend|store||height|horizontal|width|getDocument|body|push|getPosition|handle|invert|selection|mousedown|eventStop|mouseup|merge|checkDroppables|length|load|slice|match|rgbToHsb|instances|delete|wheel|draggedKnob|end|checkStep|listener|vertical|Browser|Engine|inject|subject|offsetHeight|offsetWidth|callee|hide|show|link|get|flag|mousewheel|number|elements|unit|Implements|Events|Options|style|setOptions|handles|pos|lambda|addEvents|Cookie|hash|hexToRgb|hex|60|src|onComplete|toPosition|previousChange|previousEnd|abs|toStep|velocity|coord|Slide|capitalize|webkit419|dispose|times|out|slideIn|slideOut|eliminate|wheelStops|flatten|scrollTo|getSize|getScroll|Elements|attach|continue|pow|Move|auto|offsetParent|getCoordinates|checkAgainst|getLast|autoSave|save|JSON|rgbToHex|360|6000|600000|contains|call|Asset|javascript|text|setProperties|clear|periodical|head|css|image|onabort|onerror|delay|onProgress|clickedElement|scrolledElement|half|stepWidth|tick|change|getCoords|scroll|div|styles|getStyles|overflow|hidden|wraps|Properties|default|Scroll|getScrollSize|toTop|toLeft|toRight|toBottom|toElement|CSS|render|prepare|from|to|px|Object|defined|array|collection|trident|selectstart|detach|beforeStart|sqrt|makeResizable|static|absolute|padding|filter|leave|enter|drop|makeDraggable|encode|4096|write|decode|read|prototype|apply|Native|typeof|string|mix|pop|map|setHue|setSaturation|setBrightness|RGB|HSB|HEX|10000|floor|String|Group|every|script||readystatechange|loaded|readyState|try|rel|stylesheet|media|screen|href|Image|img|abort|error|on|parentNode|images|indexOf|Slider|onTick|bindWithEvent|relative|onDrag|onStart|ceil|Scroller|onChange|tag|client’.split(‘|’),0,{}))

//]]>

//<![CDATA[

/*

This file is part of JonDesign’s SmoothGallery v2.1beta1.

JonDesign’s SmoothGallery is free software; you can redistribute it and/or modify

it under the terms of the GNU General Public License as published by

the Free Software Foundation; either version 3 of the License, or

(at your option) any later version.

JonDesign’s SmoothGallery is distributed in the hope that it will be useful,

but WITHOUT ANY WARRANTY; without even the implied warranty of

MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the

GNU General Public License for more details.

You should have received a copy of the GNU General Public License

along with JonDesign’s SmoothGallery; if not, write to the Free Software

Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA

Main Developer: Jonathan Schemoul (JonDesign: http://www.jondesign.net/)

Contributed code by:

– Christian Ehret (bugfix)

   – Nitrix (bugfix)

   – Valerio from Mad4Milk for his great help with the carousel scrolling and many other things.

   – Archie Cowan for helping me find a bugfix on carousel inner width problem.

   – Tomocchino from #mootools for the preloader class

   Many thanks to:

   – The mootools team for the great mootools lib, and it’s help and support throughout the project.

   – Harald Kirschner (digitarald: http://digitarald.de/) for all his great libs. Some used here as plugins.

*/

/* some quirks to circumvent broken stuff in mt1.2 */

function isBody(element){

   return (/^(?:body|html)$/i).test(element.tagName);

};

Element.implement({

   getPosition: function(relative){

   if (isBody(this)) return {x: 0, y: 0};

   var el = this, position = {x: 0, y: 0};

   while (el){

   position.x += el.offsetLeft;

   position.y += el.offsetTop;

   el = el.offsetParent;

   }

   var rpos = (relative) ? $(relative).getPosition() : {x: 0, y: 0};

   return {x: position.x – rpos.x, y: position.y – rpos.y};

   }

});

// declaring the class

var gallery = {

   Implements: [Events, Options],

   options: {

   showArrows: true,

   showCarousel: true,

   showInfopane: true,

   embedLinks: true,

   fadeDuration: 500,

   timed: false,

   delay: 9000,

   preloader: true,

   preloaderImage: true,

   preloaderErrorImage: true,

   /* Data retrieval */

   manualData: [],

   populateFrom: false,

   populateData: true,

   destroyAfterPopulate: true,

   elementSelector: “div.imageElement”,

   titleSelector: “h3”,

   subtitleSelector: “p”,

   linkSelector: “a.open”,

   imageSelector: “img.full”,

   thumbnailSelector: “img.thumbnail”,

   defaultTransition: “fade”,

   /* InfoPane options */

   slideInfoZoneOpacity: 0.7,

   slideInfoZoneSlide: true,

   /* Carousel options */

   carouselMinimizedOpacity: 0.4,

   carouselMinimizedHeight: 20,

   carouselMaximizedOpacity: 0.9,

   thumbHeight: 75,

   thumbWidth: 100,

   thumbSpacing: 10,

   thumbIdleOpacity: 0.2,

   textShowCarousel: ‘Pictures’,

   showCarouselLabel: true,

   thumbCloseCarousel: true,

   useThumbGenerator: false,

   thumbGenerator: ‘resizer.php’,

   useExternalCarousel: false,

   carouselElement: false,

   carouselHorizontal: true,

   activateCarouselScroller: true,

   carouselPreloader: true,

   textPreloadingCarousel: ‘Loading…’,

   /* CSS Classes */

   baseClass: ‘jdGallery’,

   withArrowsClass: ‘withArrows’,

   /* Plugins: HistoryManager */

   useHistoryManager: false,

   customHistoryKey: false,

   /* Plugins: ReMooz */

   useReMooz: false

   },

   initialize: function(element, options) {

   this.setOptions(options);

   this.fireEvent(‘onInit’);

   this.currentIter = 0;

   this.lastIter = 0;

   this.maxIter = 0;

   this.galleryElement = element;

   this.galleryData = this.options.manualData;

   this.galleryInit = 1;

   this.galleryElements = Array();

   this.thumbnailElements = Array();

   this.galleryElement.addClass(this.options.baseClass);

   if (this.options.useReMooz&&(this.options.defaultTransition==”fade”))

   this.options.defaultTransition=”crossfade”;

   this.populateFrom = element;

   if (this.options.populateFrom)

   this.populateFrom = this.options.populateFrom;

   if (this.options.populateData)

   this.populateData();

   element.style.display=”block”;

   if (this.options.useHistoryManager)

   this.initHistory();

   if ((this.options.embedLinks)|(this.options.useReMooz))

   {

   this.currentLink = new Element(‘a’).addClass(‘open’).setProperties({

   href: ‘#’,

   title: ”

   }).injectInside(element);

   if ((!this.options.showArrows) && (!this.options.showCarousel))

   this.galleryElement = element = this.currentLink;

   else

   this.currentLink.setStyle(‘display’, ‘none’);

   }

   this.constructElements();

   if ((this.galleryData.length>1)&&(this.options.showArrows))

   {

   var leftArrow = new Element(‘a’).addClass(‘left’).addEvent(

   ‘click’,

   this.prevItem.bind(this)

   ).injectInside(element);

   var rightArrow = new Element(‘a’).addClass(‘right’).addEvent(

   ‘click’,

   this.nextItem.bind(this)

   ).injectInside(element);

   this.galleryElement.addClass(this.options.withArrowsClass);

   }

   this.loadingElement = new Element(‘div’).addClass(‘loadingElement’).injectInside(element);

   if (this.options.showInfopane) this.initInfoSlideshow();

   if (this.options.showCarousel) this.initCarousel();

   this.doSlideShow(1);

   },

   populateData: function() {

   currentArrayPlace = this.galleryData.length;

   options = this.options;

   var data = $A(this.galleryData);

   data.extend(this.populateGallery(this.populateFrom, currentArrayPlace));

   this.galleryData = data;

   this.fireEvent(‘onPopulated’);

   },

   populateGallery: function(element, startNumber) {

   var data = [];

   options = this.options;

   currentArrayPlace = startNumber;

   element.getElements(options.elementSelector).each(function(el) {

   elementDict = $H({

   image: el.getElement(options.imageSelector).getProperty(‘src’),

   number: currentArrayPlace,

   transition: this.options.defaultTransition

   });

   if ((options.showInfopane) | (options.showCarousel))

   elementDict.extend({

   title: el.getElement(options.titleSelector).innerHTML,

   description: el.getElement(options.subtitleSelector).innerHTML

   });

   if ((options.embedLinks) | (options.useReMooz))

   elementDict.extend({

   link: el.getElement(options.linkSelector).href||false,

   linkTitle: el.getElement(options.linkSelector).title||false,

   linkTarget: el.getElement(options.linkSelector).getProperty(‘target’)||false

   });

   if ((!options.useThumbGenerator) && (options.showCarousel))

   elementDict.extend({

   thumbnail: el.getElement(options.thumbnailSelector).getProperty(‘src’)

   });

   else if (options.useThumbGenerator)

   elementDict.extend({

   thumbnail: options.thumbGenerator + ‘?imgfile=’ + elementDict.image + ‘&max_width=’ + options.thumbWidth + ‘&max_height=’ + options.thumbHeight

   });

   data.extend([elementDict]);

   currentArrayPlace++;

   if (this.options.destroyAfterPopulate)

   el.dispose();

   });

   return data;

   },

   constructElements: function() {

   el = this.galleryElement;

   if (this.options.embedLinks && (!this.options.showArrows))

   el = this.currentLink;

   this.maxIter = this.galleryData.length;

   var currentImg;

   for(i=0;i<this.galleryData.length;i++)

   {

   var currentImg = new Fx.Morph(

   new Element(‘div’).addClass(‘slideElement’).setStyles({

   ‘position’:’absolute’,

   ‘left’:’0px’,

   ‘right’:’0px’,

   ‘margin’:’0px’,

   ‘padding’:’0px’,

   ‘backgroundPosition’:”center center”,

   ‘opacity’:’0′

   }).injectInside(el),

   {duration: this.options.fadeDuration}

   );

   if (this.options.preloader)

   {

   currentImg.source = this.galleryData[i].image;

   currentImg.loaded = false;

   currentImg.load = function(imageStyle, i) {

   if (!imageStyle.loaded) {

   this.galleryData[i].imgloader = new Asset.image(imageStyle.source, {

   ‘onload’ : function(img, i){

   img.element.setStyle(

   ‘backgroundImage’,

   “url(‘” + img.source + “‘)”)

   img.loaded = true;

   img.width = this.galleryData[i].imgloader.width;

   img.height = this.galleryData[i].imgloader.height;

   }.pass([imageStyle, i], this)

   });

   }

   }.pass([currentImg, i], this);

   } else {

   currentImg.element.setStyle(‘backgroundImage’,

   “url(‘” + this.galleryData[i].image + “‘)”);

   }

   this.galleryElements[parseInt(i)] = currentImg;

   }

   },

   destroySlideShow: function(element) {

   var myClassName = element.className;

   var newElement = new Element(‘div’).addClass(‘myClassName’);

   element.parentNode.replaceChild(newElement, element);

   },

   startSlideShow: function() {

   this.fireEvent(‘onStart’);

   this.loadingElement.style.display = “none”;

   this.lastIter = this.maxIter – 1;

   this.currentIter = 0;

   this.galleryInit = 0;

   this.galleryElements[parseInt(this.currentIter)].set({opacity: 1});

   if (this.options.showInfopane)

   this.showInfoSlideShow.delay(1000, this);

   if (this.options.useReMooz)

   this.makeReMooz.delay(1000, this);

   var textShowCarousel = formatString(this.options.textShowCarousel, this.currentIter+1, this.maxIter);

   if (this.options.showCarousel&&(!this.options.carouselPreloader)&&(!this.options.useExternalCarousel))

   this.carouselBtn.set(‘html’, textShowCarousel).setProperty(‘title’, textShowCarousel);

   this.prepareTimer();

   if (this.options.embedLinks)

   this.makeLink(this.currentIter);

   },

   nextItem: function() {

   this.fireEvent(‘onNextCalled’);

   this.nextIter = this.currentIter+1;

   if (this.nextIter >= this.maxIter)

   this.nextIter = 0;

   this.galleryInit = 0;

   this.goTo(this.nextIter);

   },

   prevItem: function() {

   this.fireEvent(‘onPreviousCalled’);

   this.nextIter = this.currentIter-1;

   if (this.nextIter <= -1)

   this.nextIter = this.maxIter – 1;

   this.galleryInit = 0;

   this.goTo(this.nextIter);

   },

   goTo: function(num) {

   this.clearTimer();

   if(this.options.preloader)

   {

   this.galleryElements[num].load();

   if (num==0)

   this.galleryElements[this.maxIter – 1].load();

   else

   this.galleryElements[num – 1].load();

   if (num==(this.maxIter – 1))

   this.galleryElements[0].load();

   else

   this.galleryElements[num + 1].load();

   }

   if (this.options.embedLinks)

   this.clearLink();

   if (this.options.showInfopane)

   {

   this.slideInfoZone.clearChain();

   this.hideInfoSlideShow().chain(this.changeItem.pass(num, this));

   } else

   this.currentChangeDelay = this.changeItem.delay(500, this, num);

   if (this.options.embedLinks)

   this.makeLink(num);

   this.prepareTimer();

   /*if (this.options.showCarousel)

   this.clearThumbnailsHighlights();*/

   },

   changeItem: function(num) {

   this.fireEvent(‘onStartChanging’);

   this.galleryInit = 0;

   if (this.currentIter != num)

   {

   for(i=0;i<this.maxIter;i++)

   {

   if ((i != this.currentIter)) this.galleryElements[i].set({opacity: 0});

   }

   gallery.Transitions[this.galleryData[num].transition].pass([

   this.galleryElements[this.currentIter],

   this.galleryElements[num],

   this.currentIter,

   num], this)();

   this.currentIter = num;

   if (this.options.useReMooz)

   this.makeReMooz();

   }

   var textShowCarousel = formatString(this.options.textShowCarousel, num+1, this.maxIter);

   if ((this.options.showCarousel)&&(!this.options.useExternalCarousel))

   this.carouselBtn.set(‘html’, textShowCarousel).setProperty(‘title’, textShowCarousel);

   this.doSlideShow.bind(this)();

   this.fireEvent(‘onChanged’);

   },

   clearTimer: function() {

   if (this.options.timed)

   $clear(this.timer);

   },

   prepareTimer: function() {

   if (this.options.timed)

   this.timer = this.nextItem.delay(this.options.delay, this);

   },

   doSlideShow: function(position) {

   if (this.galleryInit == 1)

   {

   imgPreloader = new Image();

   imgPreloader.onload=function(){

   this.startSlideShow.delay(10, this);

   }.bind(this);

   imgPreloader.src = this.galleryData[0].image;

   if(this.options.preloader)

   this.galleryElements[0].load();

   } else {

   if (this.options.showInfopane)

   {

   if (this.options.showInfopane)

   {

   this.showInfoSlideShow.delay((500 + this.options.fadeDuration), this);

   } else

   if ((this.options.showCarousel)&&(this.options.activateCarouselScroller))

   this.centerCarouselOn(position);

   }

   }

   },

   createCarousel: function() {

   var carouselElement;

   if (!this.options.useExternalCarousel)

   {

   var carouselContainerElement = new Element(‘div’).addClass(‘carouselContainer’).injectInside(this.galleryElement);

   this.carouselContainer = new Fx.Morph(carouselContainerElement, {transition: Fx.Transitions.Expo.easeOut});

   this.carouselContainer.normalHeight = carouselContainerElement.offsetHeight;

   this.carouselContainer.set({‘opacity’: this.options.carouselMinimizedOpacity, ‘top’: (this.options.carouselMinimizedHeight – this.carouselContainer.normalHeight)});

   this.carouselBtn = new Element(‘a’).addClass(‘carouselBtn’).setProperties({

   title: this.options.textShowCarousel

   }).injectInside(carouselContainerElement);

   if(this.options.carouselPreloader)

   this.carouselBtn.set(‘html’, this.options.textPreloadingCarousel);

   else

   this.carouselBtn.set(‘html’, this.options.textShowCarousel);

   this.carouselBtn.addEvent(

   ‘click’,

   function () {

   this.carouselContainer.cancel();

   this.toggleCarousel();

   }.bind(this)

   );

   this.carouselActive = false;

   carouselElement = new Element(‘div’).addClass(‘carousel’).injectInside(carouselContainerElement);

   this.carousel = new Fx.Morph(carouselElement);

   } else {

   carouselElement = $(this.options.carouselElement).addClass(‘jdExtCarousel’);

   }

   this.carouselElement = new Fx.Morph(carouselElement, {transition: Fx.Transitions.Expo.easeOut});

   this.carouselElement.normalHeight = carouselElement.offsetHeight;

   if (this.options.showCarouselLabel)

   this.carouselLabel = new Element(‘p’).addClass(‘label’).injectInside(carouselElement);

   carouselWrapper = new Element(‘div’).addClass(‘carouselWrapper’).injectInside(carouselElement);

   this.carouselWrapper = new Fx.Morph(carouselWrapper, {transition: Fx.Transitions.Expo.easeOut});

   this.carouselWrapper.normalHeight = carouselWrapper.offsetHeight;

   this.carouselInner = new Element(‘div’).addClass(‘carouselInner’).injectInside(carouselWrapper);

   if (this.options.activateCarouselScroller)

   {

   this.carouselWrapper.scroller = new Scroller(carouselWrapper, {

   area: 100,

   velocity: 0.2

   })

   this.carouselWrapper.elementScroller = new Fx.Scroll(carouselWrapper, {

   duration: 400,

   onStart: this.carouselWrapper.scroller.stop.bind(this.carouselWrapper.scroller),

   onComplete: this.carouselWrapper.scroller.start.bind(this.carouselWrapper.scroller)

   });

   }

   },

   fillCarousel: function() {

   this.constructThumbnails();

   this.carouselInner.normalWidth = ((this.maxIter * (this.options.thumbWidth + this.options.thumbSpacing + 2))+this.options.thumbSpacing) + “px”;

   if (this.options.carouselHorizontal)

   this.carouselInner.style.width = this.carouselInner.normalWidth;

   },

   initCarousel: function () {

   this.createCarousel();

   this.fillCarousel();

   if (this.options.carouselPreloader)

   this.preloadThumbnails();

   },

   flushCarousel: function() {

   this.thumbnailElements.each(function(myFx) {

   myFx.element.dispose();

   myFx = myFx.element = null;

   });

   this.thumbnailElements = [];

   },

   toggleCarousel: function() {

   if (this.carouselActive)

   this.hideCarousel();

   else

   this.showCarousel();

   },

   showCarousel: function () {

   this.fireEvent(‘onShowCarousel’);

   this.carouselContainer.start({

   ‘opacity’: this.options.carouselMaximizedOpacity,

   ‘top’: 0

   }).chain(function() {

   this.carouselActive = true;

   this.carouselWrapper.scroller.start();

   this.fireEvent(‘onCarouselShown’);

   this.carouselContainer.options.onComplete = null;

   }.bind(this));

   },

   hideCarousel: function () {

   this.fireEvent(‘onHideCarousel’);

   var targetTop = this.options.carouselMinimizedHeight – this.carouselContainer.normalHeight;

   this.carouselContainer.start({

   ‘opacity’: this.options.carouselMinimizedOpacity,

   ‘top’: targetTop

   }).chain(function() {

   this.carouselActive = false;

   this.carouselWrapper.scroller.stop();

   this.fireEvent(‘onCarouselHidden’);

   this.carouselContainer.options.onComplete = null;

   }.bind(this));

   },

   constructThumbnails: function () {

   element = this.carouselInner;

   for(i=0;i<this.galleryData.length;i++)

   {

   var currentImg = new Fx.Morph(new Element (‘div’).addClass(“thumbnail”).setStyles({

   backgroundImage: “url(‘” + this.galleryData[i].thumbnail + “‘)”,

   backgroundPosition: “center center”,

   backgroundRepeat: ‘no-repeat’,

   marginLeft: this.options.thumbSpacing + “px”,

   width: this.options.thumbWidth + “px”,

   height: this.options.thumbHeight + “px”

   }).injectInside(element), {duration: 200}).start({

   ‘opacity’: this.options.thumbIdleOpacity

   });

   currentImg.element.addEvents({

   ‘mouseover’: function (myself) {

   myself.cancel();

   myself.start({‘opacity’: 0.99});

   if (this.options.showCarouselLabel)

   $(this.carouselLabel).set(‘html’, ‘‘ + (myself.relatedImage.number + 1) + “/” + this.maxIter + “: ” + myself.relatedImage.title);

   }.pass(currentImg, this),

   ‘mouseout’: function (myself) {

   myself.cancel();

   myself.start({‘opacity’: this.options.thumbIdleOpacity});

   }.pass(currentImg, this),

   ‘click’: function (myself) {

   this.goTo(myself.relatedImage.number);

   if (this.options.thumbCloseCarousel&&(!this.options.useExternalCarousel))

   this.hideCarousel();

   }.pass(currentImg, this)

   });

   currentImg.relatedImage = this.galleryData[i];

   this.thumbnailElements[parseInt(i)] = currentImg;

   }

   },

   log: function(value) {

   if(console.log)

   console.log(value);

   },

   preloadThumbnails: function() {

   var thumbnails = [];

   for(i=0;i<this.galleryData.length;i++)

   {

   thumbnails[parseInt(i)] = this.galleryData[i].thumbnail;

   }

   this.thumbnailPreloader = new Preloader();

   if (!this.options.useExternalCarousel)

   this.thumbnailPreloader.addEvent(‘onComplete’, function() {

   var textShowCarousel = formatString(this.options.textShowCarousel, this.currentIter+1, this.maxIter);

   this.carouselBtn.set(‘html’, textShowCarousel).setProperty(‘title’, textShowCarousel);

   }.bind(this));

   this.thumbnailPreloader.load(thumbnails);

   },

   clearThumbnailsHighlights: function()

   {

   for(i=0;i<this.galleryData.length;i++)

   {

   this.thumbnailElements[i].cancel();

   this.thumbnailElements[i].start(0.2);

   }

   },

   changeThumbnailsSize: function(width, height)

   {

   for(i=0;i<this.galleryData.length;i++)

   {

   this.thumbnailElements[i].cancel();

   this.thumbnailElements[i].element.setStyles({

   ‘width’: width + “px”,

   ‘height’: height + “px”

   });

   }

   },

   centerCarouselOn: function(num) {

   if (!this.carouselWallMode)

   {

   var carouselElement = this.thumbnailElements[num];

   var position = carouselElement.element.offsetLeft + (carouselElement.element.offsetWidth / 2);

   var carouselWidth = this.carouselWrapper.element.offsetWidth;

   var carouselInnerWidth = this.carouselInner.offsetWidth;

   var diffWidth = carouselWidth / 2;

   var scrollPos = position-diffWidth;

   this.carouselWrapper.elementScroller.start(scrollPos,0);

   }

   },

   initInfoSlideshow: function() {

   /*if (this.slideInfoZone.element)

   this.slideInfoZone.element.remove();*/

   this.slideInfoZone = new Fx.Morph(new Element(‘div’).addClass(‘slideInfoZone’).injectInside($(this.galleryElement))).set({‘opacity’:0});

   var slideInfoZoneTitle = new Element(‘h2’).injectInside(this.slideInfoZone.element);

   var slideInfoZoneDescription = new Element(‘p’).injectInside(this.slideInfoZone.element);

   this.slideInfoZone.normalHeight = this.slideInfoZone.element.offsetHeight;

   this.slideInfoZone.element.setStyle(‘opacity’,0);

   },

   changeInfoSlideShow: function()

   {

   this.hideInfoSlideShow.delay(10, this);

   this.showInfoSlideShow.delay(500, this);

   },

   showInfoSlideShow: function() {

   this.fireEvent(‘onShowInfopane’);

   this.slideInfoZone.cancel();

   element = this.slideInfoZone.element;

   element.getElement(‘h2’).set(‘html’, this.galleryData[this.currentIter].title);

   element.getElement(‘p’).set(‘html’, this.galleryData[this.currentIter].description);

   if(this.options.slideInfoZoneSlide)

   this.slideInfoZone.start({‘opacity’: [0, this.options.slideInfoZoneOpacity], ‘height’: [0, this.slideInfoZone.normalHeight]});

   else

   this.slideInfoZone.start({‘opacity’: [0, this.options.slideInfoZoneOpacity]});

   if (this.options.showCarousel)

   this.slideInfoZone.chain(this.centerCarouselOn.pass(this.currentIter, this));

   return this.slideInfoZone;

   },

   hideInfoSlideShow: function() {

   this.fireEvent(‘onHideInfopane’);

   this.slideInfoZone.cancel();

   if(this.options.slideInfoZoneSlide)

   this.slideInfoZone.start({‘opacity’: 0, ‘height’: 0});

   else

   this.slideInfoZone.start({‘opacity’: 0});

   return this.slideInfoZone;

   },

   makeLink: function(num) {

   this.currentLink.setProperties({

   href: this.galleryData[num].link,

   title: this.galleryData[num].linkTitle

   })

   if (!((this.options.embedLinks) && (!this.options.showArrows) && (!this.options.showCarousel)))

   this.currentLink.setStyle(‘display’, ‘block’);

   },

   clearLink: function() {

   this.currentLink.setProperties({href: ”, title: ”});

   if (!((this.options.embedLinks) && (!this.options.showArrows) && (!this.options.showCarousel)))

   this.currentLink.setStyle(‘display’, ‘none’);

   },

   makeReMooz: function() {

   this.currentLink.setProperties({

   href: ‘#’

   });

   this.currentLink.setStyles({

   ‘display’: ‘block’

   });

   this.galleryElements[this.currentIter].element.set(‘title’, this.galleryData[this.currentIter].title + ‘ :: ‘ + this.galleryData[this.currentIter].description);

   this.ReMooz = new ReMooz(this.galleryElements[this.currentIter].element, {

   link: this.galleryData[this.currentIter].link,

   shadow: false,

   dragging: false,

   addClick: false,

   resizeOpacity: 1

   });

   var img = this.galleryElements[this.currentIter];

   var coords = img.element.getCoordinates();

   delete coords.right;

   delete coords.bottom;

   widthDiff = coords.width – img.width;

   heightDiff = coords.height – img.height;

   coords.width = img.width;

   coords.height = img.height;

   coords.left += Math.ceil(widthDiff/2)+1;

   coords.top += Math.ceil(heightDiff/2)+1;

   this.ReMooz.getOriginCoordinates = function(coords) {

   return coords;

   }.bind(this, coords);

   this.currentLink.onclick = function () {

   this.ReMooz.open.bind(this.ReMooz)();

   return false;

   }.bind(this);

   },

   /* To change the gallery data, those two functions : */

   flushGallery: function() {

   this.galleryElements.each(function(myFx) {

   myFx.element.dispose();

   myFx = myFx.element = null;

   });

   this.galleryElements = [];

   },

   changeData: function(data) {

   this.galleryData = data;

   this.clearTimer();

   this.flushGallery();

   if (this.options.showCarousel) this.flushCarousel();

   this.constructElements();

   if (this.options.showCarousel) this.fillCarousel();

   if (this.options.showInfopane) this.hideInfoSlideShow();

   this.galleryInit=1;

   this.lastIter=0;

   this.currentIter=0;

   this.doSlideShow(1);

   },

   /* Plugins: HistoryManager */

   initHistory: function() {

   this.fireEvent(‘onHistoryInit’);

   this.historyKey = this.galleryElement.id + ‘-picture’;

   if (this.options.customHistoryKey)

   this.historyKey = this.options.customHistoryKey;

   this.history = new History.Route({

   defaults: [1],

   pattern: this.historyKey + ‘\$(\\d+)\$’,

   generate: function(values) {

   return [this.historyKey, ‘(‘, values[0], ‘)’].join(”)

   }.bind(this),

   onMatch: function(values, defaults) {

   if (parseInt(values[0])-1 < this.maxIter)

   this.goTo(parseInt(values[0])-1);

   }.bind(this)

   });

   this.addEvent(‘onChanged’, function(){

   this.history.setValue(0, this.currentIter+1);

   this.history.defaults=[this.currentIter+1];

   }.bind(this));

   this.fireEvent(‘onHistoryInited’);

   }

};

gallery = new Class(gallery);

gallery.Transitions = new Hash ({

   fade: function(oldFx, newFx, oldPos, newPos){

   oldFx.options.transition = newFx.options.transition = Fx.Transitions.linear;

   oldFx.options.duration = newFx.options.duration = this.options.fadeDuration;

   if (newPos > oldPos) newFx.start({opacity: 1});

   else

   {

   newFx.set({opacity: 1});

   oldFx.start({opacity: 0});

   }

   },

   crossfade: function(oldFx, newFx, oldPos, newPos){

   oldFx.options.transition = newFx.options.transition = Fx.Transitions.linear;

   oldFx.options.duration = newFx.options.duration = this.options.fadeDuration;

   newFx.start({opacity: 1});

   oldFx.start({opacity: 0});

   },

   fadebg: function(oldFx, newFx, oldPos, newPos){

   oldFx.options.transition = newFx.options.transition = Fx.Transitions.linear;

   oldFx.options.duration = newFx.options.duration = this.options.fadeDuration / 2;

   oldFx.start({opacity: 0}).chain(newFx.start.pass([{opacity: 1}], newFx));

   }

});

/* All code copyright 2007 Jonathan Schemoul */

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

* Follows: Preloader (class)

* Simple class for preloading images with support for progress reporting

* Copyright 2007 Tomocchino.

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

var Preloader = new Class({

Implements: [Events, Options],

options: {

root : ”,

period : 100

},

initialize: function(options){

this.setOptions(options);

},

load: function(sources) {

this.index = 0;

this.images = [];

this.sources = this.temps = sources;

this.total = this. sources.length;

this.fireEvent(‘onStart’, [this.index, this.total]);

this.timer = this.progress.periodical(this.options.period, this);

this.sources.each(function(source, index){

this.images[index] = new Asset.image(this.options.root + source, {

‘onload’ : function(){ this.index++; if(this.images[index]) this.fireEvent(‘onLoad’, [this.images[index], index, source]); }.bind(this),

‘onerror’ : function(){ this.index++; this.fireEvent(‘onError’, [this.images.splice(index, 1), index, source]); }.bind(this),

‘onabort’ : function(){ this.index++; this.fireEvent(‘onError’, [this.images.splice(index, 1), index, source]); }.bind(this)

});

}, this);

},

progress: function() {

this.fireEvent(‘onProgress’, [Math.min(this.index, this.total), this.total]);

if(this.index >= this.total) this.complete();

},

complete: function(){

$clear(this.timer);

this.fireEvent(‘onComplete’, [this.images]);

},

cancel: function(){

$clear(this.timer);

}

});

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

* Follows: formatString (function)

* Original name: Yahoo.Tools.printf

* Copyright Yahoo.

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

function formatString() {

   var num = arguments.length;

   var oStr = arguments[0];

   for (var i = 1; i < num; i++) {

   var pattern = “\\{” + (i-1) + “\\}”;

   var re = new RegExp(pattern, “g”);

   oStr = oStr.replace(re, arguments[i]);

   }

   return oStr;

}

//]]>

#myGallery, #myGallerySet {width: 515px;height: 250px;z-index:0;}

.jdGallery a{outline:0;}

.jdGallery{overflow: hidden;position: relative;}

.jdGallery img{border: 0;margin: 0;}

.jdGallery .slideElement

{width: 100%;height: 100%;background-color: #000;background-repeat: no-repeat;background-position: center center;background-image:url(”);}

.jdGallery .slideInfoZone

{position: absolute;z-index: 10;width: 100%;margin: 0px;left: 0;bottom: 0;height: 90px;background: #363636;color: #fff;text-indent: 0;overflow: hidden;}

* html .jdGallery .slideInfoZone{bottom: -1px;}

.jdGallery .slideInfoZone h2

{padding: 0;font-size: 14px;text-decoration:none;margin: 0;margin: 2px 5px;font-weight: bold;color: #ff9000 !important;}

.jdGallery .slideInfoZone h2 a

{padding: 0;font-size: 14px;text-decoration:none;margin: 0;font-weight: bold;color: #ff9000 !important;}

.jdGallery .slideInfoZone p

{padding: 0;font-size: 12px;margin: 2px 5px;color: #eee;}

NOTE : You can DOWNLOAD and HOST mootools-1.2.1-core-yc.js yourself.Andalso you can change width and height of this slider easily (Default width:515px and height:250px;).

STEP #2 .
Now save your template.
Go to Layout –> Page Elements.

Click on ‘Add a Gadget’.
Select ‘HTML/Javascript’ and add the code given below .

function startGallery() {

var myGallery = new gallery($(‘myGallery’), {

   timed: true,

   delay: 5000,

   slideInfoZoneOpacity: 0.8,

   showCarousel: false

});

}

window.addEvent(‘domready’, startGallery);

<a href="ENTER-YOUR-POST-1-LINK-HERE“>THIS-IS-FEATURED-POST-1-TITLE

FEATURED-POST-1-DESCRIPTION

<img src="FEATURED-POST-1-IMAGE-ADDRESS” class=”full” alt=”” />

<a href="ENTER-YOUR-POST-LINK-2-HERE“>THIS-IS-FEATURED-POST-2-TITLE

FEATURED-POST-2-DESCRIPTION

<img src="FEATURED-POST-2-IMAGE-ADDRESS” class=”full” alt=”” />

<a href="ENTER-YOUR-POST-3-LINK-HERE“>THIS-IS-FEATURED-POST-3-TITLE

FEATURED-POST-3-DESCRIPTION

<img src="FEATURED-POST-3-IMAGE-ADDRESS” class=”full” alt=”” />

<a href="ENTER-YOUR-POST-4-LINK-HERE“>THIS-IS-FEATURED-POST-4-TITLE

FEATURED-POST-4-DESCRIPTION

<img src="FEATURED-POST-4-IMAGE-ADDRESS” class=”full” alt=”” />

<a href="ENTER-YOUR-POST-5-LINK-HERE“>THIS-IS-FEATURED-POST-5-TITLE

FEATURED-POST-5-DESCRIPTION

<img src="FEATURED-POST-5-IMAGE-ADDRESS” class=”full” alt=”” />

Change 5000 to change your slider speed.

NOTE : Remember to replace ,

ENTER-YOUR-POST-X-LINK-HEREs with your real post links.

THIS-IS-FEATURED-POST-X-TITLEs with your real post titles.

FEATURED-POST-X-DESCRIPTIONs with your post descriptions.

FEATURED-POST-X-IMAGE-ADDRESSs with your real image addresses.

STEP #3 .

save HTML/javascript and you have finished your nice work.

Filed under blogger tools, Blogger Widgets

Energy saver for bloggers

January 8, 2011 Leave a comment

This is a free service and it is provided by http://www.onlineleaf.com. Their standby engine is deliver a fully functional and simple way to help your website run requiring less energy to generate. It hides heavy animations, covers the window in dark colors (as these, in many cases are less energy consuming) and pauses heavily running background processes.

When your visitors are inactive, this engine launch a standby screen, with the text “Energy saving mode“.

This is very easy to add to your website or blog with in few seconds.Follow the steps…..

STEP #1 .

Login to your Blogger dashboard –> Design –> Edit HTML.
Find code  .

Now copy below code and paste it just before the  tag.

***This standby engine uses the jQuery Javascript library, so if you are using other Javascript libraries or code, add below code instead of above code :

jQuery.noConflict();

STEP #2 .

Now Save your template.

CUSTOMIZE

1.Time of inactivity

Also you can easily define

how long time your visitors have to be inactive

, for the engine to launch the standby screen, by adding ?time=X where X should be replaced with the number of seconds you would like to define the time interval. An example could be:

… which will set the time of inactivity to 1 minutes (60 seconds).

2.languages

This can be configured to display in any of the supported languages, if you add ?lang=code, wherecode is one of the language short codes below.

ak – Akan da – Danish de – German
en – English es – Spanish fr – French
fi – Filipino gr – Greek hr – Croatian
id – Indonesian jp – Japanese it – Italian
nl – Dutch pl – Polish pt – Portuguese tr – Turkish
bpt – Brazilian Portuguese ro – Romanian sl – Slovenian
se – Swedish sk – Slovak sw – Swahili
vi – Vietnamese

The following example will be using Spanish for the standby screen:

If you are using WordPress, just download their plugin, activate it and everything should work instantly.

If you have any problem sujjestion leave it in comments below

Filed under blogger tools, Blogger Widgets

Multi-Tabbed Widget For Bloggers

January 8, 2011 Leave a comment

This is a very good multi-tabbed widget for your blogger blog or any other website.You can add or remove tabs to this widget easily as your choice.To add this tab view widget to your website simply follow the steps below.

STEP #1 .

1.Login to your blogger dashboard–> layout- -> Edit HTML

2.Find    .(press ctrl+F to find)

3.Copy below code and paste it just before the  tag.

//<![CDATA[
document.write(‘.tabber{display:none;}’);
function tabberObj(argsObj)
{
var arg;
this.div = null;
this.classMain = “tabber”;
this.classMainLive = “tabberlive”;
this.classTab = “tabbertab”;
this.classTabDefault = “tabbertabdefault”;
this.classNav = “tabbernav”;
this.classTabHide = “tabbertabhide”;
this.classNavActive = “tabberactive”;
this.titleElements = [‘h2′,’h3′,’h4′,’h5′,’h6’];
this.titleElementsStripHTML = true;
this.removeTitle = true;
this.addLinkId = false;
this.linkIdFormat = ‘nav’;
for (arg in argsObj) { this[arg] = argsObj[arg]; }
this.REclassMain = new RegExp(‘\\b’ + this.classMain + ‘\\b’, ‘gi’);
this.REclassMainLive = new RegExp(‘\\b’ + this.classMainLive + ‘\\b’, ‘gi’);
this.REclassTab = new RegExp(‘\\b’ + this.classTab + ‘\\b’, ‘gi’);
this.REclassTabDefault = new RegExp(‘\\b’ + this.classTabDefault + ‘\\b’, ‘gi’);
this.REclassTabHide = new RegExp(‘\\b’ + this.classTabHide + ‘\\b’, ‘gi’);
this.tabs = new Array();
if (this.div) {
this.init(this.div);
this.div = null;
}
}

tabberObj.prototype.init = function(e)
{

var
childNodes,
i, i2,
t,
defaultTab=0,
DOM_ul,
DOM_li,
DOM_a,
aId,
headingElement;
if (!document.getElementsByTagName) { return false; }
if (e.id) {
this.id = e.id;
}
this.tabs.length = 0;
childNodes = e.childNodes;
for(i=0; i < childNodes.length; i++) {
if(childNodes[i].className &&
childNodes[i].className.match(this.REclassTab)) {
t = new Object();
t.div = childNodes[i];
this.tabs[this.tabs.length] = t;

if (childNodes[i].className.match(this.REclassTabDefault)) {
defaultTab = this.tabs.length-1;
}
}
}
DOM_ul = document.createElement(“ul”);
DOM_ul.className = this.classNav;

for (i=0; i < this.tabs.length; i++) {

t = this.tabs[i];

t.headingText = t.div.title;

if (this.removeTitle) { t.div.title = ”; }

if (!t.headingText) {

for (i2=0; i2<this.titleElements.length; i2++) {
headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0];
if (headingElement) {
t.headingText = headingElement.innerHTML;
if (this.titleElementsStripHTML) {
t.headingText.replace(/
/gi,” “);
t.headingText = t.headingText.replace(/]+>/g,””);
}
break;
}
}
}

if (!t.headingText) {

t.headingText = i + 1;
}

DOM_li = document.createElement(“li”);

t.li = DOM_li;

DOM_a = document.createElement(“a”);
DOM_a.appendChild(document.createTextNode(t.headingText));
DOM_a.href = “javascript:void(null);”;
DOM_a.title = t.headingText;
DOM_a.onclick = this.navClick;

DOM_a.tabber = this;
DOM_a.tabberIndex = i;

if (this.addLinkId && this.linkIdFormat) {

aId = this.linkIdFormat;
aId = aId.replace(//gi, this.id);
aId = aId.replace(//gi, i);
aId = aId.replace(//gi, i+1);
aId = aId.replace(//gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, ”));

DOM_a.id = aId;
}

DOM_li.appendChild(DOM_a);

DOM_ul.appendChild(DOM_li);
}

e.insertBefore(DOM_ul, e.firstChild);

e.className = e.className.replace(this.REclassMain, this.classMainLive);

this.tabShow(defaultTab);

if (typeof this.onLoad == ‘function’) {
this.onLoad({tabber:this});
}

return this;
};

tabberObj.prototype.navClick = function(event)
{

var
rVal,
a,
self,
tabberIndex,
onClickArgs;

a = this;
if (!a.tabber) { return false; }

self = a.tabber;
tabberIndex = a.tabberIndex;

a.blur();

if (typeof self.onClick == ‘function’) {

onClickArgs = {‘tabber’:self, ‘index’:tabberIndex, ‘event’:event};

/* IE uses a different way to access the event object */
if (!event) { onClickArgs.event = window.event; }

rVal = self.onClick(onClickArgs);
if (rVal === false) { return false; }
}

self.tabShow(tabberIndex);

return false;
};

tabberObj.prototype.tabHideAll = function()
{
var i;

for (i = 0; i < this.tabs.length; i++) {
this.tabHide(i);
}
};

tabberObj.prototype.tabHide = function(tabberIndex)
{
var div;

if (!this.tabs[tabberIndex]) { return false; }

div = this.tabs[tabberIndex].div;

if (!div.className.match(this.REclassTabHide)) {
div.className += ‘ ‘ + this.classTabHide;
}
this.navClearActive(tabberIndex);

return this;
};

tabberObj.prototype.tabShow = function(tabberIndex)
{

var div;

if (!this.tabs[tabberIndex]) { return false; }

this.tabHideAll();

div = this.tabs[tabberIndex].div;

div.className = div.className.replace(this.REclassTabHide, ”);

this.navSetActive(tabberIndex);

if (typeof this.onTabDisplay == ‘function’) {
this.onTabDisplay({‘tabber’:this, ‘index’:tabberIndex});
}

return this;
};

tabberObj.prototype.navSetActive = function(tabberIndex)
{

this.tabs[tabberIndex].li.className = this.classNavActive;

return this;
};

tabberObj.prototype.navClearActive = function(tabberIndex)
{

this.tabs[tabberIndex].li.className = ”;

return this;
};

function tabberAutomatic(tabberArgs)
{

var
tempObj,
divs,
i;

if (!tabberArgs) { tabberArgs = {}; }

tempObj = new tabberObj(tabberArgs);

divs = document.getElementsByTagName(“div”);
for (i=0; i < divs.length; i++) {

if (divs[i].className &&
divs[i].className.match(tempObj.REclassMain)) {

tabberArgs.div = divs[i];
divs[i].tabber = new tabberObj(tabberArgs);
}
}

return this;
}
function tabberAutomaticOnLoad(tabberArgs)
{

var oldOnLoad;

if (!tabberArgs) { tabberArgs = {}; }

oldOnLoad = window.onload;
if (typeof window.onload != ‘function’) {
window.onload = function() {
tabberAutomatic(tabberArgs);
};
} else {
window.onload = function() {
oldOnLoad();
tabberAutomatic(tabberArgs);
};
}
}

/* Run tabberAutomaticOnload() unless the “manualStartup” option was specified */

if (typeof tabberOptions == ‘undefined’) {

tabberAutomaticOnLoad();

} else {

if (!tabberOptions[‘manualStartup’]) {
tabberAutomaticOnLoad(tabberOptions);
}

}

//]]>

.tabberlive{
margin:0;
padding:5px;
clear:both;
background:#f8f8f8;
border:1px solid #DDD;
}
.tabbernav {
margin:0;
padding: 3px 0;
border-bottom: 1px solid #ddd;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
}
.tabbernav li {
list-style:none;
margin:0;
display:inline;
}
.tabbernav li a {
padding:3px 0.5em;
margin-right:1px;
border:1px solid #DDD;
border-bottom:none;
background:#6c6c6c;
text-decoration:none;
color:#ffffff;
}
.tabbernav li a:hover {
color:#6c6c6c;
background:#ffffff;
border:1px solid #DDD;
text-decoration:none;
}
.tabbernav li.tabberactive a,
.tabbernav li.tabberactive a:hover {
background:#ffffff;
color:#6c6c6c;
border-bottom: 1px solid #ffffff;
}
.tabberlive .tabbertab {
padding:5px;
border:1px solid #DDD;
border-top:0;
background:#ffffff;
}
.tabberlive .tabbertab h2,
.tabberlive .tabbertabhide {
display:none;
}
.tabbertab .widget-content ul{
list-style:none;
margin:0 0 10px 0;
padding:0;
}
.tabbertab .widget-content li {
border-bottom:1px solid #ddd;
margin:0 5px;
padding:2px 0 5px 0;
}

STEP #2 .

Now save your template.

STEP #3 .

Go to Layout–>Page Elements and click on “Add a gadget”.

Select “html/java script”

STEP #4 .

add the code given below and click save.

Recent

ENTER-TAB1-CONTENT-HERE

Popular Posts

ENTER-TAB2-CONTENT-HERE

Comments

ENTER-TAB3-CONTENT-HERE

About me

ENTER-TAB4-CONTENT-HERE

Contact

ENTER-TAB5-CONTENT-HERE

Support

ENTER-TAB6-CONTENT-HERE

Note:Replace ENTER-TABX-CONTENT-HERE with your contents.

If you want to add a another tab or remove a tab simply add or remove this:

<div class='tabbertab section' id='tabX‘>

YOUR-TAB-NAME

X= tab number

You are done.

Filed under blogger tools, Blogger Widgets

25 Great Blogger Widgets

January 6, 2011 Leave a comment

Many people think that Blogger lacks in all of the extra goodies you can add to other platforms like WordPress, but it simply isn’t true. By using widgets you can customize your blog as much as you like by just adding little snippets of code to the sidebars.

Allow users to talk to you via IM, see what your most popular posts are, or even read news from sites such as Mashable. With these 25 widgets, you can create an even more powerful way of communicating with your visitors, just make sure you don’t overload them with too many!

What are some of your favorite widgets for use on Blogger?

Communications Widgets

Google Talk – Give visitors the ability to talk to you via Google Talk directly from your blog sidebar.

Jaxtr – Create a widget that allows people to call you on the phone without revealing the phone number to them.

Meebo Me – Meebo Me will allow you to create a chat box that you can install on your Blogger page, giving you the chance to converse with visitors to your site.

Skype – The official Skype widget allows you to create various buttons that can show your current status and also allows people to just click it and give you a call.

Tag-Board – Allows you to add a real-time chat board to your blog that your visitors and you can use to converse.

Social Widgets

Delicious Linkrolls – Share your Delicious bookmarks with the world with this easy to install linkroll widget.

FriendFeed Widget – Share all of your FriendFeed activity with the readers of your site.

Google Friend Connect – A makeshift social network that runs across any site that has installed Google Friend Connect. You can join a site, see the other members, play games and more.

LinkedInABox – LinkedInABox retrieves your LinkedIn profile to display on your blog, allowing people to look through things such as your specialties and experience.

MyBlogLog – If someone visits your blog that is also a member of MyBlogLog, their avatar and username will appear in the box. You can then click on any person to check out their profile on the service.

Twitter – Add your Twitter stream to your blog and display anywhere from your last tweet to the last twenty. Also gives a link for people to be able to follow you.

Share on Facebook – A simple widget that allows your readers to share items from your blog on Facebook.

SocialFeed – A miniature lifestreaming widget that broadcasts your activities on sites such as Twitter,StumbleUpon, Last.fm and so on. Has several different skins you can choose from.

Utility Widgets

Add This – The popular social bookmarking button is available for Blogger accounts.

Easy Comments – This widget allows you to add commenting to any page of your site by placing the widget at the bottom of a page. Allows people to say if they liked the comment, includes comment threading and more.

Google Search – Add an AJAX powered Google search box to your blog that you can allow to search the web and your blog, or even just restrict it to the contents of your site.

Popular Posts – This widget will take a look at your comments, up to the last 5,000, and generate a list of which posts had the most conversation around them.

Recent Comments – Display the most recent comments on your blog in this widget so that readers can join in the conversation.

Related Posts – Not so much a widget as a hack, this will give you the related post functionality that so manyWordPress powered blogs use.

ShareThis – The highly customizable green button that ShareThis is known for can be added to your blog. Choose if you want it for social bookmarking, users emailing your posts and more.

Shout List Icons – Be the king (or queen) of social sharing with this widget that generates icons for over 30 social sites your blog can be added to.

Tag/Label Cloud – Gives you the ability to install a traditional tag cloud in your sidebar so people can see what you write about the most.

Miscellaneous Widgets

Flickr – You can generate an HTML or Flash based badge of your photo stream to share your images with your visitors.

Mashable – Yes, now you too can share the best web-related news on your blog with the Mashable widget.

Picasa Albums – Display your public Picasa albums in your blog sidebar with this handy widget.

Filed under blogger tools, Blogger Widgets

Integrate Facebook Comments Box For Blogger In Very Easy And Simple Steps – Fixed ( Full Guide ).

January 4, 2011 Leave a comment

Finally, this is the most waited feature for blogger users, and now it’s available for allblogtools.com visitors only, this is the first and the only tutorial around the web that tells you in really easy steps the integration of facebook comments box and blogger (blogspot) blogs.

now let’s do it, don’t worry, i know that must of you tried to add it to blogger blogs, with no result, but today you’ll see how to add it in really easy steps and it’s 100% working. but please be careful and pay attention for all the details.

This tutorial is updated.

Step #1.

Disable Default Comments.

The first thing you should do it to disable blogger default comments. because you don’t want to have 2 comments forms.
go to your blogger account, navigate to settings >> comments
and next to comments field choose Hide, then scroll down and click Save Settings

Step #2.

Generate your Facebook App ID.

now you should generate your own facebook app id, it’s really easy and one step process,
just go to this page, facebook developers

then click + Set Up New Application

enter your application name, ( you can type any name )

and check agree and click Create Application

then click on Connect tab (on the left tabs-list) or see the next image.

and fill the following info.
Connect URL : Enter your blog url and you must enter it with an ending dash. (for example: http://myblogname.blogspot.com/) .

Base Domain you must type blogspot.com

then click strong>agree and click Save Changes
on the next page facebook will generate you alot of info. you’ll need only one line, it’sApp ID:
just copy it and keep any where, we’ll need it in the next steps. please see the following image to see where you’ll find your facebook App ID:.

Step #3.

Codes To Add To Your Template.

you must add the following codes to your blogger template to ensure that the comments box will work for your blog in the right way.
and in this step we’ll add the following codes,

xmlns attribute

SDK script

Open Graph protocol tags

Adding the xmlns attribute :

please go to your blogger account again, and navigate to, layout >> edit html >> and check Expand Widget Templates
then find the following code,

<html

you’ll find it on the top of your code. second or third line, and after it add the following code,

xmlns:fb='http://www.facebook.com/2008/fbml'

you must type a space before it and after it,
here is an example.

<html xmlns:fb='http://www.facebook.com/2008/fbml' expr:dir='data:blog..............2005/gml/expr' >

Adding the SDK script Code :

search for

and after it add the following code,

window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR APP ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};

(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());

but please don’t forget to change YOUR APP ID to your app id ( you got it in the previous step ).

Adding the Open Graph protocol tags:

copy the following code.

<meta content='MY-SITE-NAME' property='og:site_name'/>
<meta content='http://google.com/help/hc/images/logos/blogger_logo.gif' property='og:image'/>
<meta content='YOUR-APP-ID' property='fb:app_id'/>
<meta content='YOUR-FACEBOOK-PROFILE-ID' property='fb:admins'/>

and change the colored text to the following,
Change MY-SITE-NAME with the one you want to appear when a user likes a page. (Gil likes Helping on Facebook)

Changehttp://google.com/…/blogger_logo.gif with your blog logo, or remove the all tag if you don’t want it.

Change YOUR-APP-ID with your application ID Number.

Change YOUR-FACEBOOK-PROFILE-ID with your own facebook user profile ID.

after making this changes add the above code just before

now we finished adding the facebook codes to your template, please don’t touch anything and continue to the next step.

Step 5.

Adding the Comments Box to your blogger template.

please find the following code.

and after it, please paste the following code.

<fb:comments width='450' expr:title='data:post.title' expr:url='data:post.url' expr:xid='data:post.id'/>
<div style='background-color: #f2f2f2;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'> MyBlogTricksFacebook comments for blogger brought to you by Myblogtricks.co.cc , Get Yours?

To change the width of your comments box, please change 450 to what ever you want, it’s in pixels,

and now please click Save Template , then check your blog. i wish it looks great and works perfectly.

Filed under blogger tools