Chop Slider Auto
adalah slider yang menapilkan
beberapa slide menarik dan tempaltenya pun harus sudah mendukung slide tersebut. berikut cara penerapannya :
Login ke akun blog klik tombol
blog baru,
buat satubuah link baru kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber berikut ini
Get Blank Template edit background warna sesuai keinginan dan klik simpan selesaiKemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai
<style class="Mys2010-styles">
body {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS7fk9cfBmxqtD6g853Gj1QGJrECRulpgdRAQQ_8jmwb8Q0VDsvSREmVDvegg7bStmZP84VxVtVsVDlSb3kBndd0pO02gHGBoRnXLOBKjIHC4uLXAaZS2WHh166xOJ0KsW4LUzbPoYhUvh/s1600-r/Darkwood-mys2010.jpg);color:red;height:100%;overflow:hidden;}
header {
-o-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
padding: 10px 0;
position: fixed;
top: 0;
width: 100%;
background: #222;
border-bottom: 3px solid #dad;
}
/* GRADIEND */
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 60px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 10px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #333;
background: #000020;
border-top: 2px solid #f0f;
z-index: 9999;
}
h2 {
padding: 15px;
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%);
background: linear-gradient(transparent 10%, goldenrod 50%, transparent 90%);
}
.wrapper {
position: relative;
margin: 0 auto 15px;
width: 500px;
height: 350px;
display: block;
padding: 5px;
background: #;
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/AVvXsEiJKAOjUwXu2M34uH5A1Eb1vRcAr4grScePyAiijDg2gPILW4K5oQLwtJsTof_gA5JbZhRg06Nvs_62NV8GuDU96xQjRkC1oXbAQWVhZXx4c44KK2LNUsmXjmeE84MK-GHSDbVdLdjQpYA/s1600/arrow_left.png) no-repeat center
}
#slide-next {
right: 20px;
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSXi3v2ffsr1BSk9DdcyM0BW_LDeFsWK03YM3RxSewxQccwpXLPO0tIBX9v-mm4_NqorslGCmV3Mj04Kk2NHkAxT7ybcR67p1L0wY9OocROz4ywFXTiYFToASoeORsUlvjdZpJrQv7Y2A/s1600/arrow_right.png) no-repeat center
}
#slider {
width: 500px;
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
}
</style>
<div class="wrapper">
<a href="https://www.blogger.com/blogger.g?blogID=2797383530765388234#" id="slide-next"></a>
<a href="https://www.blogger.com/blogger.g?blogID=2797383530765388234#" id="slide-prev"></a>
<div id="slider">
<div class="slide cs-activeSlide">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEOkrVdJmKKfC4TZNdrrM2uXBcVyNTy6hzfeIyQTe5w_VUW1WtL2HKHXazswisx1F1WTGjalfDm6ZpUeegIwj44MAzOYEozKPkDjq_ioicAemG3LUPlDhE6900bo3FXfqurp8rsnwjFAg9/s1600-r/Scottadkins_Mys2010s2.jpg" /></div>
<div class="slide">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfRGl1kSfsfVTyJWI-pMKceoyNrsVbBe7BdKbaqYi30wzK4K9OMCElqwIK_jmmjACyOW0d0oUlKqBQTUupp80ff1C0vLpwey0yztp91I4inlTwxgivhclksF8IGRPNeTLdCqEaaz3gmSFA/s1600-r/Scottadkins_Mys2010s1.jpg" /></div>
<div class="slide">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcmSnNq-h3a3WsR38LU5iN_SZpeX8VN7AK-5ZFgkBOSslV9e2tlwifbs6ou9KPA8g6LEtm0eU0ZVWeBRZ7IHtEZxa5QhbMwACezIh8s2az-HWkQpHJCuWRiHZnabWsJOcGBPDbjtz8gU7S/s1600-r/Scottadkins_Mys2010s.jpg" /></div>
<div class="slide">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaBZuUcaKCEUdtpJpwltr9E7tnMJ1xvHn2FyMLNyDLhyipzBI5DfMrJd5y-hYxcWTyb6RztoNcXEOG3tc-2uPQMx7BeX-iYzGpBbgW7yd0ZCBoTFDXwc_cf3swM5Y30nk2yRIjUpGgwkxl/s1600-r/Scottadkins_Mys2010.jpg" /></div>
</div>
<div class="slide-descriptions">
<div class="sl-descr">
<a href="https://www.youtube.com/watch?v=P6fKD_U8iGs" target="_blank" title="watch movies on youtube">Undisputed III</a> Youtube</div>
<div class="sl-descr">
<a href="https://www.youtube.com/watch?v=GIQWR7qQzvQ" target="_blank" title="watch movies on youtube">Close Range</a> Youtube</div>
<div class="sl-descr">
<a href="https://www.youtube.com/watch?v=t03wigE8GK0" target="_blank" title="watch movies on youtube">Undisputed II</a> Youtube</div>
<div class="sl-descr">
<a href="https://www.youtube.com/watch?v=P6fKD_U8iGs" target="_blank" title="watch movies on youtube">Undisputed III</a> Youtube</div>
</div>
<div class="caption">
</div>
</div>
</div>
<!-- GRADIEND -->
<div class="ap" id="ap">
<div align="center">
<a href="https://sites.google.com/site/code6916/file/Chop-Slider-mys2010s.css"title="Myscript2010s">
<h2>
<font size="1" color="blue"face="arial">DOWNLOAD CODE</2></a>
</div>
<header>
<div class="Top Title Header">
<div align="center">
<a href="http://sample-mys2010.blogspot.co.id/2016/04/chop-slider-auto.html"title="Myscript2010s"><b><font size="1" color="orange"face="arial">LET'S STUDY</b>
</div>
</header>
<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 src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'></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,
autoplayDelay: 3000,
t3D: csTransitions['3DFlips']['random'],
t2D: [
csTransitions['multi']['random'],
csTransitions['vertical']['random']
],
noCSS3: csTransitions['noCSS3']['random'],
mobile: csTransitions['mobile']['random'],
onStart: function () {
},
onEnd: function () {
}
});
});
</script>
If you want to directly copy and paste you canDownload Here Chop Slider Auto
Chop Slider Auto
