Help Us To Improve, We Need Your COMMENTS

    read more
    How to Show Blogger Widget Only In Home Page Or Post Pages of blogger,as you have seen in wordpress blog its your wish to what widget and what add you want to show in sidebar of that page but this service cant be used in blogger as all sidebar bar widgets are linked to all pages in blogger including home page but now you can select the option which sidebar widget you want to show in blogger homepage and which one in all other blogger post pages.

    As one more beautiful hack how to show only post titles in blogger home and label pages has also been released,dont forget to red about it.

    Lets follow on this tutorial i.e how to show blogger widget only in home page or blogger posts pages.

    Add the widget in blogger layout where you want to display in blogger.Now you wnt to select on which pages of blogger it should be displayed.

    Now go to "Edit HTML" page.
    Mark "Expand Widget Templates"

    And Search for
    <b:widget id='HTML3' locked='false' title='Your Title name you gave to your widget' type='HTML'>
    The number in red can be any like 1,2,3,4 it depends on your no of widget your are adding but the title to the widget you gave will be same.

    So to make the widget code find easily for you find the below word
    <b:widget id='HTML

    and you will find many codes like these so keep on matchng the title name of widget of them to which you want to show on different pages.

    After finding the code of widget you want to display on different pages add the red codes to them as i have shown below.

    1) To display the any Blogger widget only in HomePage


    <b:widget id='HTML5' locked='false' title='Widget Title Name' type='HTML'>
    <b:includable id='main'>
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <!-- only display title if it's non-empty -->
    <b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    <data:content/>
    </div>

    <b:include name='quickedit'/>
    </b:if>
    </b:includable>
    </b:widget>


    Add the red codes as shown above in codes whch you found for that particular widget in your blog html.

    2) To display widget in all posts pages but not in HomePage


    <b:widget id='HTML3' locked='false' title='Widget Title Name' type='HTML'>
    <b:includable id='main'>
    <b:if cond='data:blog.pageType == "item"'>
    <!-- only display title if it's non-empty -->
    <b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    <data:content/>
    </div>

    <b:include name='quickedit'/>
    </b:if>
    </b:includable>
    </b:widget>


    3) To Display Widget In Archive Pages


    <b:widget id='HTML3' locked='false' title='Widget Title Name' type='HTML'>
    <b:includable id='main'>
    <b:if cond='data:blog.pageType == "archive"'>
    <!-- only display title if it's non-empty -->
    <b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    <data:content/>
    </div>

    <b:include name='quickedit'/>
    </b:if>
    </b:includable>
    </b:widget>

    If you have any problem leave your comments.

    Posted on : | By : Er. Ankita Dhiman | In : , ,

    4

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

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

    2.Scroll down to where you see </head> tag .

    3.Copy below code and paste it just before the </head> tag .



    <script src='http://pwam.googlecode.com/files/mootools-1.2.1-core-yc.js' type='text/javascript'/>
    
    <script type='text/javascript'>
    //<![CDATA[
    
    //MooTools More, <http://mootools.net/more>. Copyright (c) 2006-2008 Valerio Proietti, <http://mad4milk.net>, MIT Style License.
    
    eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?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]<7.m[B][0])){7.p.l[B]=7.m[B][0]}}}b(7.a.1g[B]){7.p.l[B]-=(7.p.l[B]%7.a.1g[B])}b(7.a.2M){7.e.1d(7.a.U[B],7.p.l[B]+7.a.2I)}s{7.e[7.a.U[B]]=7.p.l[B]}}7.u("V",7.e)},Z:8(A){7.t.18("1D",7.v.z);7.t.18("2d",7.v.Z);b(A){7.t.18(7.2a,7.v.2c);7.u("Z",7.e)}},1h:8(A){7.t.18(7.2a,7.v.2c);7.t.18("1D",7.v.V);7.t.18("2d",7.v.1h);b(A){7.u("1v",7.e)}}});1c.1o({4s:8(A){c f 1C(7,$2e({U:{x:"23",y:"21"}},A))}});1C.3o=f 12({1M:1C,a:{1S:[],1a:j},X:8(C,B){7.Q(C,B);7.1S=$$(7.a.1S);7.1a=$(7.a.1a);b(7.1a&&$10(7.1a)!="e"){7.1a=$(7.1a.24().25)}C=7.e;9 D=C.1e("1N");9 A=(D!="4t")?D:"4u";b(C.1e("16")=="3p"||C.1e("15")=="3p"){C.1N(C.27(C.3q))}C.1d("1N",A);7.P("h",8(){7.2f()},n)},h:8(B){b(7.1a){9 D=7.e,J=7.1a,E=J.3r(D.3q),F={},A={};["15","1A","1B","16"].1r(8(K){F[K]=J.1e("4v-"+K).1P();A[K]=D.1e("14-"+K).1P()},7);9 C=D.2y+A.16+A.1A,I=D.2x+A.15+A.1B;9 H=[E.16+F.16,E.1A-F.1A-C];9 G=[E.15+F.15,E.1B-F.1B-I];7.a.m={x:H,y:G}}7.Q(B)},3s:8(B){B=B.3r();9 A=7.19.l;c(A.x>B.16&&A.x<B.1A&&A.y<B.1B&&A.y>B.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(G<0){G++}}c[i.O(G*3y),i.O(F*1i),i.O(H*1i)]},1T:8(){9 C=i.O(7[2]/1i*1H);b(7[1]==0){c[C,C,C]}s{9 A=7[0]%3y;9 E=A%2W;9 F=i.O((7[2]*(1i-7[1]))/4U*1H);9 D=i.O((7[2]*(3z-7[1]*E))/3A*1H);9 B=i.O((7[2]*(3z-7[1]*(2W-E)))/3A*1H);1Q(i.4V(A/2W)){o 0:c[C,B,F];o 1:c[D,C,F];o 2:c[F,C,B];o 3:c[F,D,C];o 4:c[B,F,C];o 5:c[C,F,D]}}c j}});4W.1o({2k:8(){9 A=7.2j(/\\d{1,3}/g);c(A)?q.2k():1E},1T:8(){9 A=7.2j(/\\d{1,3}/g);c(A)?A.1T():1E}});9 4X=f 12({X:8(){7.2l=1y.3g(Y);7.1I={};7.1J={}},P:8(B,A){7.1J[B]=7.1J[B]||{};7.1I[B]=7.1I[B]||[];b(7.1I[B].3B(A)){c j}s{7.1I[B].26(A)}7.2l.1r(8(C,D){C.P(B,7.z.M(7,[B,C,D]))},7);c 7},z:8(C,A,B){7.1J[C][B]=n;9 D=7.2l.4Y(8(F,E){c 7.1J[C][E]||j},7);b(!D){c}7.1J[C]={};7.1I[C].1r(8(E){E.3C(7,7.2l,A)},7)}});9 3D=f 1F({3E:8(F,D){D=$1Y({1t:$1K,t:t,z:$2Q(n)},D);9 B=f 1c("4Z",{2X:F,10:"3F/3E"});9 E=D.1t.M(B),A=D.z,G=D.t;2m D.1t;2m D.z;2m D.t;B.2R({2h:E,51:8(){b(["52","1v"].3B(7.53)){E()}}}).3G(D);b(2t.2u.38){9 C=(8(){b(!$54(A)){c}$3H(C);E()}).3I(50)}c B.2v(G.3J)},3K:8(B,A){c f 1c("2C",$2e({55:"56",57:"58",10:"3F/3K",59:B},A)).2v(t.3J)},3L:8(C,B){B=$2e({1t:$1K,3M:$1K,3N:$1K},B);9 D=f 5a();9 A=$(D)||f 1c("5b");["2h","5c","5d"].1r(8(E){9 F="5e"+E;9 G=B[F];2m B[F];D[F]=8(){b(!D){c}b(!A.5f){A.23=D.23;A.21=D.21}D=D.1t=D.3M=D.3N=1E;G.3O(1,A,A);A.u(E,A,1)}});D.2X=A.2X=C;b(D&&D.1v){D.1t.3O(1)}c A.3G(B)},5g:8(D,C){C=$2e({2Y:$1K,3P:$1K},C);b(!D.26){D=[D]}9 A=[];9 B=0;D.1r(8(F){9 E=f 3D.3L(F,{1t:8(){C.3P.3C(7,B,D.5h(F));B++;b(B==D.2g){C.2Y()}}});A.26(E)});c f 3k(A)}});9 5i=f 12({2J:[2K,2L],a:{5j:8(A){b(7.a.1p){A=7.2Z(7.w)}7.1L.1d(7.1V,A)},1p:j,k:0,T:j,2n:j,1k:1i,1m:"22"},X:8(E,A,D){7.2N(D);7.e=$(E);7.1L=$(A);7.30=7.31=7.w=-1;7.e.P("2b",7.3Q.M(7));b(7.a.2n){7.e.P("2F",7.3R.5k(7))}9 F,B={},C={x:j,y:j};1Q(7.a.1m){o"2s":7.1l="y";7.1V="15";F="2x";1f;o"22":7.1l="x";7.1V="16";F="2y"}7.3S=7.1L[F]/2;7.1b=7.e[F]-7.1L[F]+(7.a.k*2);7.1j=$1z(7.a.T[0])?7.a.T[0]:0;7.1U=$1z(7.a.T[1])?7.a.T[1]:7.a.1k;7.T=7.1U-7.1j;7.1k=7.a.1k||7.1b;7.1u=i.32(7.T)/7.1k;7.3T=7.1u*7.1b/i.32(7.T);7.1L.1d("1N","5l").1d(7.1V,-7.a.k);C[7.1l]=7.1V;B[7.1l]=[-7.a.k,7.1b-7.a.k];7.V=f 1C(7.1L,{1p:0,m:B,U:C,5m:7.2o.M(7),5n:7.2o.M(7),2Y:8(){7.2o();7.2p()}.M(7)});b(7.a.1p){7.V.a.1g=i.5o(7.3T);7.V.a.m[7.1l][1]=7.1b}},17:8(A){b(!((7.T>0)^(A<7.1j))){A=7.1j}b(!((7.T>0)^(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.2n<0):(A.2n>0);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]<(7.a.1W+E[C])&&A[C]!=0){D[C]=(7.N[C]-7.a.1W-E[C])*7.a.34}s{b(7.N[C]+7.a.1W>(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,{}))
    
    //]]>
    </script>
    
    <script type='text/javascript'>
    //<![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', '<span class="number">' + (myself.relatedImage.number + 1) + "/" + this.maxIter + ":</span> " + 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;
    }
    
    //]]>
    </script>
    
    <style type='text/css'>
    #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;}
    
    </style>
    


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

    4.Now save your template.

    5.Go to Layout --> Page Elements.

    6.Click on 'Add a Gadget'.

    7.Select 'HTML/Javascript' and add the code given below and click save.

    <script type="text/javascript">
    function startGallery() {
       var myGallery = new gallery($('myGallery'), {
               timed: true,
               delay: 5000,
               slideInfoZoneOpacity: 0.8,
               showCarousel: false
       });
    }
    window.addEvent('domready', startGallery);
    </script>
    
    
    <div id="myGallery">
    
    
    <div class="imageElement">
    <h3><a href="ENTER-YOUR-POST-1-LINK-HERE">THIS-IS-FEATURED-POST-1-TITLE</a></h3>
    <p>FEATURED-POST-1-DESCRIPTION</p>
    <a href="#" class="open"></a>
    <img src="FEATURED-POST-1-IMAGE-ADDRESS" class="full" alt="" />
    </div>
    
    <div class="imageElement">
    <h3><a href="ENTER-YOUR-POST-LINK-2-HERE">THIS-IS-FEATURED-POST-2-TITLE</a></h3>
    <p>FEATURED-POST-2-DESCRIPTION</p>
    <a href="#" class="open"></a>
    <img src="FEATURED-POST-2-IMAGE-ADDRESS" class="full" alt="" />
    </div>
    
    <div class="imageElement">
    <h3><a href="ENTER-YOUR-POST-3-LINK-HERE">THIS-IS-FEATURED-POST-3-TITLE</a></h3>
    <p>FEATURED-POST-3-DESCRIPTION</p>
    <a href="#" class="open"></a>
    <img src="FEATURED-POST-3-IMAGE-ADDRESS" class="full" alt="" />
    </div>
    
    <div class="imageElement">
    <h3><a href="ENTER-YOUR-POST-4-LINK-HERE">THIS-IS-FEATURED-POST-4-TITLE</a></h3>
    <p>FEATURED-POST-4-DESCRIPTION</p>
    <a href="#" class="open"></a>
    <img src="FEATURED-POST-4-IMAGE-ADDRESS" class="full" alt="" />
    </div>
    
    <div class="imageElement">
    <h3><a href="ENTER-YOUR-POST-5-LINK-HERE">THIS-IS-FEATURED-POST-5-TITLE</a></h3>
    <p>FEATURED-POST-5-DESCRIPTION</p>
    <a href="#" class="open"></a>
    <img src="FEATURED-POST-5-IMAGE-ADDRESS" class="full" alt="" />
    </div>
    
    </div>
    
    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.

    Look at the example below.

    <script type="text/javascript">
    function startGallery() {
        var myGallery = new gallery($('myGallery'), {
                timed: true,
                delay: 5000,
                slideInfoZoneOpacity: 0.8,
                showCarousel: false
        });
    }
    window.addEvent('domready', startGallery);
    </script>
    
    
    <div id="myGallery">
    
    
    <div class="imageElement">
    <h3><a href="ENTER-YOUR-POST-LINK-HERE">This is featured post 1 title</a></h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et...</p>
    <a href="#" title="This is featured post 1" class="open"></a>
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbgPap2nnwPFAgfpAe8Vcz-Ss9y1o17cwk-rF0ReUUFLdUFtybKwQHcIg5KGZpDn_YB_66VfogrJK1oZT9rk8CJPxd-jJX8Pm7ssNDT9UEyC8xmSdyxE8bh-l4KtOYCRkfhIGm5uwFDIQ/" class="full" alt="" />
    </div>
    
    <div class="imageElement">
    <h3><a href="ENTER-YOUR-POST-LINK-HERE">This is featured post 2 title</a></h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et...</p>
    <a href="#" title="This is featured post 2" class="open"></a>
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEDspLvDobTXVzf2DQfqsQCpsCkfmTBOPba2tYyR4eTlO4bMk48N6oSIk01Qzhn2SRy0Kv6Krmhm4TA91-Y83dDir-ZHAGDFMO-qX4BwuIXWQ7iLHSEJmeqTSNY_j3qKwsbNWkZtfjDPo/" class="full" alt="" />
    </div>
    
    <div class="imageElement">
    <h3><a href="ENTER-YOUR-POST-LINK-HERE">This is featured post 3 title</a></h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et...</p>
    <a href="#" title="This is featured post 3" class="open"></a>
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX25EVvjUo5PdbT7F6WyrZq_Af5Etn2YyXOTmO-BmJIHyXzOh0Nvf1Mi-JFxaH-KmqOpKI5gB-DHP3YLfEyTifd6MCzDQcaN-5RVY0fqS-9Suw3rSscf6nhFtsmSt5XWaobFa0RecbsHw/" class="full" alt="" />
    </div>
    
    <div class="imageElement">
    <h3><a href="ENTER-YOUR-POST-LINK-HERE">This is featured post 4 title</a></h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et...</p>
    <a href="#" title="This is featured post 4" class="open"></a>
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihael094hs84AQTh5UyKV48HKmI7dlgxBEeVOsrH-2505AgJexA1ZaWoVSrh0tKVGnJUPugKMxab2GAH696NKe0WgnRYGq0t5CCl5yNY0ErTgrVrE-4yHpkDN7pq3pf28c9inzyQK79KU/" class="full" alt="" />
    </div>
    
    <div class="imageElement">
    <h3><a href="ENTER-YOUR-POST-LINK-HERE">This is featured post 5 title</a></h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et...</p>
    <a href="#" title="This is featured post 5" class="open"></a>
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdFouAQqLCugl3ALC5xHSSoQMemiEl8nwbl99TAyL_Dq-3fmmXwhcYnR3CNTXbCRHNcPwvQ1BjRjDx5D_kqI7k2YJwC94esmGBrjCT0dqDfX_zVPEVGUkztAXYkewlmadkHAiWheEsLyw/" class="full" alt="" />
    </div>
    
    </div>
    


    You are done.

    Posted on : | By : Er. Ankita Dhiman | In :

    3

    How To Make Comment Bubble At Top Of Blogger Posts,as you have seen it using in many blogs and i am sure you would not be knowing how to make and show that comment bubble count and link at top of the blogger post.So that's why i am here to make you learn it,and add it to your blogs.As its not as difficult as you might be thinking of.

    For demo of comment bubble you can check the my blog as i have comment bubble


    Now To make comment bubble,Just
    Login to blogger > Then go to Layout > Edit/Html > Expand Widgets > Press Ctrl+F

    And Search For ]]></b:skin> tag and place the below codes before it.


    .comment-bubble {
    float : right;
    width : 48px;
    height : 48px;
    background : url(http://i43.tinypic.com/dljpzo.jpg) no-repeat;
    font-size : 18px;
    margin-top : -15px;
    margin-right : 2px;
    text-align : center;
    position:absolute;
    padding:0px 0px 0px 0px;
    }

    In red above is the image link of bubble,you can use yours and don't forget to change its width and height also of the image you use.To adjust the bubble position you can edit the distance from margin-right and margin-top properties of css.

    Some Readers had problem in aligning the comment number in comment bubble.To adjust it just edit padding values according to you in above css.I have added four 0 values to padding,First one is for padding-top,Second for padding-left,third for padding-bottom and last for padding-right.

    Now after adding above css just find the below codes and add the red codes in between them as i have shown below.


    <b:includable id='post' var='post'>
    <div class='post hentry uncustomized-post-template'>
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
    <h3 class='post-title entry-title'><b:if cond='data:post.allowComments'>
    <a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
    </b:if>
    <b:if cond='data:post.link'>
    <a expr:href='data:post.link'><data:post.title/></a>
    <b:else/>
    <b:if cond='data:post.url'>
    <a expr:href='data:post.url'><data:post.title/></a>
    <b:else/>
    <data:post.title/>
    </b:if>
    </b:if>
    </h3>
    </b:if>


    Afer adding red codes in between them just preview your template,if comment bubble is ok,just save your template and you are done.Now you have added an comment bubble to bog in an very easy way you wouldn't have thought of.Enjoy this hack and let me know you liked it or not.
    And Friends i will try to schedule one or two posts for you,but that for sure will be small blogger tutorials which also will be very useful for you to learn a lot.

    Posted on : | By : Er. Ankita Dhiman | In :

    2

    Do you like to add a good looking Subscribe section to your blog?Then simply follow the steps below.

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

    2.Scroll down to where you see </head> tag .

    3.Copy below code and paste it just before the </head> tag .



    <style type='text/css'>
    
    #hsection{border:4px solid #D3D3D3;background-color:#e9e9e9;}
    #hsection:hover{border:4px solid #BABABA;background-color:#e9e9e9;}
    
    #sectionmy .sectionmy2 h2.subscription { border:0; margin:0; padding:6px 0 0 55px; height:42px; font-size:16px;font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;
    font-weight:bold; }
    
    #sectionmy .sectionmy2 h2.rss { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHoT0s3_EUEljjrUVgdJbubGkmBiGZFroFVQxnqN8yzGlMSSttpDAaK-AlAixe5mRMV970sc8IQqqCFfCKIG7DpeSQ5Z_WgVfaDn3ONmWBR2MZ5YO3tK3brvOtXNc9EsbGaTWVlN5Z4TJ3/) no-repeat top left; }
    
    #sectionmy .sectionmy2 h2.email { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKgxNefXSuYECibBBYkjhbLx5wFFwS5as6VICJCH9jrcFsVahyBvJ9pHHKca_bf9GIjdn_ydwxH74P_QMpFUb54h5BGtrDbFaAF5ZjIwwFtSdk0k21nI9RYbLIwCCa8YNbfqQ89F49BbhD/) no-repeat top left; }
    
    #sectionmy .sectionmy2 h2.twitter { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOUIZ5bZsrtXnPWuONwSrImwwY7nxKkD4G8ffXPqTNiAGwqwYw5IagNGa3lal0tAGdn6gZCk13B20G5E4tSnycXtmZt9GHF6T_3q8mI-qzX30-szz-Py3-_UVKgt9jfl87t6KwBBfU0LUl/) no-repeat top left; }
    
    #sectionmy .sectionmy2 .subscription a { color:#252e28; text-decoration:none; }
    
    </style>


    NOTE : Host RSS.png , EmailRSS.png , twitter.png yourself.



    4.Now go to Layout-->Page Element and click on "Add a gadget".

    5.Select "html/java script" and add the code given below and click save.

    <div id="hsection">
    <div id="sectionmy">
    <div class="sectionmy2">
    
    <h2 class="subscription rss"><a href="YOUR-RSS-FEED-URL">SUBSCRIBE VIA RSS</a></h2>
    
    <h2 class="subscription email"><a href="YOUR-FEEDBURNER-EMAIL-SUBSCRIPTION-URL">SUBSCRIBE VIA EMAIL</a></h2>
    
    <h2 class="subscription twitter"><a href="YOUR-TWITTER-URL">FOLLOW ON TWITTER</a></h2>
    
    </div></div>
    </div>
    


    NOTE : Replace YOUR-RSS-FEED-URL , YOUR-FEEDBURNER-EMAIL-SUBSCRIPTION-URL , YOUR-TWITTER-URL with your urls.

    You are done.

    Posted on : | By : Er. Ankita Dhiman | In :

    0

    To show your site visitors to how many people follow you on twitter use the one of below code:

    1.Login to your blogger dashboard-->Layout > Page Elements

    2.Click on 'Add a Gadget'.

    3.Select 'HTML/Javascript' and add the one of code given below and click save.

    1.Big Twitter followers counter button:

    twitter follower counters for blogs-websites
    <script type="text/javascript" language="javascript" src="http://twittercounter.com/embed/?username=YOUR-TWITTER-USERNAME&style=bird"></script>


    2.White Twitter followers counter button:

    twitter follower counters white button
    <script type="text/javascript" language="javascript" src="http://twittercounter.com/embed/?username=YOUR-TWITTER-USERNAME"></script>


    3.Black Twitter followers counter button:

    twitter followers counter black button
    <script type="text/javascript" language="javascript" src="http://twittercounter.com/embed/?username=YOUR-TWITTER-USERNAME&style=black"></script>


    4.Show your Twitter followers in Text:

    twitter followers counter text
    <script type="text/javascript" language="javascript" src="http://twittercounter.com/widget/index.php?username=YOUR-TWITTER-USERNAME"></script>

    Posted on : | By : Er. Ankita Dhiman | In :

    0

    This tutorial explains to you how to add Topsy Retweet Counter Buttons in below header of your every blog post.There are 2 sizes of this Topsy Retweet Counter Button.You can add any button you like.Follow the steps below to do it:

    Topsy Retweet Counter Buttons For Blogger/Websites

    1.Log in to your dashboard--> layout- -> Edit HTML

    2.Click on "Expand Widget Templates"

    3.Scroll down to where you see this:
    <div class='post-header-line-1'/>

    4.Now copy below code and paste it just after the above line.

    For Large Button:

    Topsy Big Retweet Counter Buttons For Blogger
    <div style='padding: 4px; float: right;'>
    <script src='http://button.topsy.com/widget/retweet-big?nick=TWITTER-USERNAME&url=' type='text/javascript'/>
    </div>


    For Small Button:

    Topsy Small Retweet Counter Buttons For Blogger
    <div style='padding: 4px; float: right;'>
    <script src='http://button.topsy.com/widget/retweet-small?nick=TWITTER-USERNAME&url=' type='text/javascript'/>
    </div>


    Important : Replace TWITTER-USERNAME with your Twitter username.

    5.Now save your template and you are done.

    Posted on : | By : Er. Ankita Dhiman | In :

    0

    1.Log in to your dashboard--> layout- -> Edit HTML

    2.Click on "Expand Widget Templates"

    3.Scroll down to where you see this:
    <div class='post-header-line-1'/>
    4.Now add below code immediately after above code.
    <script type="text/javascript">
    tweetmeme_url = '<data:post.url/>';
    </script>
    <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"> </script>
    It will look like this :
    <div class='post-header-line-1'/>

    <script type="text/javascript">
    tweetmeme_url = '<data:post.url/>';
    </script>
    <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"> </script>
    5.Now save your template and you are done.

    Posted on : | By : Er. Ankita Dhiman | In :

    0

    Followers