Cara Membuat Slider Thumbnail/Gambar ala Drakon Template

Darkon adalah template blogger gratis diadaptasi dari WordPress dengan 2 kolom , sidebar kanan , sudut dibulatkan , slideshow dan posting thumbnail. Designer Darkon adalah Web2Feel, Drakon template memiliki tampilan gambar slide, lebar slide pada darkon sesuai dengan lebar pada template. Sebelumnya saya telah mengulas fitur slid show diatas header, pada fitur slide tersebut gambar ditampilkan satu persatu secara otomatis namun pada Darkon kita harus meng-klik tombol previous atau next untuk menampilkan gambar selanjutnya.

Apabila anda ingin lebih memahami tampilan slide pada Darkon anda bisa melihatnya langsung pada Darkon Tempate atau situs template gratis, apabila anda tertarik ingin memasang Slider Thumbnail/Gambar ala Drakon Template berikut ini langkah-langkahnya :

Cara Membuat Slider Thumbnail/Gambar ala Drakon Template 

L1-Pemasangan CSS

Silahkan anda masuk kehalaman Blogger anda => klik Template  => Untuk mengantisipsi sebaiknya Backup dulu template anda dengan mengklik Download Template Lengkap  => pilih Edit HTML => selanjutnya anda cari kode berikut  ]]></b:skin>, kemudian anda terapkan kode dibawahn ini diatasnya :

#slidearea{
height:150px;
overflow:hidden;margin:-20px 0px 0 2px;
position:relative;
width:965px;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8i3j_KhkItFl3sY7eDF-MRKfmXHM4c0ByqgAOu5cdfntnb7HyEb2-Tean1XAhOA_wrCHfugVx3Vf_Pdqz-ldObrp_507ycuSPFDFY9WyZavb7Ya_GCXmsv0zQJ5KBYYY1yZf_yy1Rloa_/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/AVvXsEhu8H8cGgKUaTfcvRqfF5TuGuW9EbCTKf-xsH7Zrw-75fEfqTLzKHHKyOZ-EnQaZbPXImCu9Yxywm4F0EtxAMbW5skZKTWpNCcie-0lYPSk6lbH2bRwTXmCB8FCPfr-TUA80gNOpvv-0iU/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/AVvXsEjT_mufGHGTS7ix8TeLm9CYLzTdGbCrwwoBqMBT5YvUPgsDaanYpoZSkO0s65tzTEp2aYhvSbAdIKp_2dh-uEOGAC4hEKHxg7T2kLDYyoQQMS9SlBt3-BMrnppfC6JblX9p4UN57lW7hyE/s1600/prev+demomaskolis.gif);
position:absolute;
right:5px;
bottom:65px;
display:block;
}

L2-Pemasanga Javascript 
Pada pemasangan Javascript anda letakkan kode tersebut diatas </head>

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

Masih dalam pemasangan Javascript dan tempat yang sama pada </head>, kemudian anda letakkan kode dibawah ini diatasnya atau dibawah kode diatas.

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

L3- Pemasangan HTML
Dalam pemasangan HTML anda cari kode <div id='content-wrapper'> , selanjutnya anda terapkan kode dibawah ini dibawahnya :

