Cara Membuat Slider/Slideshow di Blog dilengkapi Efek Animasi

Aura Ilmu » Blog » Cara Membuat Slider/Slideshow di Blog dilengkapi Efek Animasi

Oleh: Tatang Gunawan | Update Terakhir: 16 May 2017 | 5 Comments

Inilah cara membuat slider/slideshow efek animasi, dilengkapi posting gambar yang menarik menjadi salah satu fitur yang sangat umum bisa kita temukan di banyak blog/website dan biasanya slideshow ini dapat diterapkan baik hanya pada homepage atau halaman posting. Ada begitu banyak jenis slideshow di internet, apakah dengan cara menggunakan Javascript atau bahkan hanya dengan menggunakan CSS murni.
Berikut ini adalah slideshow yang sangat stylish dilengkapi animasi gambar. Fitur utamanya adalah efek gambar transisi, animasinya disediakan dengan puluhan efek dengan bantuan menggunakan JQuery dan easing effect. Slideshow ini dibuat dengan fitur lengkap untuk menampilkan isinya termasuk tombol navigasi (jika ingin ditampilkan) play/pause kontrol, nomor navigasi, progress bar dan kabar baiknya adalah dapat diatur sedemikian rupa bagi yang sudah berpengalaman.

Slider Responsive Demo bisa dibuka di komputer dan mobile.

DEMO
slider/slideshow di blog dilengkapi efek

Image: slideshow

Slider/Slideshow ini dasarnya di adaptasi dari skitter-slider yang dibuat oleh Thiago Silva Ferreira, gratis untuk penggunaan pribadi di bawah lisensi ganda, yaitu MIT License (open source) dan General Public License 2. Dirancang dengan gaya dan beberapa tema serta banyak pilihan untuk menyesuaikan, ukuran kode javascript standard sekitar 36 kb dalam versi minified, kompatibel untuk browser modern seperti Chrome, Firefox, Opera, Safari dan Internet Explorer.
Pada dasarnya dapat mengatur tampilan animasi dengan dikonfigurasi per gambar atau bisa juga dengan otomatis sesuai dengan struktur. Untuk membuat slider ini siap muncul, dapat dipraktekan hanya dalam instalasi beberapa menit, Jika tertarik berikut adalah cara membuat slideshow tersebut, ikuti langkah-langkah dibawah ini:

1. Masukan kode CSS berikut diatas atau sebelum ]]></b:skin> atau </style> di bagian head.
CSS slider/slideshow
Lihat sumber kode CSS klik disini skitterwide

1234<style type="text/css">

/* Masukan kode CSS disini, hapus baris ini */
</style>

Catatan: Warna Oranye adalah link image navigasi, sebaiknya diganti atau diupload ke tempat masing-masing supaya pemakaian tidak terbagi-bagi, atau mungkin linknya nanti tidak berlaku lagi.
2. Masukan kode Jquery dan Jquery-easing script berikut diatas atau sebelum </head>

JQuery slider/slideshow

12<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js" type='text/javascript'></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js" type='text/javascript'></script>

Catatan: Jika sudah memasang JQuery (Biru) dengan versi lain, maka lewati langkah ini dan gunakan versi 2.x.x Tetapi untuk Jquery-easing (Orange) harus dipasang agar bisa berjalan.
3. Masih di bagian head, masukan kode JavaScript berikut diatas atau sebelum </head>

Javascript slider/slideshow minified
lihat sumber kode (source code) disini skiter-slider-min.js

1234<script type="text/javascript">

/** Masukan sumber kode javascript disini dan hapus baris ini */
</script>

