MEMBUAT SLIDER POSTING (GAMBAR) ALA DRAKON TEMPLATE
DUNIA BLOG kali ini akan mencoba mengupas tips-trik blogging khusus modifikasi template, yaitu membuat Slider Posting (gambar) ala Drakon Template, yang mana widget ini (menurut DUNIA BLOG) berfungsi untuk mengiformasikan kepada pengunjung/visitor tentang artikel-artikel (posting) blog yang telah terrsedia. Disamping itu, widget ini pun mampu untuk menambah kualitas tampilan web/blog yang kita miliki. Perhatikan gambar di bawah ini.
Bilamana anda ingin lebih jelas, anda dapat langsung menuju ke sini.
Pembuatan slider-widget ini setidaknya membutuhkan 3 tahap yang berurutan, sebagaimana akan diuraikan berikut ini :
TAHAP PERTAMA
Login ke blogger dengan akun anda >> klik Tata Letak >> pilih Edit HTML >> Backup dulu template anda dengan mengklik Download Template Lengkap.
Letakkan kode berikut di atas kode ]]></b:skin>
TAHAP PERTAMA
Login ke blogger dengan akun anda >> klik Tata Letak >> pilih Edit HTML >> Backup dulu template anda dengan mengklik Download Template Lengkap.
Letakkan kode berikut di atas 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/AVvXsEj7eQmvjVYz5OevYRrlSIbx2C7GNldPlfLeMW8DFIgEWwwzZiwshwMbV3rbtaLndlzX8FElUlvWZdvmkhJ1mXIUczG9PELC692Uf-V6_qc9wZ34jsWY06TUbI5ivWtLA9_ogyULFLMF26eq/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;
}
.mytext img{
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;
}
.mytext p{
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/AVvXsEhql6mb8-w7yM8CyOWeiIYYRO6nU_2t7CEWUANiWPbbMneSsYHH_aEoaPCstV3OiEIwpz1eFuE22sdZ3vL1mAwZFelqO_nCBbpaI4u9uA-NQvC5KfrhjbR0t7ap3cCtZ4USG6Q5qo4b-7M/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/AVvXsEhiJkhkJ4oHtoO29VpzW0pwwi7bh0O4UpRmHfJSiTmz_L8jPUDBtX_jRNdLVUT2N4-HYZalo-iAvu9pacWOqGi0vjSaYTj5NZq65fSq0DystE1xO1uIUJopFsb_vocBxwIU5sMI3cc6VFI/s1600/prev+demomaskolis.gif);
position:absolute;
right:5px;
bottom:65px;
display:block;
}
height:150px;
overflow:hidden;margin:-20px 0px 0 2px;
position:relative;
width:965px;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7eQmvjVYz5OevYRrlSIbx2C7GNldPlfLeMW8DFIgEWwwzZiwshwMbV3rbtaLndlzX8FElUlvWZdvmkhJ1mXIUczG9PELC692Uf-V6_qc9wZ34jsWY06TUbI5ivWtLA9_ogyULFLMF26eq/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;
}
.mytext img{
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;
}
.mytext p{
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/AVvXsEhql6mb8-w7yM8CyOWeiIYYRO6nU_2t7CEWUANiWPbbMneSsYHH_aEoaPCstV3OiEIwpz1eFuE22sdZ3vL1mAwZFelqO_nCBbpaI4u9uA-NQvC5KfrhjbR0t7ap3cCtZ4USG6Q5qo4b-7M/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/AVvXsEhiJkhkJ4oHtoO29VpzW0pwwi7bh0O4UpRmHfJSiTmz_L8jPUDBtX_jRNdLVUT2N4-HYZalo-iAvu9pacWOqGi0vjSaYTj5NZq65fSq0DystE1xO1uIUJopFsb_vocBxwIU5sMI3cc6VFI/s1600/prev+demomaskolis.gif);
position:absolute;
right:5px;
bottom:65px;
display:block;
}
TAHAP KEDUA
Masih pada posisi Edit HTML. Letakkan kode berikut di bawah kode ]]></b:skin>.atau diatas </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//< + 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[
eval(function(p,a,c,k,e,r){e=function(c){return(c35?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'>
//< + 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[
eval(function(p,a,c,k,e,r){e=function(c){return(c35?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>
TAHAP KETIGA
Kita akan meletakkan id untuk slider Drakon tepat di bawah header blog. Nah, anda pun bisa menyesuaikan penempatan id ini. Jadi cocokkan saja dengan template anda. Apalagi template blogger yang sudah banyak dimodifikasi. Langsung saja cari kode <div id='content-wrapper'> Letakkan kode di bawah ini tepat di bawah kode <div id='content-wrapper'>.
Bilamana sudah selesai, kemudian klik simpan template dan perhatikan apakan slider gambar sudah terpasang dengan baik di blog anda. Pemasangan slider gambar ala Drakon ini telah saya sesuaikan dengan isi dari blog saya. Jika anda ingin merubah tampilan atau gambar, hal-hal yang perlu diperhatikan adalah :
<div style='height:20px;width:100%;overflow:hidden;'/>
<script type='text/javascript'>
var $jx = jQuery.noConflict();
$jx(function() {
$jx(".mygallery").jCarouselLite({
btnNext: ".nextb",
btnPrev: ".prevb",
visible: 5,
speed: 1000,
easing: "backout"
});
});
</script>
<div id='slidearea'>
<div id='gallerycover'>
<div class='mygallery'>
<ul>
<li>
<div class='mytext'>
<a href='SLIDE-1-LINK-HERE'>
</a>
<div class='clear'/>
<p align='center'><a href='SLIDE-1-LINK-HERE'>Norah Jones Lyrics</a></p>
</div>
</li>
<li>
<div class='mytext'>
<a href='SLIDE-2-LINK-HERE'>
<img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpGl6z1NCctN6QvhTQTs_AZuPkhMsLsu9k1SfVfG5L2sL6nXeTlvChNeXCBZ5ASlUXcrKBsl6bIetZ1v6VShz_VsNlS49g3cWUnMN4vRDn8s7oYbwQgDsWGlk4Ww0sqQMGX9O-Cdgbr10/s1600/demomaskolis+soldier+1.jpeg'/>
</a>
<div class='clear'/>
<p align='center'><a href='SLIDE-1-LINK-HERE'>Sade Lyrics</a></p>
</div>
</li>
<li>
<div class='mytext'>
<a href='SLIDE-3-LINK-HERE'>
<img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-e68i6KOwoT1hvqr9UlQJyo2eC4FVhMpBvm2HbsYwFNBTWra3BjxGjrp77AYxplB2Rmv4TeQSloNDlc-5JKI3Zal2j7yi8lqA4SiVMzk6E-qD_8xqNMk2gWx-88jFsn7lGWcLPF-LpnU/s1600/demomaskolis+basia1.jpg'/>
</a>
<div class='clear'/>
<p align='center'><a href='SLIDE-1-LINK-HERE'>Basia Lyrics</a></p>
</div>
</li>
<li>
<div class='mytext'>
<a href='SLIDE-4-LINK-HERE'>
<img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyCUuRxo1CUDgpSXjiY37LxpUduBhQyA1xkSeI5hMX7nZ-PYggCjgklGc-5yeAX7GzIoZLeWEUtJYNTQevzl-KDPDm9lmjeb4HD7jfOcIvnqEByJZnLLK_f2838Bc4M9M95zZEaFRH7i0/s1600/jamiroquai+demomaskolis1.jpeg'/>
</a>
<div class='clear'/>
<p align='center'><a href='SLIDE-1-LINK-HERE'>Jamiroquai Lyrics</a></p>
</div>
</li>
<li>
<div class='mytext'>
<a href='SLIDE-5-LINK-HERE'>
<img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr_9i_U3a9KW1OJR32OGzH6Jy3OcKQIfL8Y1stXOoQ_xCJr4EY0GmHLJDGZmS3f4_ZGeo2GyhyBaGXJ6V6G_vLxySQPwAzziRUuzw0yAQZJianHspFjgZPMBKquOwkwuT4TWGKMDh7jAc/s1600/jamie+cullum+demomaskolis1.jpg'/>
</a>
<div class='clear'/>
<p align='center'><a href='SLIDE-1-LINK-HERE'>Jamie Cullum Lyrics</a></p>
</div>
</li>
<li>
<div class='mytext'>
<a href='SLIDE-6-LINK-HERE'>
<img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN4sLfNivpiX66vV42TLBzrP_B-hFzdgSdZIy2nCc-W23qxiwMq0-jo_oa_66ggjrY19AkKvk73FPm-VrXxordezYwAyyiqcMijOhe2MPh8AfRdl13IKIy74uy7-EH6tvkQWrA_PTfo84/s1600/diana+krall+demomaskolis.jpeg'/>
</a>
<div class='clear'/>
<p align='center'><a href='SLIDE-1-LINK-HERE'>Diana Krall Lyrics</a></p>
</div>
</li>
<li>
<div class='mytext'>
<a href='SLIDE-7-LINK-HERE'>
<img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIuICfhQStuOK3J_0e9LefhoH0QSNhS1DcKAxLUAowpjo6agE280JxZXW1ypJIN5pJ-18QScXO26J1HvMMO-q4AeAPaEmXe42YhMbzUgiYwCtrYVVg20eED6UmDslxz5DgnsBoQHDBpY4/s1600/demomaskolis+sting.jpg'/>
</a>
<div class='clear'/>
<p align='center'><a href='SLIDE-1-LINK-HERE'>Sting Lyrics</a></p>
</div>
</li>
</ul>
<div class='clear'/>
</div>
</div>
<a class='prevb' href='#'/>
<a class='nextb' href='#'/>
</div>
<script type='text/javascript'>
var $jx = jQuery.noConflict();
$jx(function() {
$jx(".mygallery").jCarouselLite({
btnNext: ".nextb",
btnPrev: ".prevb",
visible: 5,
speed: 1000,
easing: "backout"
});
});
</script>
<div id='slidearea'>
<div id='gallerycover'>
<div class='mygallery'>
<ul>
<li>
<div class='mytext'>
<a href='SLIDE-1-LINK-HERE'>
</a>
<div class='clear'/>
<p align='center'><a href='SLIDE-1-LINK-HERE'>Norah Jones Lyrics</a></p>
</div>
</li>
<li>
<div class='mytext'>
<a href='SLIDE-2-LINK-HERE'>
<img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpGl6z1NCctN6QvhTQTs_AZuPkhMsLsu9k1SfVfG5L2sL6nXeTlvChNeXCBZ5ASlUXcrKBsl6bIetZ1v6VShz_VsNlS49g3cWUnMN4vRDn8s7oYbwQgDsWGlk4Ww0sqQMGX9O-Cdgbr10/s1600/demomaskolis+soldier+1.jpeg'/>
</a>
<div class='clear'/>
<p align='center'><a href='SLIDE-1-LINK-HERE'>Sade Lyrics</a></p>
</div>
</li>
<li>
<div class='mytext'>
<a href='SLIDE-3-LINK-HERE'>
<img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-e68i6KOwoT1hvqr9UlQJyo2eC4FVhMpBvm2HbsYwFNBTWra3BjxGjrp77AYxplB2Rmv4TeQSloNDlc-5JKI3Zal2j7yi8lqA4SiVMzk6E-qD_8xqNMk2gWx-88jFsn7lGWcLPF-LpnU/s1600/demomaskolis+basia1.jpg'/>
</a>
<div class='clear'/>
<p align='center'><a href='SLIDE-1-LINK-HERE'>Basia Lyrics</a></p>
</div>
</li>
<li>
<div class='mytext'>
<a href='SLIDE-4-LINK-HERE'>
<img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyCUuRxo1CUDgpSXjiY37LxpUduBhQyA1xkSeI5hMX7nZ-PYggCjgklGc-5yeAX7GzIoZLeWEUtJYNTQevzl-KDPDm9lmjeb4HD7jfOcIvnqEByJZnLLK_f2838Bc4M9M95zZEaFRH7i0/s1600/jamiroquai+demomaskolis1.jpeg'/>
</a>
<div class='clear'/>
<p align='center'><a href='SLIDE-1-LINK-HERE'>Jamiroquai Lyrics</a></p>
</div>
</li>
<li>
<div class='mytext'>
<a href='SLIDE-5-LINK-HERE'>
<img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr_9i_U3a9KW1OJR32OGzH6Jy3OcKQIfL8Y1stXOoQ_xCJr4EY0GmHLJDGZmS3f4_ZGeo2GyhyBaGXJ6V6G_vLxySQPwAzziRUuzw0yAQZJianHspFjgZPMBKquOwkwuT4TWGKMDh7jAc/s1600/jamie+cullum+demomaskolis1.jpg'/>
</a>
<div class='clear'/>
<p align='center'><a href='SLIDE-1-LINK-HERE'>Jamie Cullum Lyrics</a></p>
</div>
</li>
<li>
<div class='mytext'>
<a href='SLIDE-6-LINK-HERE'>
<img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN4sLfNivpiX66vV42TLBzrP_B-hFzdgSdZIy2nCc-W23qxiwMq0-jo_oa_66ggjrY19AkKvk73FPm-VrXxordezYwAyyiqcMijOhe2MPh8AfRdl13IKIy74uy7-EH6tvkQWrA_PTfo84/s1600/diana+krall+demomaskolis.jpeg'/>
</a>
<div class='clear'/>
<p align='center'><a href='SLIDE-1-LINK-HERE'>Diana Krall Lyrics</a></p>
</div>
</li>
<li>
<div class='mytext'>
<a href='SLIDE-7-LINK-HERE'>
<img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIuICfhQStuOK3J_0e9LefhoH0QSNhS1DcKAxLUAowpjo6agE280JxZXW1ypJIN5pJ-18QScXO26J1HvMMO-q4AeAPaEmXe42YhMbzUgiYwCtrYVVg20eED6UmDslxz5DgnsBoQHDBpY4/s1600/demomaskolis+sting.jpg'/>
</a>
<div class='clear'/>
<p align='center'><a href='SLIDE-1-LINK-HERE'>Sting Lyrics</a></p>
</div>
</li>
</ul>
<div class='clear'/>
</div>
</div>
<a class='prevb' href='#'/>
<a class='nextb' href='#'/>
</div>
Bilamana sudah selesai, kemudian klik simpan template dan perhatikan apakan slider gambar sudah terpasang dengan baik di blog anda. Pemasangan slider gambar ala Drakon ini telah saya sesuaikan dengan isi dari blog saya. Jika anda ingin merubah tampilan atau gambar, hal-hal yang perlu diperhatikan adalah :
1. Background slider, anda bisa ganti https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7eQmvjVYz5OevYRrlSIbx2C7GNldPlfLeMW8DFIgEWwwzZiwshwMbV3rbtaLndlzX8FElUlvWZdvmkhJ1mXIUczG9PELC692Uf-V6_qc9wZ34jsWY06TUbI5ivWtLA9_ogyULFLMF26eq/s0/header-background.png sesuai dengan background anda sendiri.
#slidearea{
height:150px;
overflow:hidden;margin:-20px 0px 0 2px;
position:relative;
width:965px;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7eQmvjVYz5OevYRrlSIbx2C7GNldPlfLeMW8DFIgEWwwzZiwshwMbV3rbtaLndlzX8FElUlvWZdvmkhJ1mXIUczG9PELC692Uf-V6_qc9wZ34jsWY06TUbI5ivWtLA9_ogyULFLMF26eq/s0/header-background.png) repeat-x;
border:5px ridge #052844;
} 2. Pada contoh slider di atas, saya menyertakan link dan teks (tulisan warna merah) dari blog demo saya (Mas Kolis). Jadi, silahkan mengganti link, teks dan gambar (image) buatan sendiri, sesuaikan dengan kebutuhan. Bagian tersebut adalah seperti ini :
<li>
<div class='mytext'>
<a href='SLIDE-1-LINK-HERE'> <img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil85Hqjm_d2pwsslQM13YFr6vD-Af3AVPuL6h50Pg6v0uC1DbVLqxyrhlaOCJhjjK665pp_1hyTnVYCi9z6dGpgz4IjzuD1p-4tXvl5LNQLlAQi0uTkJ_Bph9Y1wQuUmGnolWy90orYtQ/s1600/demomaskolis+come+away+with+me+1.jpeg'/> </a>
<div class='clear'/>
<p align='center'><a href='SLIDE-1-LINK-HERE'>Norah Jones Lyrics</a></p>
</div>
</li>
<div class='mytext'>
<a href='SLIDE-1-LINK-HERE'> <img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil85Hqjm_d2pwsslQM13YFr6vD-Af3AVPuL6h50Pg6v0uC1DbVLqxyrhlaOCJhjjK665pp_1hyTnVYCi9z6dGpgz4IjzuD1p-4tXvl5LNQLlAQi0uTkJ_Bph9Y1wQuUmGnolWy90orYtQ/s1600/demomaskolis+come+away+with+me+1.jpeg'/> </a>
<div class='clear'/>
<p align='center'><a href='SLIDE-1-LINK-HERE'>Norah Jones Lyrics</a></p>
</div>
</li>
3. Jika ingin menambahkan deskripsi singkat di bawah judul gambar, temen-temen bisa rubah menjadi seperti ini
<li>
<div class='mytext'>
<a href='SLIDE-1-LINK-HERE'>
<h2><a href='SLIDE-1-LINK-HERE'>Norah Jones Lyrics</a></h2>
<p>Norah Jones adalah penyanyi jazz terkenal yang sudah banyak memperoleh penghargaan.....</p>
</div>
</li>
4. Untuk merubah lebar (width:965px), anda bisa sesuaikan dengan lebar di template yang anda pakai. Demikian juga tinggi slider, anda bisa atur sendiri, bisa kan? Saya yakin pasti bisa.
Selamat mencoba, semoga berrmanfaat.
<li>
<div class='mytext'>
<a href='SLIDE-1-LINK-HERE'>
<h2><a href='SLIDE-1-LINK-HERE'>Norah Jones Lyrics</a></h2>
<p>Norah Jones adalah penyanyi jazz terkenal yang sudah banyak memperoleh penghargaan.....</p>
</div>
</li>
4. Untuk merubah lebar (width:965px), anda bisa sesuaikan dengan lebar di template yang anda pakai. Demikian juga tinggi slider, anda bisa atur sendiri, bisa kan? Saya yakin pasti bisa.
Selamat mencoba, semoga berrmanfaat.
Referensi : http://www.maskolis.com/2011/01/memasang-slider-gambar-ala-drakon.html