.: Cara Membuat dan Memasang Content Slider di Blogger

Banyak fitur untuk mempermanis blog. Salah satunya, featured content slider (FCS). Ibarat toko, FCS adalah etalase di mana kita bisa memajang konten yang dirasa ‘menjual’. Berikut ini cara membuat featured content slider.

Sekarang masuk ke tutorialnya:
1. Masuk ‘Layout’-->‘Edit HTML’, centang ‘Expand Template Widget’ (jangan lupa backup dulu untuk jaga-jaga).

2. Cari kode </head>

3. Tambahkan kode berikut ini di atasnya.

Login ke Blogger
Rancangan/Layout
Edit HTML lalu centang Expand Widget Template
Cari kode <head>
Copas kode dibawah ini tepat sebelum tag <head>

//<![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>

//<![CDATA[

* Licensed under the MIT license.

* @version 1.02

//]]>

</script>

//<![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

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

//<![CDATA[

jQuery(document).ready(function() {

Cufon.replace('.blogname h2', { fontFamily: 'MankSans-Medium' });

Cufon.replace('.sidetitl,.blogname h1', { fontFamily: 'ChunkFive' });

});

//]]>

</script>

#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyCZn9zMpSfvTRanbBC1COrZmRWv3UYDaSu92W8N4tgttHUEQWrw-6ghijO3MN1KZ_m47x9_e-vXx_uX4ttP-IWZWrRxWZWS2M2f_d_lZoTYO1Na-BalWyvd2J5tXVDSxcKmBQMsPAcPl7/);

}

.next{

float:right;

width:24px;

height:24px;

z-index:200;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiisKKFnrhVzYUTnD9OV9TnsjFzNvO-uEhftTt8u7pQ8ZU654gFuumLHCww2Xurhq1hZ7bYxumvDK7cEmx21YGVH7QPpJhnhvEL0W0NL2gRUvW7_4kAGjMPyQEel6ye3gOuCAMj18X8Gb9W/);

display:block;

}

</style>

Kode CSS diatas bisa diganti sesuai keinginan.
Lalu Save Templatenya!
Pergi ke Layout/Rancangan
Add a Gadget / Tambah Gadget
Pilih HTML/Javascript
Copas kode dibawah ini :

Kode berwarna merah diatas, silahkan dirubah dengan keinginan anda.
SAVE / SIMPAN!
Lihat Hasilnya

(*)

.

Flash news

Ebook Buat Blog Gratisan

Alarm Pengingat Internet Koneksi ver. 1.0

Free Download Screensaver Robot Transformer

Rabu, 24 November 2010

Cara Membuat dan Memasang Content Slider di Blogger

Tidak ada komentar:

Posting Komentar

Pengikut