Showing posts with label JQuery. Show all posts
Showing posts with label JQuery. Show all posts
Friday, October 28, 2011

How To Add Jquery Multi Tab View Widget For Blogger

0 comments
1. Log in to your blogger  and Go to Design >> Edit HTML

2.  put check mark to “Expand Widget Templates

3. Find this tag by using Ctrl+F    </head>

4. Paste  below code Before  </head> tag







<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">
</script>
<script>
$(document).ready(function() {
$("#tabs").tabs();
});
</script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/blitzer/jquery-ui.css" type="text/css" />

5. Now Go to Design >> Page Element

6. Click Add Gadget and select 'HTML/Javascript'

7. Paste below one of below code.

<div id="tabs">
<ul><li>
<a href="#tabs-1">Tab-1</a></li><li>
<a href="#tabs-2">Tab-2</a></li><li>
<a href="#tabs-3">Tab-3</a></li></ul>
<div id="tabs-1">Script or Text Here</div>
<div id="tabs-2">Script or Text Here</div>
<div id="tabs-3">Script or Text Here</div>

You can replace Script or Text Here  with text or any script you want.

8.  After save HTML/Javascript 
you are done.
Continue reading →
Saturday, July 16, 2011

How Add Cool Jquery Slide Show For Blogger Part 4

0 comments
This is also cool slide show to your blog.
Follow instruction to add it to your blog.












Demo here

1.
Log in to your blogger account and Go to Design >> Edit HTML

2. Find this tag by using Ctrl+F    </head>

3. Paste below code before </head> tag

<style> #slideshow {list-style:none; color:#fff}
#slideshow span {display:none}
#wrapper {width:506px; margin:50px auto; display:none}
#wrapper * {margin:0; padding:0}
#fullsize {position:relative; width:500px; height:200px; padding:2px; border:1px solid #ccc; background:#000}
#information {position:absolute; bottom:0; width:500px; height:0; background:#000; color:#fff; overflow:hidden; z-index:200; opacity:.7; filter:alpha(opacity=70)}
#information h3 {padding:4px 8px 3px; font-size:14px}
#information p {padding:0 8px 8px}
#image {width:500px}
#image img {position:absolute; z-index:25; width:auto}
.imgnav {position:absolute; width:25%; height:306px; cursor:pointer; z-index:150}
#imgprev {left:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgerM1_3zBaP67EkiRufxYQvBtP18aMQfpsR1BixiVPIHoL4HtGpmdD_cRhHmaI-AW333PQ61NvRri_fv24cg4gAS4BEKi46qTG9b1TvwzGzCmQ4lRO0RrBZyu7kziOPmIJG6ap79lSIH00/) left center no-repeat}
#imgnext {right:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh70uEYtKNy9RiElILOkO4bpmumNpBZZBNrWf5QSxRZOgI0-Wi1i7_jw_O3f-r7hb6lNqP6wtvjM90Q4sZNEHyfIq63PDtF4Pi6hKMgu5zSbZYjkfWXMVfxRjEhUezvbt6M_oVg5bmggs65/) right center no-repeat}
#imglink {position:absolute; height:306px; width:100%; z-index:100; opacity:.4; filter:alpha(opacity=40)}
.linkhover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5lQ_b-3gA3ISGuH1vn14KdchPDihyphenhyphen3Clzbswk_jeSy92re_jILv1Q6pkHsqJe1tGnwzHMB6SuhnaXm4jV7KVP-FrAfDIqFyblSh47NdqTFUs1k88t0H9LppCOKTxSypnDXRx_wYOBF5PW/) center center no-repeat}
#thumbnails {margin-top:15px}
#slideleft {float:left; width:20px; height:81px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTDcaKzIkcjby6AHTK_EgWmZko8bvT15Ud5jxnAV2_C1mVlcU1HHdEFHKlNo597mVhSjfUs9fuPNMSujwCRP-CYDc_5W9BmISWG8WwVnAF6k4obWA6l9cDl_cauE4oG_4T_PJlpl1MEOqq/) center center no-repeat; background-color:#222}
#slideleft:hover {background-color:#333}
#slideright {float:right; width:20px; height:81px; background:#222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEsaGFkvh8TlF1GxguRUWaDyIfmKs8n1-VvVpS6aZrNCYdhvEoxLcJhyphenhyphen1J3BpOg5Pc3sMLRW2p_-paVd5vJXLoZAmbaTx_i5D4_CjapH9K7-LMMJVUilIbPhhWR27sUQgmewRkewkVJ706/) center center no-repeat}
#slideright:hover {background-color:#333}
#slidearea {float:left; position:relative; width:456px; margin-left:5px; height:81px; overflow:hidden}
#slider {position:absolute; left:0; height:81px}
#slider img {cursor:pointer; border:1px solid #666; padding:2px}</style>

4. Find this tag by using Ctrl+F    </body>

5. Paste below code before  </body> tag

<script src='http://keerthiset2.110mb.com/excellent%20slideshow/compressed.js' type='text/javascript'/>