<div style='height:20px;width:100%;overflow:hidden;'/>
<script type='text/javascript'>
var $jx = jQuery.noConflict();
$jx(function() {
 $jx(&quot;.mygallery&quot;).jCarouselLite({
 btnNext: &quot;.nextb&quot;,
        btnPrev: &quot;.prevb&quot;,
    visible: 5,
    speed: 1000,
    easing: &quot;backout&quot;  
    });
});
</script>
<div id='slidearea'>
<div id='gallerycover'>
<div class='mygallery'>
<ul>
<li>
<div class='mytext'>
<a href='SLIDE-1-URL Tujuan'>
<img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn2CSfY4-ANYC6W2AfChazpVDkj4b2981gvS5Vh_La5cOVuB-Aa5GXsVngU7ywUK7TF5Ou5HwONYNySzDdgTIdwwASsB4X5ItP3CaX_i0BlLYnT5b-9lB5y7lJo-Wdqrgz7eBNMCFJevQ/s1600/avenged+sevenfold.png'/>
</a>
<div class='clear'/>
<p align='center'><a href='SLIDE-1-URL Tujuan'>Avenget Sevenfold</a></p>
</div>  
</li>
<li>
<div class='mytext'>
<a href='SLIDE-2-URL Tujuan'>
<img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij4GWERJIoUGdZ5fvbfDebLW4y5FPPyzPCrxtR0dDKyEcx29gr0yFyECdLKPJRVC7AGNirHxa3xj2X3yypjcVV9DiAmTn8egqWGn0kTSEzLYmTMB1bRApe1a35DFyByNIrC0VwoXR0Emo/s1600/linkinpark.png'/>
</a>
<div class='clear'/>
<p align='center'><a href='SLIDE-2-URL Tujuan'>Likin Park</a></p>
</div>  
</li>
<li>
<div class='mytext'>
<a href='SLIDE-3-URL Tujuan'>
<img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitfjueH0Wrz4GO2Gm5xs77fY_UHxHvH1zq-HTfoGmUKBmfcLq1cjjLSDjesQRtFWbXwf8W1Mzoe5anJBOCl7xrosK9d_L736pfYrRjc2bR3c4FHYC7m-mF-DO9Xp4dOx-2HgnEWYzCSBk/s1600/Metallica.png'/>
</a>
<div class='clear'/>
<p align='center'><a href='SLIDE-3-URL Tujuan'>Metalilica</a></p>
</div>  
</li>
<li>
<div class='mytext'>
<a href='SLIDE-4-URL Tujuan'>
<img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq8KkSzqlwebwNcAFyM3tHbb4vXp__XxgPnPnL-tGzdJko9Ks9NaxNvoNp_LLxe6vmpsc-6fRYNDkVM6Tzte5-JePqg2uVdCcG9xOpasVV6hkykTXYRVZGuw63xMShkOWT1THZKgPn5MU/s1600/my+chemical+romance.png'/>
</a>
<div class='clear'/>
<p align='center'><a href='SLIDE-4-URL Tujuan'>My Chemical Romance</a></p>
</div>  
</li>
<li>
<div class='mytext'>
<a href='SLIDE-5-URL Tujuan'>
<img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ8DFGZb4N7cfJFcmovMpJIUww_6iJHumsrZ7bma8eb9VsNzEii7jzyP44xJolZFvlKpvgewIAnHnxMlGvZDfiohMoX-Mq2OxMQ2tKaYBGlcsBzRmQE5lZhb8FupHTa9bVXPGx3NObab0/s1600/Bon+Jovi.png'/>
</a>
<div class='clear'/>
<p align='center'><a href='SLIDE-5-URL Tujuan'>Bon Jovi</a></p>
</div>  
</li>
<li>
<div class='mytext'>
<a href='SLIDE-6-URL Tujuan'>
<img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEhlrqBZbUzcKCg7Frk-7P9KpC4z4wCepoPB39-V6x0jIuuGhyBHR0cowy78Wptsz7tO1b_PSrYaHWzR608atQzofr5czL_mbsF6qeoMRMNuTO5kuWE00BCMfdp3hSP0GveLd3Zh7SaPE/s1600/evanescence.png'/>
</a>
<div class='clear'/>
<p align='center'><a href='SLIDE-6-URL Tujuan'>Evanescence</a></p>
</div>  
</li>
<li>
<div class='mytext'>
<a href='SLIDE-7-URL Tujuan'>
<img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEZTwl8DS1tYvE9p7t4oJUeiymdyfxgOZmgMxtB2tQvmPM72HiioE3iJfYPaKJu_5AvzEAOWxs7KXLNOuRmBNDf18ZovBKDFkOFalR6Y5ODy0ZrbAmjvNmbE700ibN5f7oXPIZNL-Abts/s1600/slipknot.png'/>
</a>
<div class='clear'/>
<p align='center'><a href='SLIDE-7-URL Tujuan'>Slipknot</a></p>
</div>  
</li>
</ul>
<div class='clear'/>
</div>
</div>
   <a class='prevb' href='#'/>
   <a class='nextb' href='#'/>
</div>

Selanjutnya anda simpan template.
Perhatikan pada kode berikut :

<li>
<div class='mytext'>
<a href='SLIDE-7-URL Tujuan'>
<img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn2CSfY4-ANYC6W2AfChazpVDkj4b2981gvS5Vh_La5cOVuB-Aa5GXsVngU7ywUK7TF5Ou5HwONYNySzDdgTIdwwASsB4X5ItP3CaX_i0BlLYnT5b-9lB5y7lJo-Wdqrgz7eBNMCFJevQ/s1600/avenged+sevenfold.png'/>
</a>
<div class='clear'/>
<p align='center'><a href='SLIDE-7-URL Tujuan'>Avenget Sevenfold</a></p>
</div>
</li>

Jika anda ingin menambahkan diskripsi singkat dibawah gambar, anda bisa mengganti kode diatas dengan kode dibawah ini.

<li>
<div class='mytext'>
<a href='SLIDE-1-URL Tujuan'>
<img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn2CSfY4-ANYC6W2AfChazpVDkj4b2981gvS5Vh_La5cOVuB-Aa5GXsVngU7ywUK7TF5Ou5HwONYNySzDdgTIdwwASsB4X5ItP3CaX_i0BlLYnT5b-9lB5y7lJo-Wdqrgz7eBNMCFJevQ/s1600/avenged+sevenfold.png'/> </a> <div class='clear'/>
<h2><a href='SLIDE-1-URL Tujuan'>Avenget Sevenfold</a></h2>
<p>Avenged Sevenfold is a band Hardrock American from Huntington Beach, California, formed in 1999. The band consists of vocalist M.....</p>
</div>
</li>

Demikian Cara Membuat Slider Thumbnail/Gambar ala Drakon Template, semoga bermanfaat!

Bagikan Artikel ini