Brain Interactive

How to show HTML code in Blogger Post ?

<div dir="ltr" style="text-align: left;" trbidi="on">
<span class="Apple-style-span" style="color: #333333; font-family: 'Segoe UI', 'Proxima Nova', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; line-height: 22px;"></span><br />
<h1 class="entry-title" style="background-attachment: scroll; background-clip: initial; background-color: #f9f9f9; background-image: none; background-origin: initial; background-position: 0px 0px; background-repeat: repeat repeat; border-bottom-color: rgb(230, 230, 230); border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(230, 230, 230); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(230, 230, 230); border-right-style: solid; border-right-width: 1px; border-style: initial; border-top-color: rgb(230, 230, 230); border-top-style: solid; border-top-width: 1px; box-shadow: rgba(135, 135, 135, 0.0976563) 3px 3px 0px 0px; font-family: inherit; font-size: 21px; font-style: inherit; font-weight: 700; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 10px; padding-left: 15px; padding-right: 10px; padding-top: 10px; vertical-align: baseline;">
How to show HTML code in Blogger Post ?</h1>
<div class="clear" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; clear: both; display: block; font-family: inherit; font-size: 13px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">
</div>
<div class="entry" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; display: block; font-family: inherit; font-size: 13px; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: justify; vertical-align: baseline; width: 650px;">
<div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #3c3c3c; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; font-style: inherit; font-weight: inherit; line-height: 1.571em; margin-bottom: 1.571em; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">
Want to show some piece of code in your post to your readers ?? Normally when you insert some code with HTML tags in your blogger composer , it will be executed and the result will be shown instead of code.In such a case How to show code with HTML tags to your readers as I had shown in my earlier post ??<br style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" /><span class="fullpost" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 15px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><br style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" />Its very simple.All you have to do is</span></div>
<ul style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 13px; font-style: inherit; font-weight: inherit; list-style-image: initial; list-style-position: initial; list-style-type: none; margin-bottom: 0px; margin-left: 7px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 10px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">
<li style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://www.beinggeeks.com/wp-content/themes/freshlife/images/icon-bullet.png); background-origin: initial; background-position: 0px 5px; background-repeat: no-repeat no-repeat; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; line-height: 19px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 3px; padding-left: 19px; padding-right: 0px; padding-top: 3px; vertical-align: baseline;">Copy the HTML code you want to add to your post in a notepad .</li>
<li style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://www.beinggeeks.com/wp-content/themes/freshlife/images/icon-bullet.png); background-origin: initial; background-position: 0px 5px; background-repeat: no-repeat no-repeat; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; line-height: 19px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 3px; padding-left: 19px; padding-right: 0px; padding-top: 3px; vertical-align: baseline;">In the notepad , go to Edit –> Replace</li>
<li style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://www.beinggeeks.com/wp-content/themes/freshlife/images/icon-bullet.png); background-origin: initial; background-position: 0px 5px; background-repeat: no-repeat no-repeat; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; line-height: 19px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 3px; padding-left: 19px; padding-right: 0px; padding-top: 3px; vertical-align: baseline;">A dialogue window will pop up . In the window , type > in the text box “Find what ” and type <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR6WBQ3X2evvJJo_MmdVtCVntXIchMtJMdFbI7clG7q6NOCnmapvSyx7RifZjIV6rX0e0J8I138Wh3_9jN0Z2OrI4fYh6SOhu0Du2NHvBwjgUXL-3mDQpV-dmSSiZtPeTTCyrtZSXw_y4/s1600-h/untitled2.jpg" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #2266bb; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;"><img alt="untitled2 How to show HTML code in Blogger Post ?" border="0" id="BLOGGER_PHOTO_ID_5125882544918995042" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR6WBQ3X2evvJJo_MmdVtCVntXIchMtJMdFbI7clG7q6NOCnmapvSyx7RifZjIV6rX0e0J8I138Wh3_9jN0Z2OrI4fYh6SOhu0Du2NHvBwjgUXL-3mDQpV-dmSSiZtPeTTCyrtZSXw_y4/s200/untitled2.jpg" style="border-bottom-style: none; border-bottom-width: 0px; border-color: initial; border-color: initial; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-style: initial; border-top-style: none; border-top-width: 0px; border-width: initial; cursor: pointer; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="How to show HTML code in Blogger Post ?" /></a> ; in the text box ” Replace with ” . Do the same for < class="fullpost"><span style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><span style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><br style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" /></span></span><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg1RqdqHPaOcZs1yQTVRP8Bu0h8eAjv-0ScQJI6s6FS-1plNQr5uQZuOVIZ4eXzT_mKYVJYtEDjLLJiShREM12KSrSItmrw0f9TB70znOMPVMEVo6usQmLUURVpt1-ZXI2DgS3SLp3kHbU/s1600-h/less+than.PNG" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #2266bb; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;"><img alt=" How to show HTML code in Blogger Post ?" border="0" id="BLOGGER_PHOTO_ID_5140415024215069522" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg1RqdqHPaOcZs1yQTVRP8Bu0h8eAjv-0ScQJI6s6FS-1plNQr5uQZuOVIZ4eXzT_mKYVJYtEDjLLJiShREM12KSrSItmrw0f9TB70znOMPVMEVo6usQmLUURVpt1-ZXI2DgS3SLp3kHbU/s400/less+than.PNG" style="border-bottom-style: none; border-bottom-width: 0px; border-color: initial; border-color: initial; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-style: initial; border-top-style: none; border-top-width: 0px; border-width: initial; cursor: pointer; float: left; margin-bottom: 10px; margin-left: 0pt; margin-right: 10px; margin-top: 0pt; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="How to show HTML code in Blogger Post ?" /></a></li>
</ul>
<div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #3c3c3c; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; font-style: inherit; font-weight: inherit; line-height: 1.571em; margin-bottom: 1.571em; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">
</div>
<ul style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 13px; font-style: inherit; font-weight: inherit; list-style-image: initial; list-style-position: initial; list-style-type: none; margin-bottom: 0px; margin-left: 7px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 10px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">
<li style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://www.beinggeeks.com/wp-content/themes/freshlife/images/icon-bullet.png); background-origin: initial; background-position: 0px 5px; background-repeat: no-repeat no-repeat; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; line-height: 19px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 3px; padding-left: 19px; padding-right: 0px; padding-top: 3px; vertical-align: baseline;">Now copy the entire code and use it in your blogger composer .</li>
<li style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://www.beinggeeks.com/wp-content/themes/freshlife/images/icon-bullet.png); background-origin: initial; background-position: 0px 5px; background-repeat: no-repeat no-repeat; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; line-height: 19px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 3px; padding-left: 19px; padding-right: 0px; padding-top: 3px; vertical-align: baseline;">Now publish the posts and the tags <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSTJNeOMRi6Pci3b5QTRyiuyywtnsGOB5JFz3lf81IF2JW8rcB4rsUqKGJxBdgFF_JRlWuuylBLfKNUI__WN7Q7O9XdH8ycSpcoio8_AFhXhbVShSKtlL-u-mstKd-WNWSNyrf-Tx5QiI/s1600-h/untitled1.jpg" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #2266bb; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;"><img alt="untitled1 How to show HTML code in Blogger Post ?" border="0" id="BLOGGER_PHOTO_ID_5125881222069067858" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSTJNeOMRi6Pci3b5QTRyiuyywtnsGOB5JFz3lf81IF2JW8rcB4rsUqKGJxBdgFF_JRlWuuylBLfKNUI__WN7Q7O9XdH8ycSpcoio8_AFhXhbVShSKtlL-u-mstKd-WNWSNyrf-Tx5QiI/s200/untitled1.jpg" style="border-bottom-style: none; border-bottom-width: 0px; border-color: initial; border-color: initial; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-style: initial; border-top-style: none; border-top-width: 0px; border-width: initial; cursor: pointer; height: 21px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; width: 98px;" title="How to show HTML code in Blogger Post ?" /></a>which used will be shown as <> in your blog .</li>
</ul>
<div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #3c3c3c; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; font-style: inherit; font-weight: inherit; line-height: 1.571em; margin-bottom: 1.571em; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">
Hope this will help the new blogger users .</div>
<div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #3c3c3c; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; font-style: inherit; font-weight: inherit; line-height: 1.571em; margin-bottom: 1.571em; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">
If you have any doubts , suggestion then feel free to comments here.</div>
</div>
</div>