<script type='text/javascript'>
$(&#39;slideshow&#39;).style.display=&#39;none&#39;;
$(&#39;wrapper&#39;).style.display=&#39;block&#39;;
var slideshow=new TINY.slideshow(&quot;slideshow&quot;);
window.onload=function(){
slideshow.auto=true;
slideshow.speed=5;
slideshow.link=&quot;linkhover&quot;;
slideshow.info=&quot;information&quot;;
slideshow.thumbs=&quot;slider&quot;;
slideshow.left=&quot;slideleft&quot;;
slideshow.right=&quot;slideright&quot;;
slideshow.scrollSpeed=4;
slideshow.spacing=5;
slideshow.active=&quot;#fff&quot;;
slideshow.init(&quot;slideshow&quot;,&quot;image&quot;,&quot;imgprev&quot;,&quot;imgnext&quot;,&quot;imglink&quot;);
}
</script>

6. Find this tag by using Ctrl+F <div id="main-wrapper">

7.  Paste below code before <div id="main-wrapper">  tag

<ul id='slideshow'> 
<li>
<h3>Tittle Here 1</h3>
<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAnMHpF8Jg7Y5QYzSgEHu-IQpJNnXz2lUVUUVSCcDAjIbcMszPpctSgXK2UUzPr4DEDwh75R84YBUGaWlVtrmy2Lg84lTs-HKfhFTeTE7Sn92MfcfDH9T9OQnyOHuszsXKQKx1BxqAENw/s320/deathly-hallows-part-2.jpg</span>
<p>Description 1 Here.</p>
<a href='#'><img alt='Bionic' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcFD4dhD27PAv16f0OJJo1SLWJ4czE-Ox9QZxUI5WHwKGJCk8iwrdnwb3MoO2WgoLPQtqfzJPdtK3o5Rg0k4jKMM-4QwP4-DnR3DuhKYFlEjGVjmzxDZu2Gfb_zUsMvghw-Um6soGStLQ/s320/deathly-hallows-part-2.jpg'/></a>
</li>
<li>
<h3>Tittle Here 2</h3>
<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6dacHOIUvf8wm2XlqWRinRnAXk2prY8DuXcQFZ_fY5ts_Ux4Fvf1h2Xmy6fWRYC93j4jAx6i58nIkXN4ONapUIfRXNZ8vu5R_K5pNz76Gob11W1dVEQNktCWtH_Z_wIAIwo6lOE33JvM/s320/source-code.jpg</span>
<p>Description 2 Here.</p>
<img alt='MOH' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5nD5OsxLthkZjC-T4sGiPIWZHOg2QlIq4r-zzYxWkecr2Y1J3JWOVZSHH1WhKXHbqTsb7GXp5ljxAw9HYnjv1iw084tCZsybIh3f8P981Lb-JkGQ-leE_nrPfasNRUHW4trxzQmPjlHI/s320/source-code.jpg'/>
</li>
<li>
<h3>Tittle Here 3</h3>
<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin0039ofFLKLIjCeZxceP77pvqwEVi7HvOKxcbkde89urNI9xEFzlNsMmMZ0g9JXYS_HrwNo9RseTdCjB_zotUcmD3K8slVhV5stglz8XbQwqw85Pdj2CkKkrLzWO_n9rlzZW9Sh4Kjso/s320/transformers3.jpeg</span>
<p>Description 3 Here.</p>
<a href='#'><img alt='Fear' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX4J9SauJ7VJncIUrsTWw0PBi4YxfLuJWTUkPihL3k4klBwcQhTZt8X_Og2wUoB3j6sHrrwaQgd7lburi0SkTEk12mm47nnXvrlMKQUSCr-tqR09s9JbCrR3a3qvG0VWDRqpMeEYqJGv8/s320/transformers3.jpeg'/></a>
</li>
<li>
<h3>Tittle Here 4</h3>
<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8UWJP3dOJcnzF7Nix1AUMjieSJ9Gtnx2GjmIgFl3rfvajvy24N_JSV7JSM-_FopU0i478-2u1kQGUKRtIgOTKI4Cdqm71Bdn913uVcQ9a9OHwXzHxhl8_w3D0Ou2LcGFNgxXnkkjdYF4/s320/X-Men-FirstClass.jpg</span>
<p>Description 4 Here.</p>
<a href='#'><img alt='Farcry' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2HEelX6S-Lznc1OKT6JG0kHMKPaSCwXjzEEB-4qrja5FMOYo4xy4Bj3aVEQsueKzweLru1bUbi6D8us05KQEORqg26CmEIWVtATGX2kreBLADDytUB2UCeXo2O-dUm2qhmEsIDNvZA20/s320/X-Men-FirstClass.jpg'/></a>
</li>
<li>
<h3> Tittle Here 5</h3>
<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI9qh_I6yq4m2t0RPa_gsqemF4lsFgjPxLJIuKleYlqxwZ66_27u36Rq49adtNwUQ6T1GVbFSZSUN0xnMNMWnlhAgAErJ5Ryi05jkMKUlwecE7UMFo19GSzSyF2denSaBd03EqoUtMtno/s320/_dossier.jpg</span>
<p>Description 5 Here.</p>
<img alt='Farcry 2' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnNmaOtSfBpTRUjJDCn2q3J5mgwBtDY2nuyo5XejyYqyq0sBgCDg00IoBbpJP-d-RKL6gpYoM2Whx5xwtDk2BC5aiGq3fYU3C8BZqxfY1jPR5Y_va92hZXPjvuN-T-8WqoKbOqNt-MmXo/s320/_dossier.jpg'/>
</li>




</ul>
<div id='wrapper'>
<div id='fullsize'>
<div class='imgnav' id='imgprev' title='Previous Image'/>
<div id='imglink'/>
<div class='imgnav' id='imgnext' title='Next Image'/>
<div id='image'/>
<div id='information'>
<h3/>
<p/>
</div>
</div>
<div id='thumbnails'>
<div id='slideleft' title='Slide Left'/>
<div id='slidearea'>
<div id='slider'/>
</div>
<div id='slideright' title='Slide Right'/>
</div>
</div>

Now you can edit it as your like,(above code)
change URL for new images,and enter new Title and description,

9. Now save your template
You are done.
Continue reading →
Saturday, July 9, 2011

How To Add Text Slide Show For Blogger

0 comments
This Tutorial is about auto text slide show. I think this will
helpful,who like to add text slide show for blogger.
Follow below step for add it to your blog.


1. Log in to your blogger account and Go to Design >> Edit HTML

2. Find this tag by using Ctrl+F    </head>

3. Paste below code Before </head> tag

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[

eval(function(p,a,c,k,e,d){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--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[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}('(3(C){C.8={3o:{19:3(E,F,H){6 G=C.8[E].1h;21(6 D 3p H){G.1I[D]=G.1I[D]||[];G.1I[D].28([F,H[D]])}},2P:3(D,F,E){6 H=D.1I[F];5(!H){7}21(6 G=0;G<H.k;G++){5(D.b[H[G][0]]){H[G][1].1H(D.c,E)}}}},1l:{},n:3(D){5(C.8.1l[D]){7 C.8.1l[D]}6 E=C(\'<2a 3s="8-3r">\').j(D).n({3q:"3i",2g:"-2A",3g:"-2A",1r:"1w"}).22("2C");C.8.1l[D]=!!((!(/3I|3P/).12(E.n("3z"))||(/^[1-9]/).12(E.n("2T"))||(/^[1-9]/).12(E.n("2E"))||!(/2v/).12(E.n("3w"))||!(/3S|3C\\(0, 0, 0, 0\\)/).12(E.n("3D"))));3E{C("2C").2w(0).3B(E.2w(0))}3x(F){}7 C.8.1l[D]},3y:3(D){C(D).v("1p","2I").n("2q","2v")},3H:3(D){C(D).v("1p","3O").n("2q","")},3Q:3(G,E){6 D=/2g/.12(E||"2g")?"3N":"3M",F=e;5(G[D]>0){7 t}G[D]=1;F=G[D]>0?t:e;G[D]=0;7 F}};6 B=C.2e.W;C.2e.W=3(){C("*",2).19(2).z("W");7 B.1H(2,2M)};3 A(E,F,G){6 D=C[E][F].35||[];D=(1F D=="1E"?D.2h(/,?\\s+/):D);7(C.1j(G,D)!=-1)}C.1i=3(E,D){6 F=E.2h(".")[0];E=E.2h(".")[1];C.2e[E]=3(J){6 H=(1F J=="1E"),I=2D.1h.3J.2P(2M,1);5(H&&A(F,E,J)){6 G=C.i(2[0],E);7(G?G[J].1H(G,I):1n)}7 2.14(3(){6 K=C.i(2,E);5(H&&K&&C.3v(K[J])){K[J].1H(K,I)}o{5(!H){C.i(2,E,3e C[F][E](2,J))}}})};C[F][E]=3(I,H){6 G=2;2.15=E;2.2H=F+"-"+E;2.b=C.1A({},C.1i.1k,C[F][E].1k,H);2.c=C(I).u("1e."+E,3(L,J,K){7 G.1e(J,K)}).u("2j."+E,3(K,J){7 G.2j(J)}).u("W",3(){7 G.1b()});2.23()};C[F][E].1h=C.1A({},C.1i.1h,D)};C.1i.1h={23:3(){},1b:3(){2.c.1q(2.15)},2j:3(D){7 2.b[D]},1e:3(D,E){2.b[D]=E;5(D=="f"){2.c[E?"j":"r"](2.2H+"-f")}},1X:3(){2.1e("f",e)},1P:3(){2.1e("f",t)}};C.1i.1k={f:e};C.8.2J={3h:3(){6 D=2;2.c.u("3d."+2.15,3(E){7 D.2G(E)});5(C.x.13){2.2K=2.c.v("1p");2.c.v("1p","2I")}2.3c=e},38:3(){2.c.16("."+2.15);(C.x.13&&2.c.v("1p",2.2K))},2G:3(F){(2.V&&2.1o(F));2.1C=F;6 E=2,G=(F.39==1),D=(1F 2.b.25=="1E"?C(F.2f).2x().19(F.2f).y(2.b.25).k:e);5(!G||D||!2.2S(F)){7 t}2.1D=!2.b.26;5(!2.1D){2.3a=1x(3(){E.1D=t},2.b.26)}5(2.2m(F)&&2.1T(F)){2.V=(2.1U(F)!==e);5(!2.V){F.3b();7 t}}2.2n=3(H){7 E.2r(H)};2.2l=3(H){7 E.1o(H)};C(2N).u("2O."+2.15,2.2n).u("2t."+2.15,2.2l);7 e},2r:3(D){5(C.x.13&&!D.3j){7 2.1o(D)}5(2.V){2.1V(D);7 e}5(2.2m(D)&&2.1T(D)){2.V=(2.1U(2.1C,D)!==e);(2.V?2.1V(D):2.1o(D))}7!2.V},1o:3(D){C(2N).16("2O."+2.15,2.2n).16("2t."+2.15,2.2l);5(2.V){2.V=e;2.2u(D)}7 e},2m:3(D){7(29.3m(29.2z(2.1C.2L-D.2L),29.2z(2.1C.2s-D.2s))>=2.b.2F)},1T:3(D){7 2.1D},1U:3(D){},1V:3(D){},2u:3(D){},2S:3(D){7 t}};C.8.2J.1k={25:U,2F:1,26:0}})(27);(3(A){A.1i("8.4",{23:3(){2.b.Z+=".4";2.1m(t)},1e:3(B,C){5((/^d/).12(B)){2.1v(C)}o{2.b[B]=C;2.1m()}},k:3(){7 2.$4.k},1Q:3(B){7 B.2R&&B.2R.1g(/\\s/g,"2Q").1g(/[^A-4o-4x-9\\-2Q:\\.]/g,"")||2.b.2X+A.i(B)},8:3(C,B){7{b:2.b,4u:C,30:B,11:2.$4.11(C)}},1m:3(O){2.$l=A("1O:4p(a[p])",2.c);2.$4=2.$l.1G(3(){7 A("a",2)[0]});2.$h=A([]);6 P=2,D=2.b;2.$4.14(3(R,Q){5(Q.X&&Q.X.1g("#","")){P.$h=P.$h.19(Q.X)}o{5(A(Q).v("p")!="#"){A.i(Q,"p.4",Q.p);A.i(Q,"q.4",Q.p);6 T=P.1Q(Q);Q.p="#"+T;6 S=A("#"+T);5(!S.k){S=A(D.2d).v("1s",T).j(D.1u).4l(P.$h[R-1]||P.c);S.i("1b.4",t)}P.$h=P.$h.19(S)}o{D.f.28(R+1)}}});5(O){2.c.j(D.2b);2.$h.14(3(){6 Q=A(2);Q.j(D.1u)});5(D.d===1n){5(20.X){2.$4.14(3(S,Q){5(Q.X==20.X){D.d=S;5(A.x.13||A.x.43){6 R=A(20.X),T=R.v("1s");R.v("1s","");1x(3(){R.v("1s",T)},44)}4m(0,0);7 e}})}o{5(D.1c){6 J=46(A.1c("8-4"+A.i(P.c)),10);5(J&&P.$4[J]){D.d=J}}o{5(P.$l.y("."+D.m).k){D.d=P.$l.11(P.$l.y("."+D.m)[0])}}}}D.d=D.d===U||D.d!==1n?D.d:0;D.f=A.41(D.f.40(A.1G(2.$l.y("."+D.1a),3(R,Q){7 P.$l.11(R)}))).31();5(A.1j(D.d,D.f)!=-1){D.f.3V(A.1j(D.d,D.f),1)}2.$h.j(D.18);2.$l.r(D.m);5(D.d!==U){2.$h.w(D.d).1S().r(D.18);2.$l.w(D.d).j(D.m);6 K=3(){A(P.c).z("1K",[P.Y("1K"),P.8(P.$4[D.d],P.$h[D.d])],D.1S)};5(A.i(2.$4[D.d],"q.4")){2.q(D.d,K)}o{K()}}A(3U).u("3W",3(){P.$4.16(".4");P.$l=P.$4=P.$h=U})}21(6 G=0,N;N=2.$l[G];G++){A(N)[A.1j(G,D.f)!=-1&&!A(N).1f(D.m)?"j":"r"](D.1a)}5(D.17===e){2.$4.1q("17.4")}6 C,I,B={"3X-2E":0,1R:1},E="3Z";5(D.1d&&D.1d.3Y==2D){C=D.1d[0]||B,I=D.1d[1]||B}o{C=I=D.1d||B}6 H={1r:"",47:"",2T:""};5(!A.x.13){H.1W=""}3 M(R,Q,S){Q.2p(C,C.1R||E,3(){Q.j(D.18).n(H);5(A.x.13&&C.1W){Q[0].2B.y=""}5(S){L(R,S,Q)}})}3 L(R,S,Q){5(I===B){S.n("1r","1w")}S.2p(I,I.1R||E,3(){S.r(D.18).n(H);5(A.x.13&&I.1W){S[0].2B.y=""}A(P.c).z("1K",[P.Y("1K"),P.8(R,S[0])],D.1S)})}3 F(R,T,Q,S){T.j(D.m).4k().r(D.m);M(R,Q,S)}2.$4.16(".4").u(D.Z,3(){6 T=A(2).2x("1O:w(0)"),Q=P.$h.y(":4e"),S=A(2.X);5((T.1f(D.m)&&!D.1z)||T.1f(D.1a)||A(2).1f(D.1t)||A(P.c).z("2y",[P.Y("2y"),P.8(2,S[0])],D.1v)===e){2.1M();7 e}P.b.d=P.$4.11(2);5(D.1z){5(T.1f(D.m)){P.b.d=U;T.r(D.m);P.$h.1Y();M(2,Q);2.1M();7 e}o{5(!Q.k){P.$h.1Y();6 R=2;P.q(P.$4.11(2),3(){T.j(D.m).j(D.2c);L(R,S)});2.1M();7 e}}}5(D.1c){A.1c("8-4"+A.i(P.c),P.b.d,D.1c)}P.$h.1Y();5(S.k){6 R=2;P.q(P.$4.11(2),Q.k?3(){F(R,T,Q,S)}:3(){T.j(D.m);L(R,S)})}o{4b"27 4c 4d: 3n 49 4a."}5(A.x.13){2.1M()}7 e});5(!(/^24/).12(D.Z)){2.$4.u("24.4",3(){7 e})}},19:3(E,D,C){5(C==1n){C=2.$4.k}6 G=2.b;6 I=A(G.37.1g(/#\\{p\\}/g,E).1g(/#\\{1L\\}/g,D));I.i("1b.4",t);6 H=E.4i("#")==0?E.1g("#",""):2.1Q(A("a:4g-4h",I)[0]);6 F=A("#"+H);5(!F.k){F=A(G.2d).v("1s",H).j(G.18).i("1b.4",t)}F.j(G.1u);5(C>=2.$l.k){I.22(2.c);F.22(2.c[0].48)}o{I.36(2.$l[C]);F.36(2.$h[C])}G.f=A.1G(G.f,3(K,J){7 K>=C?++K:K});2.1m();5(2.$4.k==1){I.j(G.m);F.r(G.18);6 B=A.i(2.$4[0],"q.4");5(B){2.q(C,B)}}2.c.z("2Y",[2.Y("2Y"),2.8(2.$4[C],2.$h[C])],G.19)},W:3(B){6 D=2.b,E=2.$l.w(B).W(),C=2.$h.w(B).W();5(E.1f(D.m)&&2.$4.k>1){2.1v(B+(B+1<2.$4.k?1:-1))}D.f=A.1G(A.34(D.f,3(G,F){7 G!=B}),3(G,F){7 G>=B?--G:G});2.1m();2.c.z("2V",[2.Y("2V"),2.8(E.2k("a")[0],C[0])],D.W)},1X:3(B){6 C=2.b;5(A.1j(B,C.f)==-1){7}6 D=2.$l.w(B).r(C.1a);5(A.x.4n){D.n("1r","4t-1w");1x(3(){D.n("1r","1w")},0)}C.f=A.34(C.f,3(F,E){7 F!=B});2.c.z("33",[2.Y("33"),2.8(2.$4[B],2.$h[B])],C.1X)},1P:3(C){6 B=2,D=2.b;5(C!=D.d){2.$l.w(C).j(D.1a);D.f.28(C);D.f.31();2.c.z("32",[2.Y("32"),2.8(2.$4[C],2.$h[C])],D.1P)}},1v:3(B){5(1F B=="1E"){B=2.$4.11(2.$4.y("[p$="+B+"]")[0])}2.$4.w(B).4q(2.b.Z)},q:3(G,K){6 L=2,D=2.b,E=2.$4.w(G),J=E[0],H=K==1n||K===e,B=E.i("q.4");K=K||3(){};5(!B||!H&&A.i(J,"17.4")){K();7}6 M=3(N){6 O=A(N),P=O.2k("*:4s");7 P.k&&P.4v(":45(3R)")&&P||O};6 C=3(){L.$4.y("."+D.1t).r(D.1t).14(3(){5(D.1N){M(2).3l().1B(M(2).i("1L.4"))}});L.1y=U};5(D.1N){6 I=M(J).1B();M(J).3k("<2o></2o>").2k("2o").i("1L.4",I).1B(D.1N)}6 F=A.1A({},D.1J,{2U:B,2i:3(O,N){A(J.X).1B(O);C();5(D.17){A.i(J,"17.4",t)}A(L.c).z("2Z",[L.Y("2Z"),L.8(L.$4[G],L.$h[G])],D.q);D.1J.2i&&D.1J.2i(O,N);K()}});5(2.1y){2.1y.3f();C()}E.j(D.1t);1x(3(){L.1y=A.3u(F)},0)},2U:3(C,B){2.$4.w(C).1q("17.4").i("q.4",B)},1b:3(){6 B=2.b;2.c.16(".4").r(B.2b).1q("4");2.$4.14(3(){6 C=A.i(2,"p.4");5(C){2.p=C}6 D=A(2).16(".4");A.14(["p","q","17"],3(E,F){D.1q(F+".4")})});2.$l.19(2.$h).14(3(){5(A.i(2,"1b.4")){A(2).W()}o{A(2).r([B.m,B.2c,B.1a,B.1u,B.18].3G(" "))}})},Y:3(B){7 A.Z.3L({3t:B,2f:2.c[0]})}});A.8.4.1k={1z:e,Z:"24",f:[],1c:U,1N:"3F&#3A;",17:e,2X:"8-4-",1J:{},1d:U,37:\'<1O><a p="#{p}"><2W>#{1L}</2W></a></1O>\',2d:"<2a></2a>",2b:"8-4-3K",m:"8-4-d",2c:"8-4-1z",1a:"8-4-f",1u:"8-4-30",18:"8-4-3T",1t:"8-4-4w"};A.8.4.35="k";A.1A(A.8.4.1h,{1Z:U,4r:3(C,F){F=F||e;6 B=2,E=2.b.d;3 G(){B.1Z=42(3(){E=++E<B.$4.k?E:0;B.1v(E)},C)}3 D(H){5(!H||H.4j){4f(B.1Z)}}5(C){G();5(!F){2.$4.u(2.b.Z,D)}o{2.$4.u(2.b.Z,3(){D();E=B.b.d;G()})}}o{D();2.$4.16(2.b.Z,D)}}})})(27);',62,282,'||this|function|tabs|if|var|return|ui|||options|element|selected|false|disabled||panels|data|addClass|length|lis|selectedClass|css|else|href|load|removeClass||true|bind|attr|eq|browser|filter|triggerHandler|||||||||||||||||||||null|_mouseStarted|remove|hash|fakeEvent|event||index|test|msie|each|widgetName|unbind|cache|hideClass|add|disabledClass|destroy|cookie|fx|setData|hasClass|replace|prototype|widget|inArray|defaults|cssCache|tabify|undefined|mouseUp|unselectable|removeData|display|id|loadingClass|panelClass|select|block|setTimeout|xhr|unselect|extend|html|_mouseDownEvent|_mouseDelayMet|string|typeof|map|apply|plugins|ajaxOptions|tabsshow|label|blur|spinner|li|disable|tabId|duration|show|mouseDelayMet|mouseStart|mouseDrag|opacity|enable|stop|rotation|location|for|appendTo|init|click|cancel|delay|jQuery|push|Math|div|navClass|unselectClass|panelTemplate|fn|target|top|split|success|getData|find|_mouseUpDelegate|mouseDistanceMet|_mouseMoveDelegate|em|animate|MozUserSelect|mouseMove|pageY|mouseup|mouseStop|none|get|parents|tabsselect|abs|5000px|style|body|Array|width|distance|mouseDown|widgetBaseClass|on|mouse|_mouseUnselectable|pageX|arguments|document|mousemove|call|_|title|mouseCapture|height|url|tabsremove|span|idPrefix|tabsadd|tabsload|panel|sort|tabsdisable|tabsenable|grep|getter|insertBefore|tabTemplate|mouseDestroy|which|_mouseDelayTimer|preventDefault|started|mousedown|new|abort|left|mouseInit|absolute|button|wrapInner|parent|max|Mismatching|plugin|in|position|gen|class|type|ajax|isFunction|backgroundImage|catch|disableSelection|cursor|8230|removeChild|rgba|backgroundColor|try|Loading|join|enableSelection|auto|slice|nav|fix|scrollLeft|scrollTop|off|default|hasScroll|img|transparent|hide|window|splice|unload|min|constructor|normal|concat|unique|setInterval|opera|500|not|parseInt|overflow|parentNode|fragment|identifier|throw|UI|Tabs|visible|clearInterval|first|child|indexOf|clientX|siblings|insertAfter|scrollTo|safari|Za|has|trigger|rotate|last|inline|tab|is|loading|z0'.split('|'),0,{}))

//]]>
</script>

<script type='text/javascript'>
//<![CDATA[

$(document).ready(function() {
$('#tabzine> ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });

});

//]]>
</script>

<script type='text/javascript'>
//<![CDATA[

//Featured Content Glider: By http://www.dynamicdrive.com
//Created: Dec 22nd, 07'
//Updated (Jan 29th, 08): Added four possible slide directions: "updown", "downup", "leftright", or "rightleft"
//Updated (Feb 1st, 08): Changed glide behavior to reverse direction when previous button is clicked
//Updated (Feb 12th, 08): Added ability to retrieve gliding contents from an external file using Ajax ("remotecontent" variable added to configuration)

var featuredcontentglider={
csszindex: 100,
ajaxloadingmsg: '<b>Fetching Content. Please wait...</b>',
glide:function(config, showpage, isprev){
var selected=parseInt(showpage)
if (selected>=config.$contentdivs.length){ //if no content exists at this index position
alert("No content exists at page "+(selected+1)+"! Loading 1st page instead.")
selected=0
}
var $target=config.$contentdivs.eq(selected)
//Test for toggler not being initialized yet, or user clicks on the currently selected page):
if (config.$togglerdiv.attr('lastselected')==null || parseInt(config.$togglerdiv.attr('lastselected'))!=selected){
var $selectedlink=config.$toc.eq(selected)
config.$next.attr('loadpage', (selected<config.$contentdivs.length-1)? selected+1+'pg' : 0+'pg')
config.$prev.attr('loadpage', (selected==0)? config.$contentdivs.length-1+'pg' : selected-1+'pg')
var startpoint=(isprev=="previous")? -config.startpoint : config.startpoint
$target.css(config.leftortop, startpoint).css("zIndex", this.csszindex++) //hide content so it's just out of view before animating it
var endpoint=(config.leftortop=="left")? {left:0} : {top:0} //animate it into view
$target.animate(endpoint, config.speed)
config.$toc.removeClass('selected')
$selectedlink.addClass('selected')
config.$togglerdiv.attr('lastselected', selected+'pg')
}
},

getremotecontent:function(config){
config.$glider.html(this.ajaxloadingmsg)
$.ajax({
url: config.remotecontent,
error:function(ajaxrequest){
config.$glider.html('Error fetching content.<br />Server Response: '+ajaxrequest.responseText)
},
success:function(content){
config.$glider.html(content)
featuredcontentglider.setuptoggler(config)
}
})
},

aligncontents:function(config){
config.$contentdivs=$("#"+config.gliderid+" ."+config.contentclass)
config.$contentdivs.css(config.leftortop, config.startpoint).css({height: config.$glider.height(), visibility: 'visible'}) //position content divs so they're out of view:
},

setuptoggler:function(config){
this.aligncontents(config)
config.$togglerdiv.hide()
config.$toc.each(function(index){
$(this).attr('pagenumber', index+'pg')
if (index > (config.$contentdivs.length-1))
$(this).css({display: 'none'}) //hide redundant "toc" links
})
var $nextandprev=$("#"+config.togglerid+" .next, #"+config.togglerid+" .prev")
$nextandprev.click(function(event){ //Assign click behavior to 'next' and 'prev' links
featuredcontentglider.glide(config, this.getAttribute('loadpage'), this.getAttribute('buttontype'))
event.preventDefault() //cancel default link action
})
config.$toc.click(function(event){ //Assign click behavior to 'toc' links
featuredcontentglider.glide(config, this.getAttribute('pagenumber'))
event.preventDefault()
})
config.$togglerdiv.fadeIn(1000, function(){
featuredcontentglider.glide(config, config.selected)
if (config.autorotate==true){ //auto rotate contents?
config.stepcount=0 //set steps taken
config.totalsteps=config.$contentdivs.length*config.autorotateconfig[1] //Total steps limit: num of contents x num of user specified cycles)
featuredcontentglider.autorotate(config)
}
})
config.$togglerdiv.click(function(){
featuredcontentglider.cancelautorotate(config.togglerid)
})
},

autorotate:function(config){
var rotatespeed=config.speed+config.autorotateconfig[0]
window[config.togglerid+"timer"]=setInterval(function(){
if (config.totalsteps>0 && config.stepcount>=config.totalsteps){
clearInterval(window[config.togglerid+"timer"])
}
else{
config.$next.click()
config.stepcount++
}
}, rotatespeed)
},

cancelautorotate:function(togglerid){
if (window[togglerid+"timer"])
clearInterval(window[togglerid+"timer"])
},

getCookie:function(Name){
var re=new RegExp(Name+"=[^;]+", "i") //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return null
},

setCookie:function(name, value){
document.cookie = name+"="+value
},

init:function(config){
$(document).ready(function(){
config.$glider=$("#"+config.gliderid)
config.$togglerdiv=$("#"+config.togglerid)
config.$toc=config.$togglerdiv.children('.toc')
config.$next=config.$togglerdiv.children('.next')
config.$prev=config.$togglerdiv.children('.prev')
config.$prev.attr('buttontype', 'previous')
var selected=(config.persiststate)? featuredcontentglider.getCookie(config.gliderid) : config.selected
config.selected=(isNaN(parseInt(selected))) ? config.selected : selected //test for cookie value containing null (1st page load) or "undefined" string
config.leftortop=(/up/i.test(config.direction))? "top" : "left" //set which CSS property to manipulate based on "direction"
config.heightorwidth=(/up/i.test(config.direction))? config.$glider.height() : config.$glider.width() //Get glider height or width based on "direction"
config.startpoint=(/^(left|up)/i.test(config.direction))? -config.heightorwidth : config.heightorwidth //set initial position of contents based on "direction"
if (typeof config.remotecontent!="undefined" && config.remotecontent.length>0)
featuredcontentglider.getremotecontent(config)
else
featuredcontentglider.setuptoggler(config)
$(window).bind('unload', function(){ //clean up and persist
config.$togglerdiv.unbind('click')
config.$toc.unbind('click')
config.$next.unbind('click')
config.$prev.unbind('click')
if (config.persiststate)
featuredcontentglider.setCookie(config.gliderid, config.$togglerdiv.attr('lastselected'))
config=null

})
})
}
}

//]]>
</script>

<script type='text/javascript'>
if (window.jstiming) window.jstiming.load.tick(&#39;headEnd&#39;);
</script>

<style type='text/css'>
#glidercontent{
margin:5px 0 0px 12px;
}
.glidecontentwrapper{
position: relative;
width: 629px;
height:300px;
overflow: hidden;
margin:0px 0px 0px 0px;
padding:0px 0px;
background:#fff;
}
.glidecontent{
position:absolute;
padding:0px 5px 0px 5px;
width:610px;
color:#555;
margin:0px 5px;
height:100%;
overflow:hidden;
float:left;
background:#fff;
}
.glidim{
float:left;
}
.glidim img{
margin:0px 5px 5px 0px;
padding:7px 7px;
}
.glidecontent h2{
margin:0px 0px 0px 0px;
padding:5px 0px;
font-size:24px;
line-height:24px;
font-weight:bold;
overflow:hidden;
font-family: Georgia,Century gothic,Arial,Tahoma,sans-serif;
}
.glidecontent h2 a:link, .glidecontent h2 a:visited{
color:#303843;
}
.glidecontent p{
margin:0px 0px 0px 0px;
padding:5px 0px;
font-size:14px;
line-height:22px;
overflow:hidden;
font-family: Georgia,Century gothic,Arial,Tahoma,sans-serif;
color:#696d70;
}
.glidebot{
width:630px;
height:18px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoqkE1GAXuiYid0Xl5vH_XtopZ9YmnUVCbly4pohANEWC-rehB6adYNF1O1B8cuK3_rmXVBdqWrt7jmqe31SM9E00rlIWv2JR1g98Pu-CDsJcCqDuA8-F8vbf6MqSzBNTpTYLbujQ3VH8A/s320/background2.jpg) center no-repeat;
margin:0px 0px 5px 12px ;
padding:0px 0px;
float:left;
}
.gnav{ /*style for DIV used to contain toggler links. */
width: 100px;
height:50px;
z-index:150;
float:right;
padding-right:25px;
}
.glidecontenttoggler{ /*style for DIV used to contain toggler links. */
height:35px;
z-index:150;
width: 650px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCRA4jVNIrRKukcH3fu14dhZRec32ASwxVErMUIfxlCYrnXCJ8FcaJtw3o6fdqr06uRqMOTLN4Edr2taLCgKUohjZAE_gOOkswtiAO4TKhD3nyZdN9X86PVghDCmSDYW2zpGIf1HIzxOiM/s320/background.png) no-repeat;
}
.glidecontenttoggler a{ /*style for every navigational link within toggler */
display: -moz-inline-box;
display: inline-block;
color: #2e6ab1;
font-weight: bold;
text-decoration: none;
}
.glidecontenttoggler a.selected{ /*style for selected page&#39;s toggler link. &quot;.selected&quot; class auto generated! */
background: #E4EFFA;
color: black;
}
.glidecontenttoggler a:hover{
background: #E4EFFA;
color: black;
}
.glidecontenttoggler a.toc{ /*style for individual toggler links (page 1, page 2, etc). &quot;.toc&quot; class auto generated! */
}
.glidecontenttoggler a.prev{ /*style for &quot;prev&quot; and &quot;next&quot; toggler links. &quot;.prev&quot; and &quot;.next&quot; classes auto generated! */
top:9px;
right:25px;
position:absolute;
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtSSoEhiNhm8NBc0r-3fsqBiuQfvSqp8zbwk0jccUFFuEaXpmBWhnWcoJSyDpUKys7OQzx3u1zasUQFkVCwyCWSa7G5gEuuyCP8iOesTuh77ActEOz_Xg4hfRePe4VVQ5KZaiQwP5i9sAS/s320/left+arrow.jpg) left no-repeat;
width:50px;
height:17px;
}
.glidecontenttoggler a.next {
float:right;
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHzrbmYoakHwP3JGGyR5YMJppYkEKGyOx6cHIeScC88gWWTNV5UDvvirKMV1wn-Oi3zN0me4bfFyF92RuEgGpDZA3Ec5FctHZxDnH5WWg46Kc60PqsmO7ush1Bw52xTxy1U6uaBkt0oXPn/s320/right+arrow.jpg) right no-repeat;
width:20px;
height:17px;
position:absolute;
top:9px;
right:15px;
}
</style>

4. Now find <div id="main-wrapper"> tag

5. Paste below code  above  <div id="main-wrapper"> tag
   ( you can paste below code to add gadget >>  html/javascript also)

<div id='content'>
<script type='text/javascript'>
featuredcontentglider.init({
gliderid: &quot;glidercontent&quot;,
contentclass: &quot;glidecontent&quot;,
togglerid: &quot;togglebox&quot;,
remotecontent: &quot;&quot;,
selected: 0,
persiststate: true,
speed: 500,
direction: &quot;leftright&quot;,
autorotate: true,
autorotateconfig: [10000, 1] //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]
})
</script>

<!-- Glider Content -->
<div class='glidecontentwrapper' id='glidercontent'>
<div class='glidecontenttoggler' id='togglebox'>
<a class='prev' href='#'/>
<a class='next' href='#'/>
</div>
<div class='glidecontent1 section' id='glidecontent1'><div class='widget HTML' id='HTML98'>
<div class='widget-content'>


<div class='glidecontent'>

<h2><a href='your link' title='What is Blog'>What is Blog</a></h2>

<p>A blog (a blend of the term web log) is a type of website or part of a website. Blogs are usually maintained by an individual with regular entries of commentary, descriptions of events, or other material such as graphics or video. Entries are commonly displayed in reverse-chronological order. Blog can also be used as a verb, meaning to maintain or add content to a blog.
<a href='your link'>Read More </a></p></div>



<div class='glidecontent'>

<h2><a href='your link' title='What is SEO'>What is SEO</a></h2>

<p>Search engine optimization (SEO) is the process of improving the visibility of a website or a web page in search engines via the &quot;natural&quot; or un-paid (&quot;organic&quot; or &quot;algorithmic&quot;) search results. Other forms of search engine marketing (SEM) target paid listings. In general, the earlier (or higher on the page), and more frequently a site appears in the search results list, the more visitors it will receive from the search engine&#39;s users. SEO may target different kinds of search, including image search, local search, video search, academic search,[1] news search and industry-specific vertical search engines. This gives a website web presence.
<a href='your link'>Read More </a></p></div>



<div class='glidecontent'>

<h2><a href='your link' title='What is Backlinks '>What is Backlinks</a></h2>

<p>Backlinks are incoming links to a website or web page. Inbound links were originally important (prior to the emergence of search engines) as a primary means of web navigation; today their significance lies in search engine optimization (SEO). The number of backlinks is one indication of the popularity or importance of that website or page (for example, this is used by Google to determine the PageRank of a webpage). Outside of SEO, the backlinks of a webpage may be of significant personal, cultural or semantic interest: they indicate who is paying attention to that page.
<a href='your link'>Read More </a></p></div>



<div class='glidecontent'>

<h2><a href='your link' title='What is AdSense'>What is AdSense</a></h2>

<p>Google AdSense is an ad serving application run by Google Inc. Website owners can enroll in this program to enable text, image, and video advertisements on their websites. These advertisements are administered by Google and generate revenue on either a per-click or per-impression basis. Google beta tested a cost-per-action service, but discontinued it in October 2008 in favor of a DoubleClick offering (also owned by Google). In Q1 2011, Google earned US$2.34 billion ($9.36 billion annualized), or 28% of total revenue, through AdSense.<a href='your link'>(more...)</a></p></div>


</div>
</div></div>
</div>

<!-- /Glider Content -->
<div class='glidebot'/>
<div class='clear'/></div>

 * Replace Your Link with your post link,
 * Edit Description as your like.

6. Now save your Template.
 you are done.
Continue reading →
Saturday, June 25, 2011

How Add Cool Jquery Slide Show For Blogger Part 3

0 comments
This is also cool slide show to your blog.Follow instruction
to add it to your blog.

Demo here

1.
Log in to your blogger account and Go to Design >> Edit HTML

2. Find this tag by using Ctrl+F    </head>

3. Paste below code before </head> tag

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){var currentPosition=0;var slideWidth=560;var slides=$('.slide');var numberOfSlides=slides.length;$('#slidesContainer').css('overflow','hidden');slides.wrapAll('<div id="slideInner"></div>').css({'float':'left','width':slideWidth});$('#slideInner').css('width',slideWidth*numberOfSlides);$('#slideshow').prepend('<span class="control" id="leftControl">Clicking moves left</span>').append('<span class="control" id="rightControl">Clicking moves right</span>');manageControls(currentPosition);$('.control').bind('click',function(){currentPosition=($(this).attr('id')=='rightControl')?currentPosition+1:currentPosition-1;manageControls(currentPosition);$('#slideInner').animate({'marginLeft':slideWidth*(-currentPosition)})});function manageControls(position){if(position==0){$('#leftControl').hide()}else{$('#leftControl').show()}if(position==numberOfSlides-1){$('#rightControl').hide()}else{$('#rightControl').show()}}
});
//]]>
</script>

