Chop Slider With Audio adalah slider yang menapilkan
beberapa slide menarik dan juga dapat memainkan music mp3. 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 selesai
Kemudian 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 {);color:red;height:100%;overflow:hidden;}
body {
background: #151515;
}
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: 70px;
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: 5px;
background: -webkit-linear-gradient(transparent 10%, green 50%, transparent 90%);
background: linear-gradient(transparent 10%, pink 50%, transparent 60%);
}
.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/AVvXsEhyTMJG2Utmk3HoXvQ5Uvi91Kg6jQayshU0Xx3U1CudxMXMgyROIOTnXX__Ylf2z4bbVRhaOr0Qnx4WoamdrFsJsjfBn_tfzDyjV3Gkfa9UTOyXWqZUVvC46TBYunvVIuIKxNQvcwxYY5s/s1600/arrow_left.png) no-repeat center
}
#slide-next {
right: 20px;
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBMiKMQX541HWaELAz8nkBOeUIU3ZWviOHmVPjFIKrfXMiSOJwLGAyi91C-hF0Qzh-mFGgnkTEDX0VJtMVruMc33juQLSjktj5ZOUYWwzgsZvW2bjD1QZbgWf1NqU4X3edptqYxgsA5Ms/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
}
.player {
box-sizing: border-box;
-moz-box-sizing: border-box;
width: 210px;
height: 100px;
background: # ;
border-radius: 10px;
padding: 10px;
font-size: 16px;
color: #fff;
font-family: arial, sans-serif;
}
.player .source-ctrl-container {
height: 50px;
width: 50px;
background: # ;
border-radius: 50%;
float: left;
position: relative;
cursor: pointer;
color: #000;}
.player .volume-ctrl-container {
box-sizing: border-box;
-moz-box-sizing: border-box;
padding-top: 10px;
height: 50px;
width: 118px;
float: right;
}
.player .fa-pause {
position: absolute;
top: 18px;
left: 18px;
}
.player .fa-play {
position: absolute;
top: 18px;
left: 20px;
}
.player .time-info {
clear: both;
position: relative;
top: 8px;
text-align: center;
font-size: 13px;
}
.player .time-current {
color: #ffff00;
}
.player .volume-slider {
display: inline-block;
height: 2px;
width: 50px;
background: #666;
margin: 0 10px;
position: relative;
top: -10px;
}
.player .volume-knob {
background: #fff;
width: 13px;
height: 13px;
border-radius: 50%;
position: relative;
top: -6px;
}
</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/AVvXsEilnYvhLxpOkH3nnA387x_1e7UunLQ8LCogONOvIpfSV_oiBkZSXfB0gmW9sQ-KmQFVCWiuBODH9UicR2s4JzzrFP3-TqWcwBtNqvCeIcMJIy8KP13NS-JORqGu_Yr_ERmIEt-Kyspe5Dic/s1600-r/katie-mys2010s.jpg" /></div>
<div class="slide">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfbN2289UMlTNC8rnhEp9O1hcfqJ29Drci8rH0lad_F2ysa7u2F9bNzefiRLhscchQ5vKGjzbFzu1EwA_Ht3z94tdWVN_maF6h2MSk-TMAACra6I-ljNub3hz900SL70JMabTv_yaJk4hs/s1600-r/blonde-mys2010s.jpg" /></div>
<div class="slide">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYam9BcOJ3qVG10hNbMktu7hiD8UfLakTJqhpYaiA7WpbTX833bdzIOjIhuvohDc9kr8_actEmWnUlsIObN6Z9sLHOa1N4CZ55tnsEyPWVnyRp80acweGzGRkW2ZhQD14x5WPojMfocqE-/s1600-r/blonde-mys2010.jpg" /></div>
<div class="slide">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZBC_DIE3AmkIie_61c-MoDInKKA4idwbS0zarqMOVkp7pHYQoQUdQ3F3AaAZ0S1Y-qtiPiQ21I2Pmt_VglYSFoSMUucFvRK_UYSGRIs9yKsdX6ay6Dq_UltXXhVEsvAsxjm4zfc9wk_5r/s1600-r/ashley-mys2010.jpg" /></div>
</div>
<div class="slide-descriptions">
<div class="sl-descr">
<a href="http://www.mrwallpaper.com/woman-with-martini-cocktail-wallpaper/" target="_blank" title="Myscript2010">Source </a> Wallpaper</div>
<div class="sl-descr">
<a href="http://www.mrwallpaper.com/woman-with-martini-cocktail-wallpaper/" target="_blank" title="Myscript2010">Source </a> Wallpaper</div>
<div class="sl-descr">
<a href="http://www.mrwallpaper.com/woman-with-martini-cocktail-wallpaper/" target="_blank" title="Myscript2010">Source </a> Wallpaper</div>
<div class="sl-descr">
<a href="http://www.mrwallpaper.com/woman-with-martini-cocktail-wallpaper/" target="_blank" title="Myscript2010">Source </a> Wallpaper</div>
</div>
<div class="caption">
</div>
</div>
</div>
<!-- GRADIEND -->
<div class="ap" id="ap">
<center>
<h2>
<audio id="player"><source src="https://sites.google.com/site/code6916/lagu/Christine-Mys2010s.mp3" type="audio/mpeg"></audio></h2>
</a></div>
<header>
<div align="center">
<a href="https://Link Download"title="Myscript2010s"><b>DOWNLOAD CODE</b></a>
</div>
</header>
<link rel='stylesheet prefetch' href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css'>
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'></script><script src='//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js'></script><script src='http://cdnjs.cloudflare.com/ajax/libs/mootools-more/1.4.0.1/mootools-more-yui-compressed.js'></script>
<script>
"use strict";
/**
* Requires mootools core and mootools more Slider
*/
var Player = function(audio_element, options) {
this.audio_obj = document.id(audio_element);
this.options = options;
this.init = function() {
this.status = 'pause';
//this.duration = this.audio_obj.duration;
this.time = '00';
this.render();
this.addEvents();
};
this.render = function() {
// source controller
this.source_ctrl_el = new Element('div.source-ctrl.fa.fa-play');
this.source_ctrl_button = new Element('div.source-ctrl-container')
.adopt(this.source_ctrl_el);
// time info
this.time_current_el = new Element('span.time-current');
this.time_duration_el = new Element('span.time-duration');
var time_info = new Element('div.time-info')
.adopt(
this.time_current_el,
new Element('span.time-current-duration-separator').set('text', ' / '),
this.time_duration_el
);
// volume ctrl
this.volume_slider = new Element('div.volume-slider');
this.volume_ctrl = new Element('div.volume-ctrl')
.adopt(
new Element('span.fa.fa-2x.fa-volume-off'),
this.volume_slider.adopt( new Element('div.volume-knob')),
new Element('span.fa.fa-2x.fa-volume-up')
);
var container = new Element('div.player')
.adopt(
this.source_ctrl_button,
new Element('div.volume-ctrl-container').adopt(this.volume_ctrl),
time_info
)
.inject(this.audio_obj, 'after');
};
this.addEvents = function() {
this.audio_obj.load();
this.audio_obj.addEventListener('loadeddata', function() {
this.time_duration_el.set('text', this.toHHMMSS(this.audio_obj.duration));
this.time_current_el.set('text', this.toHHMMSS(this.audio_obj.currentTime));
}.bind(this));
this.source_ctrl_button.addEvent('click', this.sourceCtrlAction.bind(this));
new Slider(this.volume_slider, this.volume_slider.getElement('.volume-knob'), {
range: [0, 100],
initialStep: this.audio_obj.volume * 100,
onChange: function(value){
this.audio_obj.volume = value/100;
}.bind(this)
});
};
this.sourceCtrlAction = function() {
if(this.status == 'pause') {
this.play();
}
else {
this.pause();
}
};
this.toHHMMSS = function(s) {
var sec_num = parseInt(s, 10);
var hours = Math.floor(sec_num / 3600);
var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
var seconds = sec_num - (hours * 3600) - (minutes * 60);
if(hours < 10) { hours = "0" + hours; }
if(minutes < 10) { minutes = "0" + minutes; }
if(seconds < 10) { seconds = "0" + seconds; }
var time = (hours == '00' ? '' : hours + ':') + minutes + ':' + seconds;
return time;
}
this.play = function() {
this.time_current_el.set('text', this.toHHMMSS(this.audio_obj.currentTime));
this.time_ti = setInterval(function() {
this.time_current_el.set('text', this.toHHMMSS(this.audio_obj.currentTime));
}.bind(this), 1000);
this.source_ctrl_el.removeClass('fa-play').addClass('fa-pause');
this.audio_obj.play();
this.status = 'play';
};
this.pause = function() {
clearInterval(this.time_ti);
this.source_ctrl_el.removeClass('fa-pause').addClass('fa-play');
this.audio_obj.pause();
this.status = 'pause';
};
}
var player = new Player('player');
player.init();
</script>
<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 With Audio
Lihat juga chop untuk background yang berbeda Klik di sini Chop Slider With Audio
Kode Script Iklan melayang