4. Selanjutnya, harap diperhatikan ada 2 metode untuk menerapkannya dalam HTML, yaitu metode manual dan otomatis publish posting.
Metode 1 slider/slideshow Manual
Masukan kode berikut disuatu tempat bagian HTML body, contohnya sebelum <div class="content-wrapper"> atau <div id="content-wrapper"> atau mungkin juga setelah <div class="outer-wrapper"> atau kira-kira posisi yang tepat, karena setiap blog memiliki nama yg berbeda-beda.
HTML slider/slideshow

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748<div class='box_skitter_clean'>
    <div class='box_skitter'>
    <ul>
        <li><a href="...post-link 1.html"><img src="...image-link 1.jpg" class="block" ></img></a>
            <div class="label_text"><a href='...post-link 1.html'>Post Title 1</a>
            <p>Description 1</p>
            </div>
        </li>
        <li><a href="...post-link 2.html"><img src="...image-link 2.jpg" class="cubeRandom" ></img></a>
            <div class="label_text"><a href='...post-link 2.html'>Post Title 2</a>
            <p>Description 2</p>
            </div>
        </li>
        <li><a href="...post-link 3.html"><img src="...image-link 3.jpg" class="directionRight" ></img></a>
            <div class="label_text"><a href='...post-link 3.html'>Post Title 3</a>
            <p>Description 3</p>
            </div>
        </li>
        <li><a href="...post-link 4.html"><img src="...image-link 4.jpg" class="cubeRandom" ></img></a>
            <div class="label_text"><a href='...post-link 4.html'>Post Title 4</a>
            <p>Description 4</p>
            </div>
        </li>
        <li><a href="...post-link 5.html"><img src="...image-link 5.jpg" class="tube" ></img></a>
            <div class="label_text"><a href='...post-link 5.html'>Post Title 5</a>
            <p>Description 5</p>
            </div>
        </li>
    </ul>
    </div>
</div>
<script>
    $(document).ready(function() {
        $('.box_skitter').skitter({
             theme: "clean", // minimalist, round, clean, square, untuk default baris ini dihilangkan
             numbers_align: "center", 
             dots: false, // true, false
             preview: true, // true, false
             controls: true, // true, false
             controls_position: "leftBottom", // center, leftTop, rightTop, leftBottom, rightBottom
             progressbar: true, // true, false
             enable_navigation_keys: true, // true, false
             animation:"randomSmart", // cube, cubeRandom, block, cubeStop, cubeHide, cubeSize, horizontal, showBars, showBarsRandom, tube, fade, fadeFour, paralell, blind, blindHeight, blindWidth, directionTop, directionBottom, directionRight, directionLeft, cubeStopRandom, cubeSpread, cubeJelly, glassCube, glassBlock, circles, circlesInside, circlesRotate, cubeShow, upBars, downBars, hideBars, swapBars, swapBarsBack, swapBlocks, cut, random, randomSmart
             labelAnimation: "slideUp", // Label animation type, slideUp, left, right, fixed
             interval: 3000, // waktu transisi
        });
    });
</script>

Warna Biru adalah link posting, ungu adalah judul posting, pink adalah image link, merah adalah untuk pengaturan animasi tersendiri per image, Oranye adalah deskripsi posting. Coklat adalah kostumisasi pengaturan.
Metode 2 slider/slideshow Otomatis Publish
Jika menggunakan Platform Blogger, mungkin ingin publish posting secara otomatis, sebenarnya bisa publish recent post, per label, atau random post, berikut adalah otomatis publish artikel terbaru:
Masukan kode JavaScript berikut sebelum </head> di bagian head untuk recent posts.
Javascript slider/slideshow untuk artikel terbaru