4. Find this tag by using Ctrl+F    ]]></b:skin>

5. Paste below code before  ]]></b:skin> tag

/*
Slideshow style rules.
*/
#contentSlide {
border: 1px solid #000;
background:#212421;
height:263px;
padding:10px 0;
}
#slideshow {
margin:0 auto;
width:640px;
height:263px;
background:transparent url(http://lh6.ggpht.com/_dfnTVAxeWMI/SlTPJpS_axI/AAAAAAAABYA/JS60KVWJ9GQ/bg_slideshow.jpg) no-repeat 0 0;
position:relative;
}
#slideshow #slidesContainer {
margin:0 auto;
width:560px;
height:263px;
overflow:auto; /* allow scrollbar */
position:relative;
}
#slideshow #slidesContainer .slide {
margin:0 auto;
width:540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
height:263px;
}
.control {
display:block;
width:39px;
height:263px;
text-indent:-10000px;
position:absolute;
cursor: pointer;
}
#leftControl {
top:0;
left:0;
background:transparent url(http://lh6.ggpht.com/_dfnTVAxeWMI/SlT8KH99FgI/AAAAAAAABZM/e9gXvHjzltU/control_left.jpg) no-repeat 0 0;
}
#rightControl {
top:0;
right:0;
background:transparent url(http://lh6.ggpht.com/_dfnTVAxeWMI/SlT8KMpFpxI/AAAAAAAABZQ/a207Rx0XuiU/control_right.jpg) no-repeat 0 0;
}

