Cara membuat slider di blog

Alhamdulilah akhirnya postingan berlanjut. Lagi-lagimengenai gambar slide di bawah header, yah soalnya ini lagi ngetrend di kalangan blogger untuk memperindah blog. Setelah pada postingan sebelumnya saya menulis tentang memasang gambar slide alaZinmag Primus kali inisayaakanmemberikan tutorial caramemasanggambar slide ala Drakon template. Pada dasarnya fungsi dari gambar slide ini sama dengan Zinmag Primus, perbedaannya jika pada Zinmag Primus gambar itu ditampilkan satu persatu secara otomatis, maka di Drakon template inigambar yang ditampilkan ada beberapa sesuai dengan lebar template yang kita pakai, dan kita harus meng-klik tombol previous atau next untuk menampilkan gambar selanjutnya. Untuk lebih jelasnya temen-temen bisa lihat disini atau langsung saja pada Drakon template yang ada di situs template gratis.

Kira-kira tampilannya seperti gambar di atas. Untuk mencobanya silahkan ikuti tutorialnya :
Pertama :
Login ke Blogger

Kedua:
Masuk ke Rancangan >> Edit HTML
Jangan lupa backup dahulu templete anda

Ketiga :
Letakkan kode berikut sebelum kode ]]><b:skin>

#slidearea{

height:150px;

overflow:hidden;margin:-20px 0px 0 2px;

position:relative;

width:965px;

background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4fnwNWtqv7d5tbT-yffVwVWWBm0ELj0wP35IMFKbw_Q9pxwZElorx3jRP4HoqQBVt5Niqx1Th91oA3qCavzeO1p1rLlYhCbIrMcBva9bYvZkzTi3ffH3InqCX6xrovyoVoacFbv_0aM-S/s0/header-background.png) repeat-x;

border:5px ridge #052844;

}

#gallerycover{

overflow:hidden;

margin:9px 20px 0 32px;

width:920px;

}

.mygallery{

overflow:hidden;

position:relative;

}

.mytextimg{

float:left;

}

.mytext{

position:relative;

margin:0 5px 0 5px;

width:170px;

height:210px;

display:inline;

float:left;

color:#c4c4c4;

}

.inpost{

position:absolute;

top:0;

left:0;

width:250px;

background:#fff;

}

.mytext {

padding:5px 0;

color:#000;

width:170px;

font-size:12px;

font-weight:bold;

}

.mytext h4 a:link,.mytext h4 a:visited{

color:#000;

text-shadow: 0px 1px 0px #efefef;

}

.mytextp{

padding:0 0;

color:#555;

font-size:12px;

line-height:20px;

width:170px;

text-shadow:1px 1px 0 #f6f6f6;

}

.prevb{

float:left;

width:24px;

height:24px;

z-index:200;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB_Rx0O3omeUTJP5DDfikj_i3IyWBQpLnan-v-Vp7ea1ymwKvOoeZ1YrpIdLZT-X_GS0yjPHCg7X1aWX9t0cqMnaQXwTMClzethNUbFS9-GQEE7pj-t33vZjom7X9KsfMlyfrKHj7U6s8/s1600/back+demomaskolis.gif);

position:absolute;

left:5px;bottom:65px;

}

.nextb{

float:right;

width:24px;

height:24px;

z-index:200;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoMxRnbU9FqAhkvu89WnEYZWg5Tp8VEZublBxq4og61r1hOuqUb1djv7oPye488Ox2_WD9Y0B7Fbe6ygmASToouP0cp9c3UjVye-G-IyNntCnc3lYidyWzFLFylzwXrQm8P-XIYLb7Dh4/s1600/prev+demomaskolis.gif);

position:absolute;

right:5px;

bottom:65px;

display:block;

}

KEDUA

Masihpadaposisi Edit HTML.Letakkankodeberikut di bawahkode ]]></b:skin>.ataudiatas</head>

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

varts = 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;

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

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

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

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

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;pj=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>

Ketiga :
Letakkan Kode berikut tepat di bawah kode <div id='content-wrapper'> atau tempat yang lainnya

var $jx = jQuery.noConflict();

$jx(function() {

$jx(".mygallery").jCarouselLite({

btnNext: ".nextb",

btnPrev: ".prevb",

visible: 5,

speed: 1000,

easing: "backout"

});

</script>

<ul>

<li>

</a>

<p align='center'><a href='SLIDE-1-LINK-HERE'>Norah Jones Lyrics</a></p>

</div>

</li>

<li>

</a>

<p align='center'><a href='SLIDE-1-LINK-HERE'>Sade Lyrics</a></p>

</div>

</li>

<li>

</a>

<p align='center'><a href='SLIDE-1-LINK-HERE'>Basia Lyrics</a></p>

</div>

</li>

<li>

</a>

<p align='center'><a href='SLIDE-1-LINK-HERE'>Jamiroquai Lyrics</a></p>

</div>

</li>

<li>

</a>

<p align='center'><a href='SLIDE-1-LINK-HERE'>Jamie Cullum Lyrics</a></p>

</div>

</li>

<li>

</a>

<p align='center'><a href='SLIDE-1-LINK-HERE'>Diana Krall Lyrics</a></p>

</div>

</li>

<li>

</a>

<p align='center'><a href='SLIDE-1-LINK-HERE'>Sting Lyrics</a></p>

</div>

</li>

</ul>

</div>

</div>

Keterangan :
Silahkan Anda Edit Tulisan yang berwarna Orange dari kode di atas

Keempat :
Simpan Templete Anda

Terakhir :
Selamat Mencoba dan jangan lupa tinggalkan komentarnya ya.

Label: Blog

Cara membuat slider di blog

Posting Komentar

Daftar Isi

Butuh IT Consultan? Klik Aja

Random Post