Cara Membuat Chop Slider Otomatis di Blog

Ok sobat pada kesempatan ini www.seocips.com akan membagikan tutorial blog tentang Cara Membuat Chop Slider di Blog. Slider ini benar-benar plugin baru yang dikembangkan sepenuhnya dari awal berdasarkan pengalaman versi sebelumnya dan sesuai dengan tren teknologi modern, persyaratan dan meningkatnya dukungan HTML5.

OK Untuk sobat yang ingin mencoba menggunakan slider jenis ini di templatenya silahkan simak tutorialnya berikut ini.

DEMO

1. Login ke akun blogger sobat

2. Klik Template » Edit HTML

3. Kemudian tekan Ctrl+F cari kode ]]></b:skin> atau </style>

4. Lalu tambahkan script CSS berikut ini tepat diatas kode ]]></b:skin> atau </style>

.wrapper {
    position: relative;
    margin: 0 auto 15px;
    width: 600px;
    height: 350px;
    display: block;
    padding: 5px;
    background: #FFF;
    z-index: 2
    }
#slide-prev, #slide-next {
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    padding: 15px;
    bottom: 50%;
    position: absolute;
    z-index: 4
    }
#slide-prev {
    left: 20px;
    background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgikwegMJNNDpGtGz_OOCb3bU5j5B9C651Ym787st3FXYk4_-NtPeEy-Qd4hYiFYzIpopcgMCwawg06bh5K-xwQ4EfSGDOgsYrxxG9oVbrIMZi11u1gcISO1VIXdLz6qw8FU5D4XWEOThs/s1600/arrow_left.png) no-repeat center
    }
#slide-next {
    right: 20px;
    background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6nxFE9YOt7D7bZ-i5tZ5e7hIWCPchonQh_34tF9q31VlCpmQoRWIV0wip0_4BG95qE0vbIkjZEM-sKp3XaBfl2eVsrdKWQQwoMor7rc0CQvg0CtxUzdt2MauAUVOs3sw4DukHM0nLGJM/s1600/arrow_right.png) no-repeat center
    }
#slider {
    width: 600px;
    height: 350px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 2;
    display: block
    }
#slider img {
    width: 100%;
    height: 100%
    }
.slide {
    display: none
    }
.cs-activeSlide {
    display: block
    }
.slide-descriptions {
    display: none
    }
.caption {
    background: rgba(238, 238, 238, 0.83);
    color: #333;
    display: none;
    padding: 5px 10px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 5px;
    z-index: 3;
    font: normal 13px/20px Arial, sans-serif
    }

Perhatikan wrapper dan #slider jika pada .wrapper anda rubah kode width atau height nya maka pada #slider juga harus anda rubah agar sesuai dan terlihat rapi.lumnya dan sesuai dengan tren teknologi modern, persyaratan dan meningkatnya dukungan HTML5

5. Tekan Ctrl+F cari kode </head> Lalu masukan script di bawah ini tepat di atas kode </head> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script src="https://sites.google.com/site/vanzdy/script/jquery-chopslider-2.2.0.js"></script>
<script src="https://sites.google.com/site/vanzdy/script/jquery-cstransitions-1.2.js"></script>
<script>
jQuery(function(){
    $("#slider").chopSlider({
        slide : ".slide",
        nextTrigger : "a#slide-next",
        prevTrigger : "a#slide-prev",
        hideTriggers : true,
        sliderPagination : ".slider-pagination",
        useCaptions : true,
        everyCaptionIn : ".sl-descr",
        showCaptionIn : ".caption",
        captionTransform : "scale(0) translate(-600px,0px) rotate(45deg)",
        autoplay : true, // slidernya otomatis bermain, "false" jika tidak otomatis
        autoplayDelay : 3000, // waktu penundaan gambar
        t3D : csTransitions['3DFlips']['random'],
     t2D : [ csTransitions['multi']['random'], csTransitions['vertical']['random'] ],
        noCSS3 : csTransitions['noCSS3']['random'],
        mobile : csTransitions['mobile']['random'],
        onStart: function(){},
        onEnd: function(){}
    })
})
</script>

Perhatikan kode JQuery yang saya block warna merah diatas,  jika script tersebut sudah terpasang di template sobat. cupup hanya satu kode jquery di dalam template Blog..

6. Masukan kode HTML di bawah ini ke dalam gadget HTML/Javascript

<div class="wrapper">
<a id="slide-next" href="#"></a>
<a id="slide-prev" href="#"></a>
<div id="slider">
<div class="slide cs-activeSlide"><img src="url gambar1.jpg"/></div>
<div class="slide"><img src="url gambar2.jpg"/></div>
<div class="slide"><img src="url gambar3.jpg"/></div>
<div class="slide"><img src="url gambar4.jpg"/></div>
</div>
<div class="slide-descriptions">
<div class="sl-descr">Disini deskripsi gambar anda.</div>
<div class="sl-descr">Disini deskripsi gambar anda.</div>
<div class="sl-descr">Disini deskripsi gambar anda.</div>
<div class="sl-descr">Disini deskripsi gambar anda.</div>
</div>
<div class="caption"></div>
</div>

Untuk link gambar nya silahkan anda isi dengan gambar ke sukaan anda masing2, deskripsi juga dapat anda isi sesuai dengan keinginan anda.

Ok sekian sobat mengenai Cara Membuat Chop Slider Otomatis di Blog Blogger dan semoga tutorial ini bermanfaat untuk anda.

Browse More Articles

Tweet

Written by risky

We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.