.slide h2, .slide p {
margin:15px;
}
.slide h2 {
font:italic 24px Georgia, "Times New Roman", Times, serif;
color:#212421;
letter-spacing:-1px;
}
.slide img {
float:right;
margin:0 15px;
padding: 1px;
background-color: #212421;
border: 1px solid #999;
}

6. Now Go to Design >>page Element

7.Click Add gadget  and Select HTML/JavaScript 

8. Now paste paste below code

<!-- Slideshow HTML by www.wierdwalker.blogspot.com -->
<div id="contentSlide"><div id="slideshow">
<div id="slidesContainer">

<div class="slide">
<h2>Thor (2011)</h2><p><a href="http://tinyurl.com/nlqnby"><img alt="Thor (2011)" width="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_TWCYXJt27hto8b2-WTcsxmpBc6yKd4wOG92Lhqn0JP34gtvR38rqHnNBz-7WZvdvTn988hinsBXgvtrbVczlk9Qwys_DCEG7AXJgBi4chA207PIEw_vEjSIMT5D_YFiOwGEx7hdrPiES/s320/Thor+2011.jpg" height="145"/></a>The powerful but arrogant warrior Thor is cast out of the fantastic realm of Asgard and sent to live amongst humans on Earth, where he soon becomes one of their finest defenders. </p>
</div>

