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.

Jika sobat tertarik untuk melihat jenis slider lainnya silahkan baca Cara memasang slider versi 1 dan cara memasang slider otomatis versi 2. Untuk sobat yang ingin mencoba menggunakan slider jenis ini di templatenya silahkan simak tutorialnya berikut ini.

Cara Membuat Chop Slider Otomatis di Blog


Membuat Chop Slider

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(http://3.bp.blogspot.com/-vjIXs1ktYSs/T-JaYVBdLzI/AAAAAAAACe8/fvZJeayf9ew/s1600/arrow_left.png) no-repeat center; }
#slide-next { right:20px; background:#FFF url(http://3.bp.blogspot.com/-2G1xuDOoAlM/T-JaYnZkpFI/AAAAAAAACfI/-jnzqF3ogS8/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 ubah kode width atau height nya maka pada #slider juga harus anda rubah agar sesuai dan terlihat rapi.
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 dan ukuran gambar juga harus sesuai dengan ukuran slider, jadi agak rumit, ribet dan bikin sibuk juga untuk membuat slider gambar ini, 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.
12 Komentar untuk "Cara Membuat Chop Slider Otomatis di Blog"

Wah keren brotherrr......??? Ajib dah artikel ente. Oh ya bang ane mau tanya.blog ane yang blog akses bisnis kan make template dari ente yang maxxiz nah agar tampilan di handphone otomatis seperti view web version bagaimana yah.jadi ketika ada pengunjung gk perlu klik view web version. Mohon di balas yah bang.

Terus itu adalagi untuk feedburner yang template ente baru buat.ane udah ganti ama feedburner ane.tapi kok tetepa masi menampilkan seocips yah.
Ane udah tes di blog ane yg lama
Di fery-storeblog2.blogspot.com
Mohon pencerahanya juga yah.

Oh template maxis yang saya share dulu yah? Itu bukan template saya tapi template itu memang pernah saya gunakan tapi itu dulu udah sedikit lupa sih.. seingat saya template itu juga sudah responsive.

Untuk template responsive ( tidak semua template ) Untuk tampilan di mobile agar supaya tidak ada tulisan "view web version" silahkan masuk ke Blogger, pilih blog, pilih menu template >seluler> Ya. Tampilkan template seluler di perangkat seluler.>Khusus>> simpan.

Apakah sobat sudah mendaftar di feedburner? Sobat sebelumnya harus mendaftarkan blog ke feedburner ( baca: Cara daftarkan blog ke feedburner ) selesai mendaftar silahkan lihat url feedburner sobat dan nantinya url feeburner dapat di ganti dengan url blog sobat.

payah x pun. Copas sana, copas sini, tapi nga bisa juga di terapkan di blog. Ntah dimana yang salah.

klo di kasi slider jadi berat/nggk ya loadingnya?

Biasanya sih, karna yang di load kan jadi bertambah.. tapi tergantung besarnya gambar dan slidernya juga sih..

makasih mas buat tutorialnya, kmrn sudah sempet jalan pas belum ganti domain (.blogspot.com) tapi setelah ganti ke .com koq tidak bisa ya? apakah ada pengaruhnya, ketika di ganti domain ke .com?

Belum tahu gan karna saya pasangnya juga kedomain Blogspot.

oke gan, makasih ya, buat ilmunya ... :)

wah iya bener td ane coba pasang di .com ngga muncul :v ;-(
kyanya js nya khusus blogcepot nih (h)

oiya gmn spya itu jd otomatis dijadiin slide per label/recent post? jd ngga usah manual edit image dan deskripsinya lg gan?