123<script type='text/javascript'>//<![CDATA[
imgr=new Array();imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifro34aLknXBuh2l660p7zgZlZzb98Tdxt51Fyv5nxpJRBkHPkaz7t5dowg0icuMf9tuS9ftmYldMjRWCzQyNCE9_tMzFK498CYyS-YziNNHEki9oS7XvqhXkI3Lu_I2YL41F4ivAY6NU/s1600/no+image.jpg";showRandomImg=true;aBold=true;summaryPost=150;summaryTitle=25;numposts=5;function removeHtmlTag(f,e){var h=f.split("<");for(var g=0;g<h.length;g++){if(h[g].indexOf(">")!=-1){h[g]=h[g].substring(h[g].indexOf(">")+1,h[g].length)}}h=h.join("");h=h.substring(0,e-1);return h}function showrecentposts(x){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();document.write('<div class="box_skitter">');if(numposts<=x.feed.entry.length){maxpost=numposts}else{maxpost=x.feed.entry.length}for(var n=0;n<maxpost;n++){var v=x.feed.entry[n];var g=v.title.$t;var f;var o;if(n==x.feed.entry.length){break}for(var l=0;l<v.link.length;l++){if(v.link[l].rel=="alternate"){o=v.link[l].href;break}}for(var l=0;l<v.link.length;l++){if(v.link[l].rel=="replies"&&v.link[l].type=="text/html"){f=v.link[l].title.split(" ")[0];break}}if("content" in v){var q=v.content.$t}else{if("summary" in v){var q=v.summary.$t}else{var q=""}}postdate=v.published.$t;if(j>imgr.length-1){j=0}img[n]=imgr[j];s=q;a=s.indexOf("<img");b=s.indexOf('src="',a);c=s.indexOf('"',b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){img[n]=d}var p=[1,2,3,4,5,6,7,8,9,10,11,12];var w=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var t=postdate.split("-")[2].substring(0,2);var h=postdate.split("-")[1];var r=postdate.split("-")[0];for(var e=0;e<p.length;e++){if(parseInt(h)==p[e]){h=w[e];break}}var u='<li><a href="'+o+'"><img src="'+img[n]+'"/></a><div class="label_text"><a href="'+o+'">'+g+"</a><p>"+removeHtmlTag(q,summaryPost)+"... </p></div></li>";document.write(u);j++}document.write("</div>")};
//]]></script>

Pink adalah link image gambar, secara otomatis tampil jika pada posting tidak terdapat gambar, jangan lupa linknya, mungkin dimasa mendatang tidak berlaku.
Masukan kode berikut disuatu tempat di bagian HTML body, contohnya setelah atau sebelum <div class="content-wrapper"> atau <div id="content-wrapper"> atau mungkin juga setelah <div class="outer-wrapper"> atau yang similar (yang cocok tempatnya) seperti langkah manual diatas.
HTML dan JavaScript slider/slideshow

12345678910111213141516171819202122232425262728<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='box_skitter_clean'>
    <div class='box_skitter'>
    <ul>
<script>
document.write(&quot; &lt;script src=&quot;/feeds/posts/default/?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&quot;&gt;&lt;/script&gt;&quot;);
</script>
    </ul>
    </div>
</div>
<script>
    $(document).ready(function() {
        $('.box_skitter').skitter({
             theme: "clean", // minimalist, round, clean, square, untuk default baris ini dihilangkan
             numbers_align: "center", 
             dots: false, // true, false
             preview: true, // true, false
             controls: true, // true, false
             controls_position: "rightBottom", 
             progressbar: true, // true, false
             enable_navigation_keys: true, // true, false
             animation:"randomSmart", // cube, cubeRandom, block, cubeStop, cubeHide, cubeSize, horizontal, showBars, showBarsRandom, tube, fade, fadeFour, paralell, blind, blindHeight, blindWidth, directionTop, directionBottom, directionRight, directionLeft, cubeStopRandom, cubeSpread, cubeJelly, glassCube, glassBlock, circles, circlesInside, circlesRotate, cubeShow, upBars, downBars, hideBars, swapBars, swapBarsBack, swapBlocks, cut, random, randomSmart
             labelAnimation: "slideUp", // Label animation type, slideUp, left, right, fixed
             interval: 3000, // waktu transisi
        });
    });
</script>
</b:if>

Oranye bisa dikostumisasi dengan banyak pilihan. Warna Hijau adalah baris kode pembuka dan penutup untuk menampilkan slider hanya di homepage, pelajari lebih tentang trik menampilkan dan menyembunyikan elemen disini.
5. Save Template, dan lihat hasilnya.
Mudah-mudahan bermanfaat.