<div class="slide">
<h2>Sucker Punch</h2>

<p><a href="#"><img alt="Sucker Punch" width="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQZUChMXIRs7sWSJirXxzuGp-AjTYM8j8-Lp1d63GnkNAYoGTkcOZT4vqJfSR8g8nbSIg-qKVY94Pa6FE0yngelLhQesOQwuBnXI82tpmljMUSM4Tm4Sg_y1devuH_JxjT17Iwe1j8NPSN/s320/Sucker+Punch.png" height="145"/></a>Sucker Punch is a 2011 action-fantasy thriller musical film about the fantasies of a young woman who is committed to a mental institution. It was written by Steve Shibuya and Zack Snyder and directed by Snyder</p></div>



<div class="slide">
<h2>crysis2</h2><p><a href="#"><img alt="crysis2" width="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjT6fPGl__mm1ucjuCgzEi-eRIo-tNzNuxSlZ3QKSr1XLCrYLgHmQNO4_8epYgVpOHD_BSzhuaSVhdD9v_8Euft4Km28vuNRgY-fC56pXRa_WI-L0U7diyjJsHv9nPYRz8q-s204NpLoay/s320/crysis2.png" height="145"/></a>Crysis 2 is a first-person shooter video game developed by Crytek, published by Electronic Arts and released in North America, Australia, and Europe in March 2011 for Microsoft Windows, PlayStation 3, and Xbox 360. Officially announced on June 1, 2009, the game is the second main installment of the Crysis series, and is the sequel to the 2007 video game Crysis and Crysis Warhead.[3</p></div>

<div class="slide">
<h2>Pirates of the Caribbean 4</h2><p><a href="#"><img alt="Pirates of the Caribbean 4" width="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipjSj1im6Edl4ZZez2FHArUTO2GhL00xuXhpTwj7cJu-E7ARr7Dysz3MtFXUZ7eNqRWJEXUsBaOvDoajgDy2DSsnVRVc_ss9adFvrMO9J4WNGX5LdJ-wkWaC1SxTs0c62TWw9RK9wxtXZz/s320/Pirates+of+the+Caribbean.png" height="145"/></a>aptain Jack Sparrow (Depp) crosses paths with a woman from his past (Cruz), and he's not sure if it's love -- or if she's a ruthless con artist who's using him to find the fabled Fountain of Youth. When she forces him aboard the Queen Anne's Revenge, the ship of the formidable pirate Blackbeard (McShane)</p></div>
</div>
</div></div>
<!-- Slideshow HTML -->

Replace # your URL
you can replace description and image URL with your own.

9. Now save  'HTML/JavaScript' 
You are done.
Continue reading →
Tuesday, June 14, 2011

Cool Jquery Slide Show to Your blogger Part 2

0 comments
 This is nice slide show to your blogger,add it and make
your blog attractive.











Demo here

1. Log in to your blogger account and Go to Design >> Edit HTML

2. Find this tag by using Ctrl+F    </head>

3. Paste below code before </head> tag

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>
//<![CDATA[

$(document).ready(function() {

//Execute the slideShow, set 6 seconds for each images
slideShow(3000);

});

function slideShow(speed) {


//append a LI item to the UL list for displaying caption
$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');

//Set the opacity of all images to 0
$('ul.slideshow li').css({opacity: 0.0});

//Get the first image and display it (set it to full opacity)
$('ul.slideshow li:first').css({opacity: 1.0});

//Get the caption of the first image from REL attribute and display it
$('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title'));
$('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));

//Display the caption
$('#slideshow-caption').css({opacity: 0.7, bottom:0});

//Call the gallery function to run the slideshow
var timer = setInterval('gallery()',speed);

//pause the slideshow on mouse over
$('ul.slideshow').hover(
function () {
clearInterval(timer);
},
function () {
timer = setInterval('gallery()',speed);
}
);

}

function gallery() {


//if no IMGs have the show class, grab the first image
var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li:first'));

//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));

//Get next image caption
var title = next.find('img').attr('title');
var desc = next.find('img').attr('alt');

//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);

//Hide the caption first, and then set and display the caption
$('#slideshow-caption').animate({bottom:-70}, 300, function () {
//Display the content
$('#slideshow-caption h3').html(title);
$('#slideshow-caption p').html(desc);
$('#slideshow-caption').animate({bottom:0}, 500);
});

//Hide the current image
current.animate({opacity: 0.0}, 1000).removeClass('show');

}

//]]>
</script>

<style type="text/css">
ul.slideshow {
list-style:none;
width:400px;
height:250px;
overflow:hidden;
position:relative;
margin:0;
padding:0;
font-family:Arial,Helvetica,Trebuchet MS,Verdana;
;
}
ul.slideshow li {
position:absolute;
left:0;
right:0;
}
ul.slideshow li.show {
z-index:500;
}
ul img {
width:400px;
height:250px;
border:none;
}
#slideshow-caption {
width:500px;
height:70px;
position:absolute;
bottom:0;
left:0;
color:#fff;
background:#000;
z-index:500;
}
#slideshow-caption .slideshow-caption-container {
padding:5px 10px;
z-index:1000;
}
#slideshow-caption h3 {
margin:0;
padding:0;
font-size:16px;
}
#slideshow-caption p {
margin:5px 0 0 0;
padding:0;
}
</style>

