Advertisements

How To Add Featured Post Content Slider to Blogger

Posted on January 4th, 2013 File Under : css, html, jquery, widget81 Comments

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.You can see the demo of this widget HERE.

Tutorial updated : Jan 4, 2013

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

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

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

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

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

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>

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

/*
* 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>

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

/*
* 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>

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

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

});

//]]>
</script>

<style type='text/css'>
#slidearea{
height: 230px;
overflow: hidden;
position: relative;
width:680px;
background:#242424;
}
#gallerycover{
overflow: hidden;
margin:0px 0px;
}

.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(http://1.bp.blogspot.com/_4HKUHirY_2U/S2FVY1DGRHI/AAAAAAAAAtc/BZkCromQU-I/prev.png);
}

.next{
float:right;
width:24px;
height:24px;
z-index:200;
background:url(http://4.bp.blogspot.com/_4HKUHirY_2U/S2FVWGJQahI/AAAAAAAAAtU/l-hiX3uOqBo/nxt.png);
display:block;
}

</style>

Note : Host prev.png and nxt.png images yourself.

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

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

<script type="text/javascript">
var $jx = jQuery.noConflict();
$jx(function() {
$jx(".mygallery").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
     visible: 1,
     easing: "backout",
 speed: 1000
});

});
</script>

<div id="slidearea">

<div id="gallerycover"><div class="mygallery"><ul>

<li><div class="mytext"><h2><a href="URL-of-Post-1" title="#">Title-of-Post-1</a></h2><p>Slide 1 Description [...]</p>

<img src="Slide-1-Image-Address" alt=""  /></div></li>

<li><div class="mytext"><h2><a href="URL-of-Post-2" title="#">Title-of-Post-2</a></h2><p>Slide 2 Description [...]</p>

<img src="Slide-2-Image-Address" alt=""  /></div></li>

<li><div class="mytext"><h2><a href="URL-of-Post-3" title="#">Title-of-Post-3</a></h2><p>Slide 3 Description [...]</p>

<img src="Slide-3-Image-Address" alt=""  /></div></li>

<li><div class="mytext"><h2><a href="URL-of-Post-4" title="#">Title-of-Post-4</a></h2><p>Slide 4 Description [...]</p>

<img src="Slide-4-Image-Address" alt=""  /></div></li>

<li><div class="mytext"><h2><a href="URL-of-Post-5" title="#">Title-of-Post-5</a></h2><p>Slide 5 Description [...]</p>

<img src="Slide-5-Image-Address" alt=""  /></div></li>

</ul>

<div class="clear"></div>

</div></div>

<div class="slnav"><a href="#" class="prev"></a><a href="#" class="next"></a><div class="clear"></div></div>

</div>

Note : Replace URL-of-Post-X , Title-of-Post-X , Slide X Description [...] , Slide-X-Image-Address with your content.

Use width=270px and height=170px images for your slides.

And also you can add many more slide to this widget.

For examplelook at the code below:

<script type="text/javascript">
var $jx = jQuery.noConflict();
$jx(function() {
$jx(".mygallery").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
     visible: 1,
     easing: "backout",
 speed: 1000
});

});
</script>

<div id="slidearea">

<div id="gallerycover"><div class="mygallery"><ul>

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

<img src="http://1.bp.blogspot.com/_4HKUHirY_2U/S2FWzuNvBBI/AAAAAAAAAts/ijNwX4Ei-O4/avatar.jpg" alt="" /></div></li>

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

<img src="http://3.bp.blogspot.com/_4HKUHirY_2U/S2FYyPWHTJI/AAAAAAAAAt0/kNXA5auZ65k/2012+movie.jpg" alt="" /></div></li>

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

<img src="http://1.bp.blogspot.com/_4HKUHirY_2U/S2FdlLmVmsI/AAAAAAAAAt8/ERw6PcL-tsE/iamlegend1.jpg" alt="" /></div></li>

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

<img src="http://4.bp.blogspot.com/_4HKUHirY_2U/S2Fdo2TdCpI/AAAAAAAAAuE/txvdowislx8/transformer11.jpg" alt="" /></div></li>

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

<img src="http://4.bp.blogspot.com/_4HKUHirY_2U/S2FfKKAoNMI/AAAAAAAAAuM/bzIRya9LZBI/Max_Payne1.jpg" alt="" /></div></li>

</ul>

<div class="clear"></div>

</div></div>

<div class="slnav"><a href="#" class="prev"></a><a href="#" class="next"></a><div class="clear"></div></div>

</div>

Now you are done.

File Under : css, html, jquery, widget

81 Responses to “How To Add Featured Post Content Slider to Blogger”

  1. Beben says:

    awesome...
    so smooth moving

  2. Daniel White says:

    Thanks, this will be useful for me when/if I ever start making some blogger templates myself.

    The slider is great for magazine and photolog type templates.

  3. Katie says:

    Hi there! I'm trying to help a friend out by inserting this onto her blog and it's just not quite working for me. I'm hoping you can see what we've done wrong. Her blog is at: http://mommyhoodunscripted.blogspot.com/

  4. Blogger Tips And Tricks|Latest Tips For Bloggers says:

    Find this code:

    .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;
    }

    Now replace it with below code:

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

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

  5. April says:

    AHHH yes it did work, thank you so much ! and thanks katie for helping me out!

  6. April says:

    Hey ok if you guys could please help me out... my blog is http://mommyhoodunscripted.blogspot.com well the slider is working great but my words are getting cut off and i can't seem to figure out how to fix it or what to change and no one else seems to know either...would love the help...thanks so much!!!

  7. Blogger Tips And Tricks|Latest Tips For Bloggers says:

    To Apirl,

    I check your template.Change your CSS code as below.

    <style type='text/css'>
    #slidearea{
    height: 230px;
    overflow: hidden;
    position: relative;
    width:598px;
    background:#242424;
    }
    #gallerycover{
    overflow: hidden;
    margin:0px 0px;
    }

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

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

    .mytext{
    position:relative;
    margin:0px 0px;
    height:200px;
    width:590px;
    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 10px 5px 300px;
    font-weight:normal;
    width:270px;
    height:24px;
    overflow:hidden;
    float:right;
    }

    .mytext p {
    width:270px;
    margin:0px 10px 5px 300px;
    color:#6f6f6f;
    float:right;
    text-align:justify;
    }

    .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(http://i227.photobucket.com/albums/dd163/kroets/Copyofprev.png);
    }

    .next{
    float:right;
    width:24px;
    height:24px;
    z-index:200;
    background:url(http://i227.photobucket.com/albums/dd163/kroets/Copyofnxt.png);
    display:block;
    }

    </style>

  8. April says:

    Thank you so much! I changed the code to what you listed and now everything is working fine!!! Your a life saver :)

    *Have a great day*

  9. psydex says:

    Marvelous!
    One question ... What line should i edit to change it's dimentions?
    I wan't it a bit widther (about 700 px.) with same heigh

  10. psydex says:

    Never mind i found how to change the dimentions of the slider :)
    But i have another question ! How to add to it 1px. white border?

  11. psydex says:

    How can i make it to scroll automaticly in 3 sec. for example?

  12. Eric says:

    I'm attempting to change the box size to be larger - I like the image height to be around 400. The problem I have is the arrow bar is still set at the height 200. You can see what I attempted to do here : http://werestillboring.blogspot.com/

    Basically I love the idea of the sliding menu - just wanted it to be bigger. Any suggestions ?

    Thank you !

  13. BB says:

    Hi All,

    This is absolutely brilliant! I resized to fit on my page, and looks great.
    I have the same question as psydex though. Is there a way to code the slider to automatically rotate every 5 seconds or so?

  14. Sreejesh says:

    Can you use feeds to auto update the contents?? adding each link is painful :(

  15. Blogger Tips And Tricks|Latest Tips For Bloggers says:

    Sureejesh read article below:

    http://www.bloggertipandtrick.net/2009/11/featured-contentrecent-post-slider.html

  16. psydex says:

    @Sreejesh theres no way to add news via feed!
    The only way is manualy!

  17. Harsh says:

    I made it to work absolutely fine on my blog by changing widget width and setting overflow of title to false. I made 270x170 images separately for it because my posts images are of different sizes. Check out - http://harsh-techtalk.blogspot.com/

  18. dJumTKS says:

    good information, whether able to modify the ad and run in auto slider?

  19. dJumTKS says:

    good information, whether able to modify the ad and run in auto slider?

  20. GameRumble says:

    Thanks! Currently trying this out and is working right now. Just adding a few tweaks!

    http://www.game-rumble.com/

  21. Internet Inspired says:

    This works really great! Thanks!
    You can check mine out at http://www.datemedammit.com

  22. Anonymous says:

    How can i make it scroll automaticaly after a few seconds?

  23. maishee says:

    this is so cool, but is it possible that the slider will show the number of slides it has? http://pinoymoneybox.blogspot.com/

  24. Anonymous says:

    Nice!

  25. PICTURELOCK says:

    Hay I cannot seem to get this to work with a modified Minera template, any chance you could check my coding?
    Emmet.

  26. Admin says:

    Hi Friend this is kv,
    I would like to know ,how to make this as atomic slider.(means ex.for every 2sec it should scroll)
    Please give me the script,
    My mail id is kv_kvs@yahoo.com

  27. Christina says:

    Is there any way to make it scroll automatically???

  28. Aditya Kumar Nayak says:

    I am not able to change the slider width. Please help me out. It is at

    www.awakeningindianstoindia.in

  29. james says:

    dear btip&trick admin

    i want a reference from you .i want a sliding menu for my blog to link some pages from home page

    here i the image of what i want

    http://www5.picturepush.com/photo/a/3478573/img/Anonymous/NewPicture073.png

    please suggest something very same to what i am requesting

    thanks for your support

  30. Sam says:

    Hi, please help me out to insert this slider into my template.. i tried but its not going through.

    www.anime-rocks.com

  31. admin [free21cineplex] says:

    please help me... the title doesn't appear
    my blog
    http://free21cineplex.blogspot.com/

  32. Ricky Payne says:

    Can you please help me? I have put this onto my site and for some reason the slider does not appear.. my website is here

    http://www.tubeworm.org

  33. Anonymous says:

    How can I resize the board of slide? Mine block size to put it into just 200. Thanks bro

  34. AndroidPhilip says:

    so i have to change the code everythime i want to change what posts are featured? and how do i host the images my self?

  35. Naren Dran says:

    how to resize this widget?

  36. Blogger Tips And Tricks|Latest Tips For Bloggers says:

    @Naren Dran

    Change width and height properties in this code:

    <style type='text/css'>
    #slidearea{
    height: 230px;
    overflow: hidden;
    position: relative;
    width:680px;
    background:#242424;
    }
    #gallerycover{
    overflow: hidden;
    margin:0px 0px;
    }

    .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(http://1.bp.blogspot.com/_4HKUHirY_2U/S2FVY1DGRHI/AAAAAAAAAtc/BZkCromQU-I/prev.png);
    }

    .next{
    float:right;
    width:24px;
    height:24px;
    z-index:200;
    background:url(http://4.bp.blogspot.com/_4HKUHirY_2U/S2FVWGJQahI/AAAAAAAAAtU/l-hiX3uOqBo/nxt.png);
    display:block;
    }

    </style>

    First try this slider in a test blog changing widths and heights.After that add it to your original blog.

  37. Damion Schweizer says:

    I'm not sure what I'm doing incorrectly but I'm unable to get the prev and next buttons to show up on the slider. Any ideas?

  38. Damion Schweizer says:

    Ok so what I'm trying to do is make it the size of width 760 by 150 but when I change the size of the height it makes the arrows disappear. How do I fix that issue.

  39. Damion Schweizer says:

    I finally have it up and working. If you want to check it out you can. http://damionscsav.blogspot.com/

  40. Mamun says:

    hey please help me my Slide show show all of my page but i want to just show in Homepage ??how i can >>please help me quick

  41. Blogger Tips And Tricks|Latest Tips For Bloggers says:

    @Mamun

    Read this:

    http://www.bloggertipandtrick.net/2009/05/how-to-show-blogger-widgets-in-homepage.html

  42. !i! KSAK !i! says:

    this widget works excellent, but when i open the post, the slider is still visible, it should not be there, how to make it visible only at MAIN PAGE? please

  43. Z-worriors says:

    Work nicely on my Site!

    thanks

  44. Blogger Tips And Tricks|Latest Tips For Bloggers says:

    @!i! KSAK !i!

    Follow the instructions given here:

    http://www.bloggertipandtrick.net/2009/05/how-to-show-blogger-widgets-in-homepage.html

  45. Mick Turner says:

    hi, here is a demo of the featured slider : http://www.healthpub.co.cc/

    But I have question, how can I make the slides change automatically?

    /Mick

  46. ShilpV says:

    I liked it and am using it, thanks. Just one question, is it supposed to auto-scroll? If yes, then I cant understand why it is not doing so in my case. Can you help? Cheers!

  47. Blogger Tips And Tricks|Latest Tips For Bloggers says:

    @ShilpV

    This slider is not auto-scroll.

  48. TwistedTool says:

    Hello Lasantha. Thanks a lot for this simple and very useful gadget!

    I only had to make minor changes so the width would fit with my blog and now it's just perfect!

    You are invited to have a look at it and tell me your opinion (although you won't understand a lot from the texts, because it's a greek blog!)

    Here is the link: http://atwistedblog.blogspot.com/

    Thanks again!

  49. imusics says:

    How Can I move the title more to the right? it's like this http://sudgodrama.blogspot.com/ PLEASE HELP!

  50. LMG says:

    This is a great slider. Is there anyway where can only appear on the homepage? Thanks.

  51. Prass says:

    awesome..thx

  52. Blogger Tips And Tricks|Latest Tips For Bloggers says:

    @LMG

    follow the steps here:

    http://www.bloggertipandtrick.net/2009/05/how-to-show-blogger-widgets-in-homepage.html

  53. ariel.s says:

    hello, i am currently in the process of redesigning my blog page and tried to add this beautiful slider, but it doesn't seem to be working correctly. can you please check my CSS at the test site and let me know what you think? http://www.chromewavesradiotest.blogspot.com

    thank you!

  54. Amir Emami says:

    Hello blogger tips and tricks, this article is great , but unfortunately it doesnt work fine on my homepage. I dont know whats wrong. I can c the avatar pic with description just for seconds and it disappears suddenly. please and please check my html and homepage and tell me whats wrong with my template. I will appreciate it. God Bless u Dude :)
    http://www.7zero-fa.blogspot.com/

  55. Self Sagacity says:

    Hello, how do you change the font? Not the header but the description? I would like it to be a bit bigger and more readable. How do you change the back ground so that it isn't grey?

    Thank you! This tutorial is awesome.

  56. Sarfaraz Ahmed Abbasi says:

    Can You Please Help Me
    I Want This To Play (Move Slide 1 To Slide 2 To Slide 3 Automatically Even Without Clicking Next And Previous Buttoons) (Those Buttons Can Be Optional)

  57. Jobs says:

    Voy a probar este script aver si sale bien

  58. Anees says:

    hello bro! i have added it on my website http://www.learneveryone.com . I have done all setting to fit it in my template but there is still a problem, when page loads, it shows two posts merged in one another and after few seconds everything goes fine.. dont know how to solve this stupid problem.. please have a look at my blog and tell me how can I fix this... waiting for your reply..
    Bundles of thanks in advance

  59. Dav7 says:

    Everyone ask but no one can make it scroll automatically :(

    Still hopping to read a way to do it ;)

  60. Destiny Calling says:

    Hi,
    I am using a revolution code-red template. View it here. www.tooth-n-nail.blogspot.com. Is there any option I can use your featured article slider for this. Please advise.
    Raj Nair

  61. admin says:

    Hi could you please take a look at my blog www.thegamblinghub.net. The widget is not working, I must have something missing as the arrows are missing.

  62. SD says:

    Hello BT:

    Its just excellent!

    I've tried to implement it...but having some problem when I add the html/javascript widget at the top of my blog, below the header. It looks the top 1-2 rows of the slider not getting displayed and the color is also not ok. But the same slider html code is put at the bottom of the blog, just above the footer...its works perfect.

    Just go to my test blog....and check both the sliders - top one & the bottom one. And let me know what to be done to make it perfect at the top. PLEASE DO REPLY AND BTW I'M USING BLOGGER'S DESIGNER TEMPLATE - SIMPLE.

    Thanks in advance....

    Regards,
    SD - a new blogger

  63. THE BIRTH of PNG POSITIVE says:

    Hi,

    I followed your step for the post slide and still my image is not appearing...I am using Vetro Template.No matter how i try to change the URL from my photobucket url..the image is still not visible...

    Also what is the difference between "url" and "the image address"

    I have removed the slider but I want it back with my slider image...please visit the site and advise me

    http://pngpositive.blogspot.com

  64. Jeya Karthika Pandian Umapathy says:

    Hi.. The slider works fine except for the post title.. Could you pls chk my blog http://formeuandus.blogspot.com/ and kindly let me know whats wrong..

  65. crossthelimit says:

    I add the carousel on my blog but I cannot see the title of the post preview

    Can you help me pls?

    http://crossingthelimits.blogspot.com/

  66. Azhar Nadeem says:

    I have a Featured content slider as part of my Blogger template. However I have to manually update the slider area reagarding Image, URL and snippet. It there a way to align/Associate the slider are with Featured posts widget

  67. axcel says:

    can you help me with the css codes of the featured content sideshow in my blog please? I got my template at PBR but they only give the script.

  68. Shanjei says:

    GREAT!! Thanks a lot!

  69. Lady says:

    Thankyou very much, I used this on my blog :)

  70. Itender Rawat says:

    Thanks for this admin. Its very cool slide!

  71. New Gamer Nation says:

    I used this on my blog thanks for everything

  72. AtoniBay says:

    Hey bro thanks for these it adds a little flavor to my blog :)

  73. wh1tepix says:

    do you know, how can this slider move automatically every X seconds ??
    thanks !

  74. haseeb riaz says:

    hi i have tried it but didnt work for me can u do some xml editing ........................plz visit my blog and see the slider i cannot edit the text in the featured post...thanks

  75. Jube says:

    awesome...
    so smooth moving

  76. Habisst says:

    Thanks for this Tut. Its very cool slide! But, I want add Featured Post Content Slider like website: http://www.exphim.com
    Please help me!
    Thanks!

  77. Reyn says:

    Is this working for Tumblr blog?

  78. Jackson Oh says:

    Hi,

    I have just used your code to insert a slider on my own blog (http://licence2speed.blogspot.com). Fantastic! It works like a charm. Thank you very much, appreciate it!

  79. mathrealm says:

    Good day!
    I just would like to ask help from you regarding my content slider. There is an overlap on the lower part. The image comes from one of the thumbnails. I dont know how to fix it. Please help me.... please....
    Thank you in advance!

Leave a Reply