Cara Memasang Chop Slider di Blog

HaiSob apa kabar? pada kesempatan ini saya akan membagikan tutorial cara memasang chop slider di Blogspot Blogger. 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.

Sebenarnya slider ini sudah pernah saya posting di blog saya yang dulu (seocips) dan sekarang saya posting lagi disini. Ok sobat simak tutorialnya berikut ini.

CHOP SLIDER


CHOP SLIDER Responsive by haisob.com
chop slider


Cara Membuat Chop Slider di Blogger


1. Di Blog Blogger 😊
2. Pilih menu Template ➔ Edit HTML
Cara Membuat Error Page 404 Animasi Glazing Ribbon
Template ➜ Edit HTML

3. Letakan kode berikut ini 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 width:600px;height:350px pada .wrapper dan #slider. Silahkan ubah sesuaikan dengan template yang kamu gunakan

4. Selanjutnya letakan kode di bawah ini tepat diatas kode </head> 
<script src="https://cdn.rawgit.com/Brando07/haisob/newbe/jquery-chopslider-2.2.0-haisob-com.js"></script>
<script src="https://cdn.rawgit.com/Brando07/haisob/newbe/jquery-cstransitions-1.2-haisob-com.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>
5. Save template
6. Masukan kode berikut ini ke dalam gadget HTML/Javascript (tempat yang cocok diatas postingan/hompage)
<div class="wrapper">
<a id="slide-next" href="#"></a>
<a id="slide-prev" href="#"></a>
<div id="slider">
<div class="slide cs-activeSlide"><a href="http://www.haisob.com"><img src="https://1.bp.blogspot.com/-yfh0J4TVp7A/UlABjtnLbjI/AAAAAAAAAyk/yqgtLQ8bko4/s600/anime-girl-studying-wallpaper.jpg"/></a></div>
<div class="slide"><a href="http://www.haisob.com"><img src="https://3.bp.blogspot.com/-smEkbW1LmeQ/UGMb0L1bB6I/AAAAAAAAAX8/3Yl5QUwAS-g/s600/umbrella-gorgeous-cute-girl-CG-Arts-anime-wallpaper.jpg"/></a></div>
<div class="slide"><a href="http://www.haisob.com"><img src="https://4.bp.blogspot.com/-4KmYvQw0qU0/TbqIU5x-9lI/AAAAAAAACRc/4MjI2I5Phrs/s600/TheWallpaperDB.blogspot.com__+__Music+%252812%2529.jpg"/></a></div>
<div class="slide"><a href="http://www.haisob.com"><img src="https://3.bp.blogspot.com/-avsTWbkZQsA/USJIogGVmEI/AAAAAAAAAY8/493nA9vQS0E/s600/beautiful-japanese-girl-with-gun-fantasy_cg_character_hd-wallpaper.jpg"/></a></div>
</div>
<div class="slide-descriptions">
<div class="sl-descr">Demo Hasob.com pic 1</div>
<div class="sl-descr">Demo Hasob.com pic 2</div>
<div class="sl-descr">Demo Hasob.com pic 3</div>
<div class="sl-descr">Demo Hasob.com pic 4</div>
</div>
<div class="caption"></div>
</div>

Kode warna merah adalah link gambar, kode warna biru adalah deskripsi gambar dan kode warna hijau adalah link tujuan dari gambar tsb.

7. Save dan selesai.


Ok sekian cara membuat Chop Slider di blog Blogger. Semoga bermanfaat.
Join This Site