If you want, you can change image width and height (highlighted with different color)

4. Now Go to Design >>page Element

5.Click Add gadget  and Select HTML/JavaScript 

6. Now paste paste below code

<ul class="slideshow">

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPYDYf2OOBnKBXZnFPTNgKM3eG7udUCJffa4hOy8DLM7zIC50lp53zLJ3wgTVUADiAK9JgbF0zVRwmtzVlQnbu1fqfJBiLRJQ1uB0sI1oIlKVktXxjX4O6dBNx6EVBoCG-7Vj8Xbg-DEd3/s1600/image+4.jpg" title="Image 1 title here" alt="Image 1 Description here" /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhawGZsc9HsohlGluvUOrZZdG5ildCNIAwQP02j3VigcLQ7Hlihhb5fHdxVnXuLoU5HRo-O5znF3K7NtBk3r0ukYPcA_322_PPVrdANAfafP5KIvcGXV5WdJJ2fb8Y4vv1bAlLxuv0XFAyJ/s1600/image+1.jpg" title="Image 2 title here" alt="Image 2 Description here" /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBK-_zEYjWRBx238SRL9e_GSQlOC3LZKWNtFN-JX3UoW3KE01VifdMFwkaGMYnKkE25OxalGqqFZZxx41E-NiPjpu46EZyGkVxKLxjK_YAeqRRatfi8jmbmuy4DkN2QbNy3upUgj4xlHwe/s1600/image+3.jpg" title="Image 3 title here" alt="Image 3 Description here" /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh41zev4IrMtLV7mIWuA32qgGdH35EDdk6TWaZhbkY9U9ZCAgDmjgKyY1yF13KmlqHGTFgOF38t7NFDB7fvP0nW0iHXjNgRl6gAXWgYyY43SVxl7ZZJtx8FWphhmdn549_qEUYi8o1FP8yj/s1600/bla_image.png" title="Image 4 title here" alt="Image 4 Description here" /></a></li>
</ul>

Replace # your URL
Replace Red color words with  image title
Replace Red color words with  image description

7. Now save  HTML/JavaScript  
You are done.
Continue reading →
Saturday, April 30, 2011

How to add stylish Jquery post widget to blogger

0 comments
How to add stylish Jquery post widget to blogger

blogger,stylish,jquary,blogger tips,widget,post
This is cool widget to your blogger.you can get nice look to your blog.try it.
Click here to  DEMO

1. Log in to your blogger account and Go to Design >> Edit HTML

2. Put checked marked in Expand Widget Templates

3. Find this tag by using Ctrl+F 

4. Paste below code before ]]></b:skin> tag

#featured{
width:336px;
padding-right:250px;
position:relative;
height:250px;
background:#fff;
border:5px solid #ccc;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:336px;
list-style:none;
padding:0; margin:0;
width:250px;
}
#featured ul.ui-tabs-nav li{
padding:1px 0; padding-left:13px;
font-size:12px;
color:#666;
}
#featured ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:18px;
}

#featured .ui-tabs-panel{
width:336px; height:250px;
background:#999; position:relative;
overflow:hidden;
}
#featured .ui-tabs-hide{
display:none;
}

#featured li.ui-tabs-nav-item a{/*On Hover Style*/
display:block;
height:60px;
color:#333; background:#fff;
line-height:20px;
outline:none;
}
#featured li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#featured li.ui-tabs-selected{ /*Selected tab style*/
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicoKzWrxZ0xSQ7Aw8l1_5Us_DLwlYNlTD2l7ZIhsEowctv50QY20NuEv8OEUWlgtc0nO5fioo-vsffeRj1ykL4h0cyJL1_7TCRmbjcS16IYWLsx5j6lq6WmeDdVD2txzvFRUNvAiOQB6Q/s1600/selected-item.gif') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}

#featured ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #eee;
}
#featured .ui-tabs-panel .info{
position:absolute;
top:180px; left:0;
height:70px; width: 400px;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaqzaaR2KLxvMUfr0wk782SWlmQkjVemJQEea1o4E726PLWxeBzpCBNy4oZ6PMYSCcJT5UPSd407RiQ4IVkuVx5y-9BHWI9fgwFt4ttwmnk80oi4AuBksa8oeeOrTVgfVyU9ouyn4fmVA/s1600/transparent-bg.png');
}
#featured .info h2{
font-size:18px; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0;
overflow:hidden;
}
#featured .info p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}
#featured .info a{
text-decoration:none;
color:#fff;
}
#featured .info a:hover{
text-decoration:underline;
}