How to show HTML code in Blogger Post ?

How to show HTML code in Blogger Post ? Want to show some piece of code in your post to your readers ?? Normally when you insert som...

How To Add Featured Post Content Slider to Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<span class="Apple-style-span" style="color: #000222; font-family: 'PT Sans', Arial, sans-serif; font-size: 14px; line-height: 20px;"></span><br />
This is very smart featured post content slider for your blogger blog or any other site.You can easily add or remove slides to this widget.And also very easy to configure.To add it to your site follow the steps given below.<br />
<strong>Tutorial updated : MARCH 11, 2013</strong><br />
1.Login to your blogger dashboard--> layout- -> Edit HTML<br />
2.Scroll down to where you see <span style="color: red; font-weight: bold;"></head></span> tag .<br />
3.Copy below code and paste it <span style="color: #3333ff;">just before</span> the <span style="color: red; font-weight: bold;"></head></span> tag .<br />
<br />
<pre style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://cdn.bloggertipandtrick.net/wp-content/themes/btt/images/pre_code_bg.gif); background-origin: initial; background-position: 0% 0%; background-repeat: no-repeat repeat; border-bottom-color: black; border-bottom-style: solid; border-bottom-width: 1px; border-left-color: black; border-left-style: solid; border-left-width: 1px; border-right-color: black; border-right-style: solid; border-right-width: 1px; border-top-color: black; border-top-style: solid; border-top-width: 1px; color: black; font-family: 'PT Sans', Arial, sans-serif; height: 300px; line-height: 20px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 35px; padding-right: 5px; padding-top: 5px; width: 638px; word-wrap: normal;"><script src='<span style="color: magenta;"><strong>https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js</strong></span>' type='text/javascript'/>

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}('(6($){$.1g.1w=6(o){o=$.1f({r:n,x:n,N:n,17:q,J:n,L:1a,16:n,y:q,u:12,H:3,B:0,k:1,K:n,I:n},o||{});8 G.R(6(){p b=q,A=o.y?"15":"w",P=o.y?"t":"s";p c=$(G),9=$("9",c),E=$("10",9),W=E.Y(),v=o.H;7(o.u){9.1h(E.D(W-v-1+1).V()).1d(E.D(0,v).V());o.B+=v}p f=$("10",9),l=f.Y(),4=o.B;c.5("1c","H");f.5({U:"T",1b:o.y?"S":"w"});9.5({19:"0",18:"0",Q:"13","1v-1s-1r":"S","z-14":"1"});c.5({U:"T",Q:"13","z-14":"2",w:"1q"});p g=o.y?t(f):s(f);p h=g*l;p j=g*v;f.5({s:f.s(),t:f.t()});9.5(P,h+"C").5(A,-(4*g));c.5(P,j+"C");7(o.r)$(o.r).O(6(){8 m(4-o.k)});7(o.x)$(o.x).O(6(){8 m(4+o.k)});7(o.N)$.R(o.N,6(i,a){$(a).O(6(){8 m(o.u?o.H+i:i)})});7(o.17&&c.11)c.11(6(e,d){8 d>0?m(4-o.k):m(4+o.k)});7(o.J)1p(6(){m(4+o.k)},o.J+o.L);6 M(){8 f.D(4).D(0,v)};6 m(a){7(!b){7(o.K)o.K.Z(G,M());7(o.u){7(a<=o.B-v-1){9.5(A,-((l-(v*2))*g)+"C");4=a==o.B-v-1?l-(v*2)-1:l-(v*2)-o.k}F 7(a>=l-v+1){9.5(A,-((v)*g)+"C");4=a==l-v+1?v+1:v+o.k}F 4=a}F{7(a<0||a>l-v)8;F 4=a}b=12;9.1o(A=="w"?{w:-(4*g)}:{15:-(4*g)},o.L,o.16,6(){7(o.I)o.I.Z(G,M());b=q});7(!o.u){$(o.r+","+o.x).1n("X");$((4-o.k<0&&o.r)||(4+o.k>l-v&&o.x)||[]).1m("X")}}8 q}})};6 5(a,b){8 1l($.5(a[0],b))||0};6 s(a){8 a[0].1k+5(a,\'1j\')+5(a,\'1i\')};6 t(a){8 a[0].1t+5(a,\'1u\')+5(a,\'1e\')}})(1x);',62,96,'||||curr|css|function|if|return|ul|||||||||||scroll|itemLength|go|null||var|false|btnPrev|width|height|circular||left|btnNext|vertical||animCss|start|px|slice|tLi|else|this|visible|afterEnd|auto|beforeStart|speed|vis|btnGo|click|sizeCss|position|each|none|hidden|overflow|clone|tl|disabled|size|call|li|mousewheel|true|relative|index|top|easing|mouseWheel|padding|margin|200|float|visibility|append|marginBottom|extend|fn|prepend|marginRight|marginLeft|offsetWidth|parseInt|addClass|removeClass|animate|setInterval|0px|type|style|offsetHeight|marginTop|list|jCarouselLite|jQuery'.split('|'),0,{}))

//]]>
</script>

