Membuat Efek Chop Slider Keren di Blog ~ Blog Alvin Warasi

Efek chop slider adalah animasi jQuery / Wordpress image slider yang paling kuat di dunia dengan efek eksklusif dan megah dengan fitur yang menakjubkan. Hal ini tidak hanya versi tetap atau meningkat dari Chop Slider 2. Itu benar-benar plugin baru yang dikembangkan sepenuhnya dari awal berdasarkan pengalaman versi sebelumnya dan sesuai dengan tren teknologi modern, persyaratan dan meningkatnya dukungan HTML5. Trik ini saya dapat dari Blog Irvan Efendy, saya hanya membantu men-sharekan kepada Anda.

DEMO-nya seperti di bawah ini :

Disini deskripsi gambar anda.

Jika Anda mau memasang di blog, simak langkah-langkah di bawah ini:

1. Login ke akun blogger Anda
2. Klik Template Edit HTML
3. Kemudian tekan CTRL+F cari kode ]]></b:skin> atau </style>
4. Lalu tambahkan Script CSS berikut ini tepat di atas 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/AVvXsEgwYnk7gw33meUwxsrLRYeuGbqtOGfG-8NEvSu_7slWHb03hGTDGMSjolW_cYWVBJX3f_jBKB19JXOplauNJGb2f5g5XkuBpwEov54KPkMh_493ccZfdb74abzNtxhsBtPWCH92RFk84po/s1600/arrow_left.png) no-repeat center } #slide-next { 
right: 20px; 
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyMXdt3yChtusp_WMcCo3Hi_ih7rayPMQkJzWcXg91bD05H15BZ0WIdLRP8AcGV1j_wswMVK13_zFRi_VAwOWE7EBjyQE6HFDpCFPn9HVgCM_bpNTZeYYfe3PexJGJItv_p7PfnJwVIEk/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 
}

5. Tekan CTRL+F cari kode </head> lalu masukkan script di bawah ini tepat di tas 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 jQueryyang paling atas, jika script tersebut sudah terpasang di template Anda. Tidak perlu dipasang lagi, jadi cukup kode yang di bawahnya aja Anda copy

Penerapannya :

Masukkan kode HTML di bawah ini ke dalam postingan blog Anda atau bisa juga di 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 gambar1.jpg" /></div>
<div class="slide"><img src="url gambar1.jpg" /></div>
<div class="slide"><img src="url gambar1.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>

Note : Untuk link gambar-nya silahkan Anda isi dengan gambar kesukaan Anda masing-masing,..

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.
Selamat mencoba dan semoga berhasil,...

Advertise

Contact Me

300x250

Advertise

Contact Me

300x250

2 Comments

Balas

admin 7 April 2015 at 17:51

bang.. awalnya saya pasang slider ini di blogspot oke bisa jalan.. setelah saya beli costum domain ternyata slidernya gak jalan.. ini kenapa ya?? kayaknya js nya gak respon.. -_-

100Share 4U 29 May 2015 at 18:33

maaf sekedar memberi saran coba link scrip yang di host di periksa lg, mungkin linkny mati atau ada scrip hilang. saya juga mau tes tutorial di atas. mudah mudahan berhasil.

Silakan Tinggalkan Komentar Anda!
Saya sangat menghargai atas pertanyaan dan komentar Anda, berkomentarlah dengan baik dan sopan.
Dilarang menyertakan link aktif, iklan, atau titip link...
Terima Kasih Sudah Berkomentar..

Konversi KodeTutup Konverter!ForumEmoticon

Terima kasih telah berkomentar