.ui-tabs-nav-item img {
width:45px;
height:45px;
}

5. Now find  </head> tag

6. Paste below code before </head> tag

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js' type='text/javascript'/>

<script type='text/javascript'>

    $(document).ready(function(){

        $(&quot;#featured &gt; ul&quot;).tabs({fx:{opacity:
&quot;toggle&quot;}}).tabs(&quot;rotate&quot;, 5000,
true);

    });

</script>

7. Go to Design >> Page Element

8. Click Add Gadget and select 'HTML/Javascript'

9. Paste below one of below code.

<div id="featured">

<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected">
<a href="#fragment-1">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPxzlUD7PcRTsC2UgXB_k6c7ecgetSiDmL4Lkl0jXq0bjVkzgGeD0i5HdeYSZSpzMzeV4aSbqMQ66f8p1Hbs4ko-VxJuhas0xBfVxk2LGT6UhHRPr45_YuiJJ09iBRPHKD7VZGvSCWc041/s320/bloggertrix.1.jpg" />
<span>Cool nature</span></a></li>

<li class="ui-tabs-nav-item">
<a href="#fragment-2">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2uWjT7LtrL-koGBzdJX8pvwZUrUwAI6AaVJeBsf-E6zKgIGvzsYNm0DjtgcSpt0IUjRpWJ_3VCcvdbhAjLRdnZc4PQ90j-UsPdvRsS38VYhw4n5F3xbQ0yeGFqTZw0gqr8BH6lmr6Mm4B/s320/bloggertrix.2.jpg" />
<span>Fresh Fruit</span></a></li>

<li class="ui-tabs-nav-item">
<a href="#fragment-3"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV0cx05xfNblJng0TB_5Fo753vjr5JPxkq9-RvyKZVJH_i0MHbMHpTyn-T2jQ6mTo4h2XsT2_LySUy5EHYREfPR2gYGsjWa27U8_g6K9dBLuyGpSJvG9yvo0SGxQ8fYjLaqCH-f0R2hcXo/s320/bloggertrix.5.jpg" /><span>Foods</span></a></li>

<li id="nav-fragment-4" class="ui-tabs-nav-item">
<a href="#fragment-4">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGVnMwIILNEXwIWJXlQ4sL4PuV04iDm2llSigfHKaSgknJlsh-ijGi7W902YWPEQkYitIsqdAQoJukFWh9-q7z3VwXSlQbpVajNnIEONzPn3-7O3gNUJb9g479lZtIQPm0cEY6ny9yf66O/s320/bloggertrix.4.JPG" />
<span>Amzing nature</span></a></li>
</ul>

<!-- First Content -->
<div id="fragment-1" style="" class="ui-tabs-panel">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPxzlUD7PcRTsC2UgXB_k6c7ecgetSiDmL4Lkl0jXq0bjVkzgGeD0i5HdeYSZSpzMzeV4aSbqMQ66f8p1Hbs4ko-VxJuhas0xBfVxk2LGT6UhHRPr45_YuiJJ09iBRPHKD7VZGvSCWc041/s320/bloggertrix.1.jpg" />

<div class="info">
<h2><a href="#fragment-1">Cool nature</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#">Read more</a></p>
</div>
</div>

<!-- Second Content -->
<div id="fragment-2" style="" class="ui-tabs-panel">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2uWjT7LtrL-koGBzdJX8pvwZUrUwAI6AaVJeBsf-E6zKgIGvzsYNm0DjtgcSpt0IUjRpWJ_3VCcvdbhAjLRdnZc4PQ90j-UsPdvRsS38VYhw4n5F3xbQ0yeGFqTZw0gqr8BH6lmr6Mm4B/s320/bloggertrix.2.jpg" />

<div class="info">
<h2><a href="#fragment-2">Fresh fruit</a></h2>
<p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#">Read more</a></p>
</div>
</div>

<!-- Third Content -->
<div id="fragment-3" style="" class="ui-tabs-panel">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPxzlUD7PcRTsC2UgXB_k6c7ecgetSiDmL4Lkl0jXq0bjVkzgGeD0i5HdeYSZSpzMzeV4aSbqMQ66f8p1Hbs4ko-VxJuhas0xBfVxk2LGT6UhHRPr45_YuiJJ09iBRPHKD7VZGvSCWc041/s320/bloggertrix.1.jpg" />

<div class="info">
<h2><a href="#fragment-3">Foods</a></h2>
<p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#">Read more</a></p>
</div>
</div>

<!-- Fourth Content -->
<div id="fragment-4" style="" class="ui-tabs-panel ui-tabs-hide">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGVnMwIILNEXwIWJXlQ4sL4PuV04iDm2llSigfHKaSgknJlsh-ijGi7W902YWPEQkYitIsqdAQoJukFWh9-q7z3VwXSlQbpVajNnIEONzPn3-7O3gNUJb9g479lZtIQPm0cEY6ny9yf66O/s320/bloggertrix.4.JPG" />

<div class="info">
<h2><a href="#fragment-4">AMzing nature</a></h2>
<p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#">Read more</a></p>
</div></div>
<a href="http://www.bloggertrix.com"><img alt="Best Bloger tricks" src="http://img1.blogblog.com/img/blank.gif"/>
</a></div>

*Replace red URL with your image URL
* If you want you can replace  #fragment-1 to #fragment-4 with your link URL

10. Save it. you are done.
Continue reading →
Sunday, March 6, 2011

How to show recent twitter tweets on your blogger

0 comments

1. Log in to blogger and Go to Design >> Edit HTML

2 .Make sure u Click on "Expand Widget Templates"

3. Find this tag by using Ctrl+F </head>

4. Paste below code before  </head> tag 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript" charset="utf-8">

function showTweets(elem, username, number)
{
var html = '<ul>';


var tweetFeed = 'http://twitter.com/status/user_timeline/' + username + '.json?count=' + number + '&callback=?'
$.getJSON(tweetFeed, function(d)
{

$.each(d, function(i,item)
{
html+='<li>'+item.text+'</li>';
})
html+="</ul>";

elem.children().fadeOut('fast',function() {
elem.append(html);
})
})
}

$(function() {
$('#error').remove();
$('#preload').show();
showTweets($('#tweets'), 'your twitter username', 5)
});

</script>

<style type="text/css">
#preload {display: none;}

#tweets ul li{
list-style-type:square;
list-style-position:inside;
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkxHZOrW2-YmLAJqlan58rvL16vvngWbP4ZqddvtWPqR9ViccMOvfajeeBq8jAhe9nvWZT3zgKFx1WY46k4wZyGjfMcOSgD__tqRYHUgyhYdsru7LpVySts7WDuZvB7eitGzJVS_-yyy4/s1600/twitter.png');
margin:0 0 0;
padding:0 0 0;
}
</style>

5. Save your template.

6. Now Go to Design >> Page Element

7. Click  'Add a Gadget' and select 'HTML/Javascript'

8.Paste below code. 

<div style="font-size:12px;font-family:Arial;">
<div id="tweets">
<h3 id="error">There was a problem fetching tweets</h3>
<h3 id="preload">Currently loading your tweets...</h3>
</div>
<ul><li style="list-style-type:none;"><a href="http://www.twitter.com/
your twitter username">Follow me on twitter</a></li></ul>
</div>

9.Replace your twitter username with you twitter username

10. Save it . You are done.
Continue reading →

How to add a animated clock for blogger

0 comments
1. Log in to blogger  and Go to Design> Page Element

2.Click Add Gadget and select 'HTML/Javascript'

3. Choose one of style as you  like.

4. Copy and paste the code.

                               Styles


1. Digital clock

<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-33.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-33.swf" width="150" height="150" wmode="transparent"> </embed></object>



2.Open space clock

<object><param name="movie" 
value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-63.swf"><embed

src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-63.swf"
width="150" height="150" wmode="transparent">
</embed></object>


3. Beautiful clock


<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-24.swf">
<embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-24.swf" width="150" height="150" wmode="transparent"> </embed></object>


4. Simple clock


<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-23.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-23.swf" width="150" height="150" wmode="transparent"> </embed></object>


5. Analog with digital clock

<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-28.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-28.swf" width="150" height="150" wmode="transparent"> </embed></object>


6. Wooden clock


<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-15.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-15.swf" width="150" height="150" wmode="transparent"> </embed></object>


7. Lively touch clock


<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-8.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-8.swf" width="150" height="150" wmode="transparent"> </embed></object>

8. Rotating clock


<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-11.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-11.swf" width="150" height="150" wmode="transparent"> </embed></object>

5. Now save it. you are done.
Continue reading →
Monday, February 28, 2011

How to add Jquery Image Slide Show for blogger

0 comments
How to add Jquery Image Slide Show for blogger 


1. Log in to your blogger and Go to Design >Page element

2. Now click 'Add a Gadget' and select 'HTML/Javascript'

