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.
DEMO nya seperti ini:
Simak langkah2 dibawah ini:
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/AVvXsEg5JnIEi19l3zp101Ml1Kc4kqS8C9GwM7WA5nhy0ibzgCVpnjxuDxGVNkMgFrBEwvemPPqPy5WKx2lowidEWxte3tk3qcmePq_jW_9T-fp88fK4mfN-UU-IKyfBUIBej8w9t9qiXRADk94/s1600/arrow_left.png) no-repeat center } #slide-next { right: 20px; background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg132adGcpRa-ks_eS19pc8sbmijvb4FICmNw49Po402G1Vn397QDzLyLrbLdQ2UAhmbw0C0e3j4vxewMg-U0ekBPhaHN9Tok84-R-tcCrmi23ie_8CaFAozoaEHNzVWVWdCl1mgPPUMF4/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 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 kuning diatas, jika script tersebut sudah terpasang di template sobat. Tidak perlu dipasang lagi, jadi cukup kode yang di bawahnya ajah sobat copy.
Penerapannya:
Masukan kodeHTML
di bawah ini ke dalam postingan blog sobat 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 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>
Note: Untuk link gambar nya silahkan anda isi dengan gambar ke sukaan anda masing2,..
Perhatikan
selamat mencoba dan semoga berhasil,...
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,...
Sumber saya liput dari : www.idangero.us
pokoknya harus dicoba nih sob
ReplyDeletemonggo sob,.. :)
Deleteizin praktekin....
ReplyDeletearkikel yang sangat bermanfaat ini thank ya...(y)
thank you :)
Deletemonggo di coba gan :-d
Walah Keren Gan :D
ReplyDeleteTapi Buat Lag Untuk Pemuatan Artikel Ga ?
mksud nya gmna sob :)
Deletesaya rada gak mudeng mksud nya :D
This comment has been removed by a blog administrator.
ReplyDeletekeren gan efek slider chopnya
ReplyDeletethankz gan (y)
Deletemonggo di coba :)
Mantapp gan
ReplyDeletethank you :-d
Deletemau nyoba dulu bro,,,, buat kerenin blog :)
ReplyDeletehehehee :)
Deletemonggo broo cek efek yang terbaru makin makyuss lagi :D
Keren nih gan. :D
ReplyDeleteTerima kasih buat infonya..
iya gan sama"
Deletesaya berhasil work tpi kok gk jalan ya slidenya jadi 1 foto doang...? knp tuh gan
ReplyDeletemana gan sini aku cek dulu,..
DeleteThis comment has been removed by the author.
ReplyDeleteGk work ni... next slide sama prev slidenya gk bisa, judul slidernya pun gk nampak
ReplyDeleteMantap Slidernya
ReplyDeletemakasih Om, Izin Share
iya om sama"
Deletesilahkan om :)
punya gua ngk jalan slidenya gan cek aja di http://bolabanget69.blogspot.com/
ReplyDeleteane coba kok malah nongol script nya di atas header ya gan ,,, gmn caranya hehehe masih newbe
ReplyDeleteKalau tidak mahu apa yang ditunjuk ditiru orang, ada baik nya anda delete saja blog ini dan buat kerja lain yang lebih berfaedah
ReplyDelete