/*
* Copyright (c) 2009 Simo Kinnunen.
* Licensed under the MIT license.
*
* @version 1.02
*/
var Cufon=(function(){var m=function(){return m.replace.apply(null,arguments)};var x=m.DOM={ready:(function(){var C=false,E={loaded:1,complete:1};var B=[],D=function(){if(C){return}C=true;for(var F;F=B.shift();F()){}};if(document.addEventListener){document.addEventListener("DOMContentLoaded",D,false);window.addEventListener("pageshow",D,false)}if(!window.opera&&document.readyState){(function(){E[document.readyState]?D():setTimeout(arguments.callee,10)})()}if(document.readyState&&document.createStyleSheet){(function(){try{document.body.doScroll("left");D()}catch(F){setTimeout(arguments.callee,1)}})()}q(window,"load",D);return function(F){if(!arguments.length){D()}else{C?F():B.push(F)}}})(),root:function(){return document.documentElement||document.body}};var n=m.CSS={Size:function(C,B){this.value=parseFloat(C);this.unit=String(C).match(/[a-z%]*$/)[0]||"px";this.convert=function(D){return D/B*this.value};this.convertFrom=function(D){return D/this.value*B};this.toString=function(){return this.value+this.unit}},addClass:function(C,B){var D=C.className;C.className=D+(D&&" ")+B;return C},color:j(function(C){var B={};B.color=C.replace(/^rgba$(.*?),\s*([\d.]+)$/,function(E,D,F){B.opacity=parseFloat(F);return"rgb("+D+")"});return B}),fontStretch:j(function(B){if(typeof B=="number"){return B}if(/%$/.test(B)){return parseFloat(B)/100}return{"ultra-condensed":0.5,"extra-condensed":0.625,condensed:0.75,"semi-condensed":0.875,"semi-expanded":1.125,expanded:1.25,"extra-expanded":1.5,"ultra-expanded":2}[B]||1}),getStyle:function(C){var B=document.defaultView;if(B&&B.getComputedStyle){return new a(B.getComputedStyle(C,null))}if(C.currentStyle){return new a(C.currentStyle)}return new a(C.style)},gradient:j(function(F){var G={id:F,type:F.match(/^-([a-z]+)-gradient$/)[1],stops:[]},C=F.substr(F.indexOf("(")).match(/([\d.]+=)?(#[a-f0-9]+|[a-z]+\(.*?$|[a-z]+)/ig);for(var E=0,B=C.length,D;E<B;++E){D=C[E].split("=",2).reverse();G.stops.push([D[1]||E/(B-1),D[0]])}return G}),hasClass:function(C,B){return RegExp("(?:^|\\s)"+B+"(?=\\s|$)").test(C.className)},quotedList:j(function(E){var D=[],C=/\s*((["'])([\s\S]*?[^\\])\2|[^,]+)\s*/g,B;while(B=C.exec(E)){D.push(B[3]||B[1])}return D}),recognizesMedia:j(function(G){var E=document.createElement("style"),D,C,B;E.type="text/css";E.media=G;try{E.appendChild(document.createTextNode("/**/"))}catch(F){}C=g("head")[0];C.insertBefore(E,C.firstChild);D=(E.sheet||E.styleSheet);B=D&&!D.disabled;C.removeChild(E);return B}),removeClass:function(D,C){var B=RegExp("(?:^|\\s+)"+C+"(?=\\s|$)","g");D.className=D.className.replace(B,"");return D},supports:function(D,C){var B=document.createElement("span").style;if(B[D]===undefined){return false}B[D]=C;return B[D]===C},textAlign:function(E,D,B,C){if(D.get("textAlign")=="right"){if(B>0){E=" "+E}}else{if(B<C-1){E+=" "}}return E},textDecoration:function(G,F){if(!F){F=this.getStyle(G)}var C={underline:null,overline:null,"line-through":null};for(var B=G;B.parentNode&&B.parentNode.nodeType==1;){var E=true;for(var D in C){if(!k(C,D)||C[D]){continue}if(F.get("textDecoration").indexOf(D)!=-1){C[D]=F.get("color")}E=false}if(E){break}F=this.getStyle(B=B.parentNode)}return C},textShadow:j(function(F){if(F=="none"){return null}var E=[],G={},B,C=0;var D=/(#[a-f0-9]+|[a-z]+$.*?$|[a-z]+)|(-?[\d.]+[a-z%]*)|,/ig;while(B=D.exec(F)){if(B[0]==","){E.push(G);G={};C=0}else{if(B[1]){G.color=B[1]}else{G[["offX","offY","blur"][C++]]=B[2]}}}E.push(G);return E}),textTransform:(function(){var B={uppercase:function(C){return C.toUpperCase()},lowercase:function(C){return C.toLowerCase()},capitalize:function(C){return C.replace(/\b./g,function(D){return D.toUpperCase()})}};return function(E,D){var C=B[D.get("textTransform")];return C?C(E):E}})(),whiteSpace:(function(){var B={inline:1,"inline-block":1,"run-in":1};return function(E,C,D){if(B[C.get("display")]){return E}if(!D.previousSibling){E=E.replace(/^\s+/,"")}if(!D.nextSibling){E=E.replace(/\s+$/,"")}return E}})()};n.ready=(function(){var B=!n.recognizesMedia("all"),E=false;var D=[],H=function(){B=true;for(var K;K=D.shift();K()){}};var I=g("link"),J=g("style");function C(K){return K.disabled||G(K.sheet,K.media||"screen")}function G(M,P){if(!n.recognizesMedia(P||"all")){return true}if(!M||M.disabled){return false}try{var Q=M.cssRules,O;if(Q){search:for(var L=0,K=Q.length;O=Q[L],L<K;++L){switch(O.type){case 2:break;case 3:if(!G(O.styleSheet,O.media.mediaText)){return false}break;default:break search}}}}catch(N){}return true}function F(){if(document.createStyleSheet){return true}var L,K;for(K=0;L=I[K];++K){if(L.rel.toLowerCase()=="stylesheet"&&!C(L)){return false}}for(K=0;L=J[K];++K){if(!C(L)){return false}}return true}x.ready(function(){if(!E){E=n.getStyle(document.body).isUsable()}if(B||(E&&F())){H()}else{setTimeout(arguments.callee,10)}});return function(K){if(B){K()}else{D.push(K)}}})();function s(C){var B=this.face=C.face;this.glyphs=C.glyphs;this.w=C.w;this.baseSize=parseInt(B["units-per-em"],10);this.family=B["font-family"].toLowerCase();this.weight=B["font-weight"];this.style=B["font-style"]||"normal";this.viewBox=(function(){var E=B.bbox.split(/\s+/);var D={minX:parseInt(E[0],10),minY:parseInt(E[1],10),maxX:parseInt(E[2],10),maxY:parseInt(E[3],10)};D.width=D.maxX-D.minX;D.height=D.maxY-D.minY;D.toString=function(){return[this.minX,this.minY,this.width,this.height].join(" ")};return D})();this.ascent=-parseInt(B.ascent,10);this.descent=-parseInt(B.descent,10);this.height=-this.ascent+this.descent}function f(){var C={},B={oblique:"italic",italic:"oblique"};this.add=function(D){(C[D.style]||(C[D.style]={}))[D.weight]=D};this.get=function(H,I){var G=C[H]||C[B[H]]||C.normal||C.italic||C.oblique;if(!G){return null}I={normal:400,bold:700}[I]||parseInt(I,10);if(G[I]){return G[I]}var E={1:1,99:0}[I%100],K=[],F,D;if(E===undefined){E=I>400}if(I==500){I=400}for(var J in G){if(!k(G,J)){continue}J=parseInt(J,10);if(!F||J<F){F=J}if(!D||J>D){D=J}K.push(J)}if(I<F){I=F}if(I>D){I=D}K.sort(function(M,L){return(E?(M>I&&L>I)?M<L:M>L:(M<I&&L<I)?M>L:M<L)?-1:1});return G[K[0]]}}function r(){function D(F,G){if(F.contains){return F.contains(G)}return F.compareDocumentPosition(G)&16}function B(G){var F=G.relatedTarget;if(!F||D(this,F)){return}C(this)}function E(F){C(this)}function C(F){setTimeout(function(){m.replace(F,d.get(F).options,true)},10)}this.attach=function(F){if(F.onmouseenter===undefined){q(F,"mouseover",B);q(F,"mouseout",B)}else{q(F,"mouseenter",E);q(F,"mouseleave",E)}}}function u(){var C=[],D={};function B(H){var E=[],G;for(var F=0;G=H[F];++F){E[F]=C[D[G]]}return E}this.add=function(F,E){D[F]=C.push(E)-1};this.repeat=function(){var E=arguments.length?B(arguments):C,F;for(var G=0;F=E[G++];){m.replace(F[0],F[1],true)}}}function A(){var D={},B=0;function C(E){return E.cufid||(E.cufid=++B)}this.get=function(E){var F=C(E);return D[F]||(D[F]={})}}function a(B){var D={},C={};this.extend=function(E){for(var F in E){if(k(E,F)){D[F]=E[F]}}return this};this.get=function(E){return D[E]!=undefined?D[E]:B[E]};this.getSize=function(F,E){return C[F]||(C[F]=new n.Size(this.get(F),E))};this.isUsable=function(){return !!B}}function q(C,B,D){if(C.addEventListener){C.addEventListener(B,D,false)}else{if(C.attachEvent){C.attachEvent("on"+B,function(){return D.call(C,window.event)})}}}function v(C,B){var D=d.get(C);if(D.options){return C}if(B.hover&&B.hoverables[C.nodeName.toLowerCase()]){b.attach(C)}D.options=B;return C}function j(B){var C={};return function(D){if(!k(C,D)){C[D]=B.apply(null,arguments)}return C[D]}}function c(F,E){var B=n.quotedList(E.get("fontFamily").toLowerCase()),D;for(var C=0;D=B[C];++C){if(i[D]){return i[D].get(E.get("fontStyle"),E.get("fontWeight"))}}return null}function g(B){return document.getElementsByTagName(B)}function k(C,B){return C.hasOwnProperty(B)}function h(){var B={},D,F;for(var E=0,C=arguments.length;D=arguments[E],E<C;++E){for(F in D){if(k(D,F)){B[F]=D[F]}}}return B}function o(E,M,C,N,F,D){var K=document.createDocumentFragment(),H;if(M===""){return K}var L=N.separate;var I=M.split(p[L]),B=(L=="words");if(B&&t){if(/^\s/.test(M)){I.unshift("")}if(/\s$/.test(M)){I.push("")}}for(var J=0,G=I.length;J<G;++J){H=z[N.engine](E,B?n.textAlign(I[J],C,J,G):I[J],C,N,F,D,J<G-1);if(H){K.appendChild(H)}}return K}function l(C,J){var B=n.getStyle(v(C,J)).extend(J);var D=c(C,B),E,H,G,F,I;for(E=C.firstChild;E;E=G){H=E.nodeType;G=E.nextSibling;if(H==3){if(F){F.appendData(E.data);C.removeChild(E)}else{F=E}if(G){continue}}if(F){C.replaceChild(o(D,n.whiteSpace(F.data,B,F),B,J,E,C),F);F=null}if(H==1&&E.firstChild){if(n.hasClass(E,"cufon")){z[J.engine](D,null,B,J,E,C)}else{arguments.callee(E,J)}}}}var t=" ".split(/\s+/).length==0;var d=new A();var b=new r();var y=new u();var e=false;var z={},i={},w={enableTextDecoration:false,engine:null,forceHitArea:false,hover:false,hoverables:{a:true},printable:true,selector:(window.Sizzle||(window.jQuery&&function(B){return jQuery(B)})||(window.dojo&&dojo.query)||(window.Ext&&Ext.query)||(window.$$&&function(B){return $$(B)})||(window.$&&function(B){return $(B)})||(document.querySelectorAll&&function(B){return document.querySelectorAll(B)})||g),separate:"words",textShadow:"none"};var p={words:/[^\S\u00a0]+/,characters:"",none:/^/};m.now=function(){x.ready();return m};m.refresh=function(){y.repeat.apply(y,arguments);return m};m.registerEngine=function(C,B){if(!B){return m}z[C]=B;return m.set("engine",C)};m.registerFont=function(D){var B=new s(D),C=B.family;if(!i[C]){i[C]=new f()}i[C].add(B);return m.set("fontFamily",'"'+C+'"')};m.replace=function(D,C,B){C=h(w,C);if(!C.engine){return m}if(!e){n.addClass(x.root(),"cufon-active cufon-loading");n.ready(function(){n.addClass(n.removeClass(x.root(),"cufon-loading"),"cufon-ready")});e=true}if(C.hover){C.forceHitArea=true}if(typeof C.textShadow=="string"){C.textShadow=n.textShadow(C.textShadow)}if(typeof C.color=="string"&&/^-/.test(C.color)){C.textGradient=n.gradient(C.color)}if(!B){y.add(D,arguments)}if(D.nodeType||typeof D=="string"){D=[D]}n.ready(function(){for(var F=0,E=D.length;F<E;++F){var G=D[F];if(typeof G=="string"){m.replace(C.selector(G),C,true)}else{l(G,C)}}});return m};m.set=function(B,C){w[B]=C;return m};return m})();Cufon.registerEngine("canvas",(function(){var b=document.createElement("canvas");if(!b||!b.getContext||!b.getContext.apply){return}b=null;var a=Cufon.CSS.supports("display","inline-block");var e=!a&&(document.compatMode=="BackCompat"||/frameset|transitional/i.test(document.doctype.publicId));var f=document.createElement("style");f.type="text/css";f.appendChild(document.createTextNode((".cufon-canvas{text-indent:0;}@media screen,projection{.cufon-canvas{display:inline;display:inline-block;position:relative;vertical-align:middle;"+(e?"":"font-size:1px;line-height:1px;")+"}.cufon-canvas .cufon-alt{display:-moz-inline-box;display:inline-block;width:0;height:0;overflow:hidden;text-indent:-10000in;}"+(a?".cufon-canvas canvas{position:relative;}":".cufon-canvas canvas{position:absolute;}")+"}@media print{.cufon-canvas{padding:0;}.cufon-canvas canvas{display:none;}.cufon-canvas .cufon-alt{display:inline;}}").replace(/;/g,"!important;")));document.getElementsByTagName("head")[0].appendChild(f);function d(p,h){var n=0,m=0;var g=[],o=/([mrvxe])([^a-z]*)/g,k;generate:for(var j=0;k=o.exec(p);++j){var l=k[2].split(",");switch(k[1]){case"v":g[j]={m:"bezierCurveTo",a:[n+~~l[0],m+~~l[1],n+~~l[2],m+~~l[3],n+=~~l[4],m+=~~l[5]]};break;case"r":g[j]={m:"lineTo",a:[n+=~~l[0],m+=~~l[1]]};break;case"m":g[j]={m:"moveTo",a:[n=~~l[0],m=~~l[1]]};break;case"x":g[j]={m:"closePath"};break;case"e":break generate}h[g[j].m].apply(h,g[j].a)}return g}function c(m,k){for(var j=0,h=m.length;j<h;++j){var g=m[j];k[g.m].apply(k,g.a)}}return function(ah,H,Z,D,L,ai){var n=(H===null);if(n){H=L.alt}var J=ah.viewBox;var p=Z.getSize("fontSize",ah.baseSize);var X=Z.get("letterSpacing");X=(X=="normal")?0:p.convertFrom(parseInt(X,10));var K=0,Y=0,W=0,F=0;var I=D.textShadow,U=[];if(I){for(var ag=I.length;ag--;){var O=I[ag];var T=p.convertFrom(parseFloat(O.offX));var R=p.convertFrom(parseFloat(O.offY));U[ag]=[T,R];if(R<K){K=R}if(T>Y){Y=T}if(R>W){W=R}if(T<F){F=T}}}var al=Cufon.CSS.textTransform(H,Z).split(""),B;var o=ah.glyphs,E,r,ac;var h=0,v,N=[];for(var ag=0,ae=0,ab=al.length;ag<ab;++ag){E=o[B=al[ag]]||ah.missingGlyph;if(!E){continue}if(r){h-=ac=r[B]||0;N[ae-1]-=ac}h+=v=N[ae++]=~~(E.w||ah.w)+X;r=E.k}if(v===undefined){return null}Y+=J.width-v;F+=J.minX;var C,q;if(n){C=L;q=L.firstChild}else{C=document.createElement("span");C.className="cufon cufon-canvas";C.alt=H;q=document.createElement("canvas");C.appendChild(q);if(D.printable){var ad=document.createElement("span");ad.className="cufon-alt";ad.appendChild(document.createTextNode(H));C.appendChild(ad)}}var am=C.style;var Q=q.style;var m=p.convert(J.height);var ak=Math.ceil(m);var V=ak/m;var P=V*Cufon.CSS.fontStretch(Z.get("fontStretch"));var S=h*P;var aa=Math.ceil(p.convert(S+Y-F));var t=Math.ceil(p.convert(J.height-K+W));q.width=aa;q.height=t;Q.width=aa+"px";Q.height=t+"px";K+=J.minY;Q.top=Math.round(p.convert(K-ah.ascent))+"px";Q.left=Math.round(p.convert(F))+"px";var A=Math.ceil(p.convert(S))+"px";if(a){am.width=A;am.height=p.convert(ah.height)+"px"}else{am.paddingLeft=A;am.paddingBottom=(p.convert(ah.height)-1)+"px"}var aj=q.getContext("2d"),M=m/J.height;aj.scale(M,M*V);aj.translate(-F,-K);aj.lineWidth=ah.face["underline-thickness"];aj.save();function s(i,g){aj.strokeStyle=g;aj.beginPath();aj.moveTo(0,i);aj.lineTo(h,i);aj.stroke()}var u=D.enableTextDecoration?Cufon.CSS.textDecoration(ai,Z):{};if(u.underline){s(-ah.face["underline-position"],u.underline)}if(u.overline){s(ah.ascent,u.overline)}function af(){aj.scale(P,1);for(var x=0,k=0,g=al.length;x<g;++x){var y=o[al[x]]||ah.missingGlyph;if(!y){continue}if(y.d){aj.beginPath();if(y.code){c(y.code,aj)}else{y.code=d("m"+y.d,aj)}aj.fill()}aj.translate(N[k++],0)}aj.restore()}if(I){for(var ag=I.length;ag--;){var O=I[ag];aj.save();aj.fillStyle=O.color;aj.translate.apply(aj,U[ag]);af()}}var z=D.textGradient;if(z){var G=z.stops,w=aj.createLinearGradient(0,J.minY,0,J.maxY);for(var ag=0,ab=G.length;ag<ab;++ag){w.addColorStop.apply(w,G[ag])}aj.fillStyle=w}else{aj.fillStyle=Z.get("color")}af();if(u["line-through"]){s(-ah.descent,u["line-through"])}return C}})());Cufon.registerEngine("vml",(function(){var e=document.namespaces;if(!e){return}e.add("cvml","urn:schemas-microsoft-com:vml");e=null;var b=document.createElement("cvml:shape");b.style.behavior="url(#default#VML)";if(!b.coordsize){return}b=null;var g=(document.documentMode||0)<8;document.write(('<style type="text/css">.cufon-vml-canvas{text-indent:0;}@media screen{cvml\\:shape,cvml\\:rect,cvml\\:fill,cvml\\:shadow{behavior:url(#default#VML);display:block;antialias:true;position:absolute;}.cufon-vml-canvas{position:absolute;text-align:left;}.cufon-vml{display:inline-block;position:relative;vertical-align:'+(g?"middle":"text-bottom")+";}.cufon-vml .cufon-alt{position:absolute;left:-10000in;font-size:1px;}a .cufon-vml{cursor:pointer}}@media print{.cufon-vml *{display:none;}.cufon-vml .cufon-alt{display:inline;}}</style>").replace(/;/g,"!important;"));function c(h,i){return a(h,/(?:em|ex|%)$|^[a-z-]+$/i.test(i)?"1em":i)}function a(k,l){if(/px$/i.test(l)){return parseFloat(l)}var j=k.style.left,i=k.runtimeStyle.left;k.runtimeStyle.left=k.currentStyle.left;k.style.left=l.replace("%","em");var h=k.style.pixelLeft;k.style.left=j;k.runtimeStyle.left=i;return h}var f={};function d(o){var p=o.id;if(!f[p]){var m=o.stops,n=document.createElement("cvml:fill"),h=[];n.type="gradient";n.angle=180;n.focus="0";n.method="sigma";n.color=m[0][1];for(var l=1,i=m.length-1;l<i;++l){h.push(m[l][0]*100+"% "+m[l][1])}n.colors=h.join(",");n.color2=m[i][1];f[p]=n}return f[p]}return function(aj,K,ad,G,O,ak,ab){var o=(K===null);if(o){K=O.alt}var M=aj.viewBox;var q=ad.computedFontSize||(ad.computedFontSize=new Cufon.CSS.Size(c(ak,ad.get("fontSize"))+"px",aj.baseSize));var aa=ad.computedLSpacing;if(aa==undefined){aa=ad.get("letterSpacing");ad.computedLSpacing=aa=(aa=="normal")?0:~~q.convertFrom(a(ak,aa))}var C,r;if(o){C=O;r=O.firstChild}else{C=document.createElement("span");C.className="cufon cufon-vml";C.alt=K;r=document.createElement("span");r.className="cufon-vml-canvas";C.appendChild(r);if(G.printable){var ag=document.createElement("span");ag.className="cufon-alt";ag.appendChild(document.createTextNode(K));C.appendChild(ag)}if(!ab){C.appendChild(document.createElement("cvml:shape"))}}var ap=C.style;var V=r.style;var m=q.convert(M.height),am=Math.ceil(m);var Z=am/m;var T=Z*Cufon.CSS.fontStretch(ad.get("fontStretch"));var Y=M.minX,X=M.minY;V.height=am;V.top=Math.round(q.convert(X-aj.ascent));V.left=Math.round(q.convert(Y));ap.height=q.convert(aj.height)+"px";var v=G.enableTextDecoration?Cufon.CSS.textDecoration(ak,ad):{};var J=ad.get("color");var ao=Cufon.CSS.textTransform(K,ad).split(""),B;var p=aj.glyphs,H,s,af;var h=0,P=[],W=0,x;var z,L=G.textShadow;for(var ai=0,ah=0,ae=ao.length;ai<ae;++ai){H=p[B=ao[ai]]||aj.missingGlyph;if(!H){continue}if(s){h-=af=s[B]||0;P[ah-1]-=af}h+=x=P[ah++]=~~(H.w||aj.w)+aa;s=H.k}if(x===undefined){return null}var A=-Y+h+(M.width-x);var an=q.convert(A*T),ac=Math.round(an);var S=A+","+M.height,n;var N="r"+S+"ns";var y=G.textGradient&&d(G.textGradient);for(ai=0,ah=0;ai<ae;++ai){H=p[ao[ai]]||aj.missingGlyph;if(!H){continue}if(o){z=r.childNodes[ah];while(z.firstChild){z.removeChild(z.firstChild)}}else{z=document.createElement("cvml:shape");r.appendChild(z)}z.stroked="f";z.coordsize=S;z.coordorigin=n=(Y-W)+","+X;z.path=(H.d?"m"+H.d+"xe":"")+"m"+n+N;z.fillcolor=J;if(y){z.appendChild(y.cloneNode(false))}var al=z.style;al.width=ac;al.height=am;if(L){var u=L[0],t=L[1];var F=Cufon.CSS.color(u.color),D;var R=document.createElement("cvml:shadow");R.on="t";R.color=F.color;R.offset=u.offX+","+u.offY;if(t){D=Cufon.CSS.color(t.color);R.type="double";R.color2=D.color;R.offset2=t.offX+","+t.offY}R.opacity=F.opacity||(D&&D.opacity)||1;z.appendChild(R)}W+=P[ah++]}var Q=z.nextSibling,w,E;if(G.forceHitArea){if(!Q){Q=document.createElement("cvml:rect");Q.stroked="f";Q.className="cufon-vml-cover";w=document.createElement("cvml:fill");w.opacity=0;Q.appendChild(w);r.appendChild(Q)}E=Q.style;E.width=ac;E.height=am}else{if(Q){r.removeChild(Q)}}ap.width=Math.max(Math.ceil(q.convert(h*T)),0);if(g){var U=ad.computedYAdjust;if(U===undefined){var I=ad.get("lineHeight");if(I=="normal"){I="1em"}else{if(!isNaN(I)){I+="em"}}ad.computedYAdjust=U=0.5*(a(ak,I)-parseFloat(ap.height))}if(U){ap.marginTop=Math.ceil(U)+"px";ap.marginBottom=U+"px"}}return C}})());

//]]>
</script>

/*
* jQuery Easing v1.1 - http://gsgd.co.uk/sandbox/jquery.easing.php
*
* Uses the built in easing capabilities added in jQuery 1.1
* to offer multiple easing options
*
* Copyright (c) 2007 George Smith
* Licensed under the MIT License:
*   http://www.opensource.org/licenses/mit-license.php
*/

jQuery.easing = {
easein: function(x, t, b, c, d) {
return c*(t/=d)*t + b; // in
},
easeinout: function(x, t, b, c, d) {
if (t < d/2) return 2*c*t*t/(d*d) + b;
var ts = t - d/2;
return -2*c*ts*ts/(d*d) + 2*c*ts/d + c/2 + b;
},
easeout: function(x, t, b, c, d) {
return -c*t*t/(d*d) + 2*c*t/d + b;
},
expoin: function(x, t, b, c, d) {
var flip = 1;
if (c < 0) {
 flip *= -1;
 c *= -1;
}
return flip * (Math.exp(Math.log(c)/d * t)) + b;
},
expoout: function(x, t, b, c, d) {
var flip = 1;
if (c < 0) {
 flip *= -1;
 c *= -1;
}
return flip * (-Math.exp(-Math.log(c)/d * (t-d)) + c + 1) + b;
},
expoinout: function(x, t, b, c, d) {
var flip = 1;
if (c < 0) {
 flip *= -1;
 c *= -1;
}
if (t < d/2) return flip * (Math.exp(Math.log(c/2)/(d/2) * t)) + b;
return flip * (-Math.exp(-2*Math.log(c/2)/d * (t-d)) + c + 1) + b;
},
bouncein: function(x, t, b, c, d) {
return c - jQuery.easing['bounceout'](x, d-t, 0, c, d) + b;
},
bounceout: function(x, t, b, c, d) {
if ((t/=d) < (1/2.75)) {
 return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
 return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
} else if (t < (2.5/2.75)) {
 return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
} else {
 return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
},
bounceinout: function(x, t, b, c, d) {
if (t < d/2) return jQuery.easing['bouncein'] (x, t*2, 0, c, d) * .5 + b;
return jQuery.easing['bounceout'] (x, t*2-d,0, c, d) * .5 + c*.5 + b;
},
elasin: function(x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
},
elasout: function(x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
},
elasinout: function(x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
},
backin: function(x, t, b, c, d) {
var s=1.70158;
return c*(t/=d)*t*((s+1)*t - s) + b;
},
backout: function(x, t, b, c, d) {
var s=1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
backinout: function(x, t, b, c, d) {
var s=1.70158;
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
},
linear: function(x, t, b, c, d) {
return c*t/d + b; //linear
}
};

//]]>
</script>

jQuery(document).ready(function() {
Cufon.replace('.blogname h2', { fontFamily: 'MankSans-Medium' });
Cufon.replace('.sidetitl,.blogname h1', { fontFamily: 'ChunkFive' });

});

//]]>
</script>

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

.mytext img{
position:absolute;
left:10px;
top:10px;
padding:5px;
background:#515252;
border:1px solid #5e5e5e;
}

.mytext{
position:relative;
margin:0px 0px;
height:200px;
width:680px;
float:left;
display:inline;
line-height:20px;
color:#c4c4c4;
font-family: Tahoma,Georgia,century gothic,Verdana, sans-serif;
}

.mytext ul li{
height:200px;

}

.mytext a:link, .mytext  a:visited {
color:#fff;
}

.mytext h2 {
font: 18px Georgia,century gothic,Verdana, sans-serif;
margin:15px 0px 5px 310px;
font-weight:normal;
width:350px;
height:24px;
overflow:hidden;
}

.mytext p {
width:350px;
margin:0px 0px 5px 310px;
color:#6f6f6f;
}

.mytext h2 a:link, .mytext h2 a:visited {
color:#fff;
}
.slnav{
padding:3px 0px;
background:#000;

}
.prev{
float:left;
width:24px;
height:24px;
z-index:200;
margin-left:5px;
background:url(<span style="color: green;"><strong>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG0EdrnAoCdfPwUHgFtWabAkM5wOqCp5kPkjC4GQQSpy_taNWJQZtf5MCTjyY6tflcx7qW6ACRmg-p4Sbj5g2H3Ail5QqfsdJ1bIX8MEA4IiNeYVWklvMKZt6OC798zymdLw31i9R26FWg/</strong></span>);
}

.next{
float:right;
width:24px;
height:24px;
z-index:200;
background:url(<span style="color: green;"><strong>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYDWgCqlYAmkrTdk0a9HlJhy4ussoHlceRFJZE6fjFUeBN6XeL9NeZDfU6shamHotWiIkD3VFnFH_nitoX8T-SqbAwOTr_VvEX6ZJ-mT979P6tpfHcbq5YuDYCZr01V0YSSWfnQniGtZSb/</strong></span>);
display:block;
}

</style></pre>
<span style="font-weight: bold;">Note</span> : <span style="color: red; font-weight: bold;">Host</span> <span style="color: #009900; font-weight: bold;">prev.png</span> and <span style="color: #009900; font-weight: bold;">nxt.png</span> images yourself.<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgANulOlzdEw7hFwvAKze1ccVyclhVLJAqGj0BYoQcbNvyweLkPZP3SjpCdnyXfAYzpxnZlSqcOpKnN0dtUuo03Btk_LRswFoiMWdjkBIhlwXSmva_uouPhH3USjzpggoYt4dnJxjwkhxE_/s1600-h/nxt.png" style="color: black; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: underline;" title="Host This !!!"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5431738985859702962" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgANulOlzdEw7hFwvAKze1ccVyclhVLJAqGj0BYoQcbNvyweLkPZP3SjpCdnyXfAYzpxnZlSqcOpKnN0dtUuo03Btk_LRswFoiMWdjkBIhlwXSmva_uouPhH3USjzpggoYt4dnJxjwkhxE_/" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; cursor: pointer; height: 24px; width: 22px;" /></a><br />
<table style="clear: both; width: 200pxpx;"><tbody>
<tr><td><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijtsSVgaYuFrhgUTSdd5HZAKsSlErRaTMkSJi1b3Pq3OWipLmrmswNp_-fVtJmI444N-QyO9TbK8UgDeaqw1VmPVGaGaIxwQO22ytaFeR6uP7v-f9Lm7lrd3qONPg4sSHCpCBqmpxUPUK3/s1600-h/prev.png" style="color: black; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: underline;" title="Host This !!!"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5431739052667311154" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijtsSVgaYuFrhgUTSdd5HZAKsSlErRaTMkSJi1b3Pq3OWipLmrmswNp_-fVtJmI444N-QyO9TbK8UgDeaqw1VmPVGaGaIxwQO22ytaFeR6uP7v-f9Lm7lrd3qONPg4sSHCpCBqmpxUPUK3/" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; cursor: pointer; height: 24px; width: 22px;" /></a></td></tr>
</tbody></table>
4.Now go to Layout-->Page Element and click on "Add a gadget".<br />
5.Select "html/java script" and add the code given below and click save.<br />
<pre style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://cdn.bloggertipandtrick.net/wp-content/themes/btt/images/pre_code_bg.gif); background-origin: initial; background-position: 0% 0%; background-repeat: no-repeat repeat; border-bottom-color: black; border-bottom-style: solid; border-bottom-width: 1px; border-left-color: black; border-left-style: solid; border-left-width: 1px; border-right-color: black; border-right-style: solid; border-right-width: 1px; border-top-color: black; border-top-style: solid; border-top-width: 1px; color: black; font-family: 'PT Sans', Arial, sans-serif; height: 300px; line-height: 20px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 35px; padding-right: 5px; padding-top: 5px; width: 638px; word-wrap: normal;"><script type="text/javascript">
var $jx = jQuery.noConflict();
$jx(function() {
$jx(".mygallery").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
     visible: 1,
     easing: "backout",
 speed: 1000
});

});
</script>

<li><div class="mytext"><h2><a href="<span style="font-size: 18px;"><span style="color: #3333ff; font-weight: bold;">URL-of-Post-1</span></span>" title="#"><span style="color: red; font-size: 18px;"><span style="font-weight: bold;">Title-of-Post-1</span></span></a></h2><p><span style="color: #009900; font-size: 18px; font-weight: bold;">Slide 1 Description [...]</span></p>

<img src="<span style="color: #ff6600; font-size: 18px; font-weight: bold;">Slide-1-Image-Address</span>" alt=""  /></div></li>

<li><div class="mytext"><h2><a href="<span style="color: #3333ff; font-size: 18px; font-weight: bold;">URL-of-Post-2</span>" title="#"><span style="color: red; font-size: 18px; font-weight: bold;">Title-of-Post-2</span></a></h2><p><span style="color: #009900; font-size: 18px; font-weight: bold;">Slide 2 Description [...]</span></p>

<img src="<span style="color: #ff6600; font-size: 18px; font-weight: bold;">Slide-2-Image-Address</span>" alt=""  /></div></li>

<li><div class="mytext"><h2><a href="<span style="color: #3333ff; font-size: 18px; font-weight: bold;">URL-of-Post-3</span>" title="#"><span style="color: red; font-size: 18px; font-weight: bold;">Title-of-Post-3</span></a></h2><p><span style="color: #009900; font-size: 18px; font-weight: bold;">Slide 3 Description</span> [...]</p>

<img src="<span style="color: #ff6600; font-size: 18px; font-weight: bold;">Slide-3-Image-Address</span>" alt=""  /></div></li>

<li><div class="mytext"><h2><a href="<span style="color: #3333ff; font-size: 18px; font-weight: bold;">URL-of-Post-4</span>" title="#"><span style="color: red; font-size: 18px; font-weight: bold;">Title-of-Post-4</span></a></h2><p><span style="color: #009900; font-size: 18px; font-weight: bold;">Slide 4 Description [...]</span></p>

<img src="<span style="color: #ff6600; font-size: 18px; font-weight: bold;">Slide-4-Image-Address</span>" alt=""  /></div></li>

<li><div class="mytext"><h2><a href="<span style="color: #3333ff; font-size: 18px; font-weight: bold;">URL-of-Post-5</span>" title="#"><span style="color: red; font-size: 18px; font-weight: bold;">Title-of-Post-5</span></a></h2><p><span style="color: #009900; font-size: 18px; font-weight: bold;">Slide 5 Description [...]</span></p>

<img src="<span style="color: #ff6600; font-size: 18px; font-weight: bold;">Slide-5-Image-Address</span>" alt=""  /></div></li>

</ul>

</div></div>

</div></pre>
<span style="font-size: 18px;">Note</span> : <span style="color: #3333ff; font-size: 18px; font-weight: bold;">Replace URL-of-Post-X</span> , <span style="color: red; font-size: 18px; font-weight: bold;">Title-of-Post-X</span> , <span style="color: #009900; font-size: 18px; font-weight: bold;">Slide X Description [...]</span> , <span style="color: #ff6600; font-size: 18px; font-weight: bold;">Slide-X-Image-Address</span>with your content.<br />
Use <span style="color: #993399; font-weight: bold;">width=270px</span> and <span style="color: #993399; font-weight: bold;">height=170px</span> images for your slides.<br />
And also you can add many more slide to this widget.<br />
<span style="color: #cc33cc;">For example</span>look at the code below:<br />
<pre style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://cdn.bloggertipandtrick.net/wp-content/themes/btt/images/pre_code_bg.gif); background-origin: initial; background-position: 0% 0%; background-repeat: no-repeat repeat; border-bottom-color: black; border-bottom-style: solid; border-bottom-width: 1px; border-left-color: black; border-left-style: solid; border-left-width: 1px; border-right-color: black; border-right-style: solid; border-right-width: 1px; border-top-color: black; border-top-style: solid; border-top-width: 1px; color: black; font-family: 'PT Sans', Arial, sans-serif; height: 250px; line-height: 20px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 35px; padding-right: 5px; padding-top: 5px; width: 638px; word-wrap: normal;"><script type="text/javascript">
var $jx = jQuery.noConflict();
$jx(function() {
$jx(".mygallery").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
     visible: 1,
     easing: "backout",
 speed: 1000
});

});
</script>

<li><div class="mytext"><h2><a href="#" title="#">Avatar (2009 film)</a></h2><p>James Cameron's epic motion picture, Avatar - in cinemas December 18th worldwide. In the epic action adventure AVATAR, James Cameron, the director of "Titanic," takes us to a spectacular new world beyond our imagination. On the distant moon Pandora, a reluctant hero embarks on a journey of redemption and discovery as he leads a heroic battle to save a civilization. [...]</p>

<li><div class="mytext"><h2><a href="#" title="#">2012 Movie</a></h2><p>The film briefly references Mayanism, the Mesoamerican Long Count calendar, and the 2012 phenomenon in its portrayal of cataclysmic events unfolding in the year 2012. Because of solar flare bombardment the Earth's core begins heating up at an unprecedented rate, eventually causing crustal displacement. This results in an onslaught of Doomsday event scenarios plunging [...]</p>

<li><div class="mytext"><h2><a href="#" title="#">I am Legend Movie</a></h2><p>The film briefly references Mayanism, the Mesoamerican Long Count calendar, and the 2012 phenomenon in its portrayal of cataclysmic events unfolding in the year 2012. Because of solar flare bombardment the Earth's core begins heating up at an unprecedented rate, eventually causing crustal displacement. This results in an onslaught of Doomsday event scenarios plungingThe novel's main character is Robert Neville, apparently the sole survivor of a pandemic the symptoms of which resemble vampirism. The author details Neville's [...]</p>

<li><div class="mytext"><h2><a href="#" title="#">Transformer Movie</a></h2><p>Transformers is a 2007 live-action-thriller film adaptation of the Transformers franchise, directed by Michael Bay and written by John Rogers, Roberto Orci and Alex Kurtzman. It stars Shia LaBeouf as Sam Witwicky, a teenager involved in a war between the heroic Autobots and the evil Decepticons, two factions of alien robots who can disguise themselves by transforming into everyday machinery. The Decepticons desire control of the All Spark, the object that created their robotic race, with the intention of using it to build [...]</p>

<li><div class="mytext"><h2><a href="#" title="#">Max Payne Game</a></h2><p>Max Payne is a BAFTA award winning[1] third-person shooter video game developed by Finnish Remedy Entertainment, produced by 3D Realms and published by Gathering of Developers in July 2001 for Windows. Ports later in the year for the Xbox, PlayStation 2 and the GameBoy Advance were published by Rockstar Games. A Macintosh port was published in July 2002 by MacSoft in[...]</p>

</ul>

</div></div>

</div></pre>
Now you are done.<br />
</div>

How To Add Featured Post Content Slider to Blogger

This is very smart featured post content slider for your blogger blog or any other site.You can easily add or remove slides to this widget...

HOW TO ADD AUTO ‘READ MORE’ FEATURE WITH THUMBNAILS

<div dir="ltr" style="text-align: left;" trbidi="on">
<span class="Apple-style-span" style="color: #000222; font-family: 'PT Sans', Arial, sans-serif; font-size: 14px; line-height: 20px;"></span><br />
This nice trick will automatically create post summaries with thumbnails. You don't need to add any extra code in every blogger post that you make.<br />
<strong>Tutorial Updated : Jan 1, 2013</strong><br />
1.Go to "Template" --> "Edit HTML" of your blog.<br />
2.Click on "<span style="color: #3333ff;">Expand Widget Templates</span>"<br />
3.Scroll down to where you see <span style="color: red; font-weight: bold;"></head></span> tag.<br />
4.Now add below code just <span style="color: #3333ff;">before</span> <span style="color: red;"></head></span> tag.<br />
<pre style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://cdn.bloggertipandtrick.net/wp-content/themes/btt/images/pre_code_bg.gif); background-origin: initial; background-position: 0% 0%; background-repeat: no-repeat repeat; border-bottom-color: black; border-bottom-style: solid; border-bottom-width: 1px; border-left-color: black; border-left-style: solid; border-left-width: 1px; border-right-color: black; border-right-style: solid; border-right-width: 1px; border-top-color: black; border-top-style: solid; border-top-width: 1px; color: black; font-family: 'PT Sans', Arial, sans-serif; height: 350px; line-height: 20px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 35px; padding-right: 5px; padding-top: 5px; width: 638px; word-wrap: normal;"><script type='text/javascript'>
summary_noimg = 250;
summary_img = 200;
img_thumb_height = 150;
img_thumb_width = 150; 
</script>
<script type='text/javascript'>
//<![CDATA[

function createSummaryAndThumb(pID){
 var div = document.getElementById(pID);
 var imgtag = "";
 var img = div.getElementsByTagName("img");
 var summ = summary_noimg;
 if(img.length>=1) { 
  imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
  summ = summary_img;
 }

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
 div.innerHTML = summary;
}

//]]>
</script></pre>
<span style="font-weight: bold;">Note :</span> You can change below values as your choice.<br />
<span style="color: magenta;"><strong>summary_noimg</strong></span> : number of character to display when there is no image.<br /><span style="color: magenta;"><strong>summary_img</strong></span> : number of character to display when there is an image.<br /><span style="color: magenta;"><strong>img_thumb_height</strong></span> : hight of the post thumbnails.<br /><span style="color: magenta;"><strong>img_thumb_width</strong></span> : width of the post thumbnails.<br />
5.Now Scroll down to where you see this:<br />
<pre style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://cdn.bloggertipandtrick.net/wp-content/themes/btt/images/pre_code_bg.gif); background-origin: initial; background-position: 0% 0%; background-repeat: no-repeat repeat; border-bottom-color: black; border-bottom-style: solid; border-bottom-width: 1px; border-left-color: black; border-left-style: solid; border-left-width: 1px; border-right-color: black; border-right-style: solid; border-right-width: 1px; border-top-color: black; border-top-style: solid; border-top-width: 1px; color: black; font-family: 'PT Sans', Arial, sans-serif; line-height: 20px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 35px; padding-right: 5px; padding-top: 5px; text-align: center; width: 655px; word-wrap: normal;"><data:post.body/></pre>
6.<span style="color: red;">Replace</span> above code with below code.<br />
<pre style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://cdn.bloggertipandtrick.net/wp-content/themes/btt/images/pre_code_bg.gif); background-origin: initial; background-position: 0% 0%; background-repeat: no-repeat repeat; border-bottom-color: black; border-bottom-style: solid; border-bottom-width: 1px; border-left-color: black; border-left-style: solid; border-left-width: 1px; border-right-color: black; border-right-style: solid; border-right-width: 1px; border-top-color: black; border-top-style: solid; border-top-width: 1px; color: black; font-family: 'PT Sans', Arial, sans-serif; height: 350px; line-height: 20px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 35px; padding-right: 5px; padding-top: 5px; width: 655px; word-wrap: normal;"><b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div style='float:right;margin-right:10px;margin-top:5px;'>
<a expr:href='data:post.url'>Read More</a>
</div>
</b:if>
</b:if></pre>
7.Now save your template and you are done.<br />
</div>

HOW TO ADD AUTO ‘READ MORE’ FEATURE WITH THUMBNAILS

This nice trick will automatically create post summaries with thumbnails. You don't need to add any extra code in every blogger post t...