3.Past below code.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://s3slider-original.googlecode.com/svn/trunk/s3Slider.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#MBT-slider').s3Slider({
timeOut: 3000
});
});
</script>
<style>
#MBT-slider {
width: 590px; /* Keep it 20px-40PX greater than ACTUAL Image size */
height: 335px;
position: relative;
overflow: hidden;
margin-left: 0;
}
#MBT-sliderContent {
width: 590px;
position: absolute;
top: 0;
margin-left: 0;
}
.MBT-sliderImage {
float: left;
position: relative;
display: none; top: 0;
border:1px solid #ddd;
}
.MBT-sliderImage span {
position: absolute;
font: 10px/15px sans-serif,Arial, Helvetica;
padding: 10px 10px;
background-color: #000;
color: #fff;
filter:'alpha(opacity=70)';
-moz-opacity: .5;
-khtml-opacity: .5;
opacity: .5;
text-align:justify;
}
.MBT-sliderImage span a {
text-decoration:underline;
color:#FE6602;
}
.clear {
clear: both;
}
.top {
top: 0;
left: 0;
width: 570px !important;
height: 70px;
}
.bottom {
bottom: 0;
left: 0;
width: 570px !important;
height:90px;
}
.left {
left: 0;
top: 0;
width: 110px !important;
height: 335px;
}
.right {
right: 0;
bottom: 0;
width: 80px !important;
height: 319px;
}
</style>

<div id="MBT-slider">
<ul id="MBT-sliderContent">
<li class="MBT-sliderImage">
<img src="Slide-Image-Address" />
<span class="right"><h3>Title-of-pic</h3>Slide Description [...] </span>
</li>
<li class="MBT-sliderImage">
<img src="Slide-Image-Address 2" />
<span class="left"><h3>Title-of-pic 2</h3>Slide Description [...] </span>
</li>

<li class="MBT-sliderImage">
<img src="Slide-Image-Address 3" />
<span class="top"><h3>Title-of-pic-3</h3>Slide Description [...] </span>
</li>
<li class="MBT-sliderImage">
<img src="Slide-Image-Address 4" />
<span class="bottom"><h3>Title-of-pic 4</h3>Slide Description [...] </span>
</li>

<li class="MBT-sliderImage">
<img src="Slide-Image-Address 5" />
<span class="bottom"><h3>Title-of-pic-5</h3>Slide Description [...] </span>
</li>
<div class="clear MBT-sliderImage"></div>
</ul>
</div>
<br/>

4. Now replace Slide-Image-Address   Title-of-pic-3  Slide Description [...] with your slide content.

5. After click save you are done.
Continue reading →
Tuesday, February 22, 2011

How to add addtoany social bookmark for blogger

0 comments

This gadget will help you to share your post with social
network site.If you like to add this. try it.
demo link.click here

1. Log in to blogger account and Go to  Design > Edit HTML

2. Make sure put check mark on "Expand Widget Templates"

3. Find this tag by using Ctrl+F                <div class='post-header-line-1'/>
    If you cant find this tag try this tag        <data:post.body/>

4. Paste blow code before one of  above tag.

<!-- AddToAny BEGIN -->
<br/><a class='a2a_dd' href='http://www.addtoany.com/share_save'><img alt='Share/Bookmark' border='0' src='http://static.addtoany.com/buttons/share_save_171_16.png' width='171' height='16'/></a>
<p class='a2a_linkname_escape' style='display:none'><data:post.title/></p><script type='text/javascript'>var a2a_config = a2a_config || {};a2a_config.linkname_escape=1;a2a_config.linkurl="<data:post.url/>";</script>
<script src='http://static.addtoany.com/menu/page.js' type='text/javascript'></script>
<!-- AddToAny END -->

5. After paste it click preview and click save template.you are done.
   enjoy it.
Continue reading →
Sunday, February 13, 2011

Open External link with new tab in your blogger

0 comments
This will help you to open your every external link
with new tab.try this.
1. Log in to your blogger account and go to  Design >>  Edit HTML

2. Find this tag By using Ctrl+F          </head>

3. Paste below code before the </head>   tag

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function () {

// ---- External Links ----------------------------------------------------------------------------------------------------

$("a[href*='http://']:not([href*='"+location.hostname+"']),[href*='https://']:not([href*='"+location.hostname+"'])").attr("target","_blank").attr("title","Opens new window").addClass("external");

});
</script>

4. now click preview and click save template. you are done.
Continue reading →
Monday, February 7, 2011

OS X sharing widget for blogger

0 comments
This is amazing widget.try this


1. Log in to blogger account  Design  >> Page Element >>HTML/JavaScript

2. Paste following code.

<style type="text/css">
#sharedock { position: fixed; bottom: 0; left: 0; width: 100%; height: 90px; z-index: 999; }
#dock { position: relative; bottom: 0; font: 13px "Trebuchet MS", Verdana, Helvetica, sans-serif; }
.dock-container { position: relative; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif4844DR0dksZclfFKkkBIASkqJDCkWvuO8-IR8NKvsZqkyXCJ9x8GIBMOTPopTIaibngImBP5KRjm7z0dA5qNMUmPeI4q_bgP0OPEtIh7HOfsixJpwxsY2_l7dpRAQrYsxls6zfAcUMD5/s1600/bloggertrix1.gif) no-repeat bottom center; height: 50px; padding: 20px 0 20px 0; }
.dock-container .custom_images a { display: block; position: absolute; bottom: 0; text-align: center; text-decoration: none; color: #333; cursor: pointer; }
.dock-container .custom_images span { background: rgba(0,0,0,.75); display: none; padding: 2px 8px; margin-left: 17px; font-size: 11px; color: #fff; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
.dock-container .custom_images img { border: 0; margin: 5px 0px 10px 0px; width: 100%; }
</style>

<div id="sharedock">
<div id="dock">
<div class="dock-container">

<div class="addthis_toolbox">

<div class="custom_images">

<a class="addthis_button_facebook"><span>Facebook</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_facebook.png" alt="Share to Facebook" /></a>
<a class="addthis_button_twitter"><span>Twitter</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_twitter.png" alt="Share to Twitter" /></a>
<a class="addthis_button_myspace"><span>MySpace</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_myspace.png" alt="Share to MySpace" /></a>
<a class="addthis_button_stumbleupon"><span>Stumble</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_stumbleupon.png" alt="Stumble It" /></a>
<a class="addthis_button_reddit"><span>Reddit</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_reddit.png" alt="Share to Reddit" /></a>
<a class="addthis_button_delicious"><span>Delicious</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_delicious.png" alt="Share to Delicious" /></a>
<a class="addthis_button_more"><span>More...</span><img src="http://addthis.com/cms-content/images/gallery/addthis_64.png" alt="More..." /></a>
</div>
</div>
</div>
</div>
</div>

<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://addthis.com//cms-content/images/gallery/fisheye-iutil.min.js"></script>
<script type="text/javascript">
$(function () {
// Dock initialize
$('#dock').Fisheye(
{
maxWidth: 30,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 50,
proximity: 60,
alignment : 'left',
valign: 'bottom',
halign : 'center'
}
);
});
</script>

3. click save. now you are done.
Continue reading →
Saturday, January 29, 2011

Animated JQuery Link For Blogger

0 comments
This is about animated JQuery link.visit DEMO

1. Go to your blogger and click "Design" on 
your dashboard and click "Edit HTML"

2. Make sure "Expand Widget Templates" checked.

3. Find these tag  by using Ctrl+F      </head> 

4. Copy below code and paste just before   </head> 


$(document).ready(function() 

{ slide(&quot;#sliding-navigation&quot;, 25, 15, 150, .8); });
function slide(navigation_id, pad_out, pad_in, time, multiplier)
{
// creates the target paths
var list_elements = navigation_id + &quot; li.sliding-element&quot;;
var link_elements = list_elements + &quot; a&quot;;

// initiates the timer used for the sliding animation

var timer = 0;

// creates the slide animation for all list elements

$(list_elements).each(function(i) {

// margin left = - ([width of element] + [total vertical padding of element])

$(this).css(&quot;margin-left&quot;,&quot;-180px&quot;);

// updates timer

timer = (timer*multiplier + time);

$(this).animate({ marginLeft: &quot;0&quot; }, timer);
$(this).animate({ marginLeft: &quot;15px&quot; }, timer);
$(this).animate({ marginLeft: &quot;0&quot; }, timer); });



// creates the hover-slide effect for all link elements
$(link_elements).each(function(i) {

$(this).hover(

function()
{ $(this).animate({ paddingLeft: pad_out }, 150); },
function()
{ $(this).animate({ paddingLeft: pad_in }, 150); }); });

}

</script>
<script type='text/javascript'>
if (window.jstiming) window.jstiming.load.tick(&#39;headEnd&#39;);
</script>

5. Save the template and Go to layout Click page element >> Add a gadget.

6. select "HTML /java script" and copy and paste below code.

<ul id="sliding-navigation"> 
<li class="sliding-element"><a href="Link1">Name1</a></li>   
<li class="sliding-element"><a href="Link2">Name2</a></li>    
<li class="sliding-element"><a href="Link3">Name3</a></li>    
<li class="sliding-element"><a href="Link4">Name4</a></li>
<li class="sliding-element"><a href="Link5">Name5</a></li>
<li class="sliding-element"><a href="Link6">Name6</a></li>
<li class="sliding-element"><a href="Link7">Name7</a></li>
<li class="sliding-element"><a href="Link8">Name8</a></li>
<li class="sliding-element"><a href="Link9">Name9</a></li>
<li class="sliding-element"><a href="Link10">Name10</a></li>
</ul>

In this code you can see Link its about your URL.
Name is what you put to URL name.

7. Enjoy it
Continue reading →
Related Posts Plugin for WordPress, Blogger...