Animasi Slider/ Slideshow

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:

Masukan kode CSS berikut diatas atau sebelum ]]></b:skin> atau </style> di bagian head.

CSS slider/slideshow
Lihat sumber kode CSS klik disini skitterwide
```
<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.
Masukan kode Jquery dan Jquery-easing script berikut diatas atau sebelum </head>
```
<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.
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
```
<script type="text/javascript">

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

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.

<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

<script type='text/javascript'>//<![CDATA[
imgr=new Array();imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGgWg24tYz40nfL8WcfuXqPCnUUi8lXIWGmd2QUezCJ5arHy7ZmPhV2NFbmqJn51bYxe-1omjk17cCeNAFvStagzipXgb8i_fuRFx0FyUASPu9ELxxwRRxtWpu0SXr21buQ9OF8HbLz4A/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.

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

Save Template, dan lihat hasilnya.

Mudah-mudahan bermanfaat.

D E M O

source

Animasi Slider/ Slideshow

0 comments:

Posting Komentar