Cara Membuat progres Indikator scrol Artikel
selamat pagi boss...
Setelah kemare sya membuat artikel yang berjudul cara membuat indikator scroll di blog dan kali ini sya akan membuat versi ke 2 nya namun kali ini berbeza ya bos ini sudah saya coba di template blog sya dan berhasil .skrang giliran kalian .untuk mencoba .dan di bawah ini adalah gambar contoh: kalian bisa liat..
Di Bawah ini adalah codenya .
silahkan kalian masuk dulu di blogger kalian login terlebih dahulu dan edit html template kalian dan masukan jquery di bawah ini ..
</head>
Lanjut Kan Dan Di bawah Ini Adalah Scrip Nya Kalia bisa Pastel Kan Kode Di bawa Ini tepat Tepat Di Atas Kode \\]]</script>
Ok semoga Membantu .Kalian Bisa Komentar Di bawah .Jika Kalian Kurang Mengerti Denga Apa Yang Saya Sampaikan Di Atas Sengaja .saya Berikan Tutorial Tidak Mendetail Agar Kalian Bisa Berkomentar ..Dan Saya Akan Berikan Tanggapan Steip By Setep Sajah BIAR mudah Di Mengerti ......
Ok sya Akhiri .Artikel Kali Ini ..Slamat Mencoba
Setelah kemare sya membuat artikel yang berjudul cara membuat indikator scroll di blog dan kali ini sya akan membuat versi ke 2 nya namun kali ini berbeza ya bos ini sudah saya coba di template blog sya dan berhasil .skrang giliran kalian .untuk mencoba .dan di bawah ini adalah gambar contoh: kalian bisa liat..
sumber: https://webcensar.com
silahkan kalian masuk dulu di blogger kalian login terlebih dahulu dan edit html template kalian dan masukan jquery di bawah ini ..
<script src="http://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript">Namun Kalian Bisa Lewati Jika Template Kalian Sudah Ada Kode Sperti Di Atas Tpi Kalian Cek Dulu Coba Carikan Kata Kuci 1.1.2.1-min.js Atau min.js Jika Tidak Ada Silahkan Kalian Kopas kode di Di Atas Dan Pastel Kan Tepat Di Atas Kode
</head>
Lanjut Kan Dan Di bawah Ini Adalah Scrip Nya Kalia bisa Pastel Kan Kode Di bawa Ini tepat Tepat Di Atas Kode \\]]</script>
*/
(function ($) {
$.progressIndicator = function(options){
if(typeof options===undefined){
options = {};
}
// set default
options = $.extend(true, {
direction : 'top',
target : 'body', // selector
barColor: 'rgb(253, 191, 38)',
percentageEnabled : false,
percentageColor: '#222',
easingSpeed : 0.5,
height: 4,
onStart : function(){
// console.log("onStart");
},
onEnd : function(){
// console.log("onEnd");
},
onProgress : function(perecent){
// console.log(perecent);
}
}, options);
var wrapperCss = {
position: 'fixed',
transition: 'transform '+options.easingSpeed+'s cubic-bezier(.14,.52,.4,.78)',
background: options.barColor
};
switch(options.direction){
case 'top':
case 'bottom':
if(options.direction === 'top'){
wrapperCss.top = 0;
}else{
wrapperCss.bottom = 0;
}
wrapperCss.left = 0;
wrapperCss.transform = 'translate3d(-100%, 0, 0)';
wrapperCss.width = '100%';
wrapperCss.height = options.height+'px';
break;
case 'left':
case 'right':
if(options.direction === 'left'){
wrapperCss.left = 0;
}else{
wrapperCss.right = 0;
}
wrapperCss.top = 0;
wrapperCss.transform = 'translate3d(0, -100%, 0)';
wrapperCss.width = options.height+'px';
wrapperCss.height = '100%';
}
var perCss = {
position: 'fixed',
'line-height' : '1em',
background: 'rgba(255, 255, 255, 0.7)',
color: options.percentageColor,
padding: '2px 2px',
'font-size' : '8px'
};
if(options.percentageEnabled === false){
perCss.display = 'none';
}
switch(options.direction){
case 'top':
case 'bottom':
var top = options.height > 9 ? '50%' : '100%';
if(options.direction === 'top'){
perCss.top = top;
}else{
perCss.bottom = top;
}
if(options.height > 9){
perCss['margin-top'] = '-5px';
perCss.padding = '0 3px';
perCss.background = 'transparent';
}
perCss.right = 0;
break;
case 'left':
case 'right':
if(options.direction === 'left'){
perCss.left = '100%';
}else{
perCss.right = '100%';
}
perCss.bottom = 0;
}
$('body').append(
$('
')
.css(wrapperCss)
.attr('id', 'progress-indicator')
.data('direction', options.direction)
.data('onStart', options.onStart)
.data('onProgress', options.onProgress)
.data('onEnd', options.onEnd)
.html(
$('
').css(perCss)
)
);
this.ex = function(){
var $progressDom = $('#progress-indicator');
var per = -1;
var scrollTop = $(window).scrollTop();
if($(options.target).length ===0){
return false;
}
$(options.target).each(function(){
if($(this).offset().top > scrollTop){
return true; // continue
}
per = (scrollTop / ($(this).outerHeight() - $(window).height())) * 100;
});
if(per > 100){
per = -1;
}
var transformValue = '';
switch($progressDom.data('direction')){
case 'top':
case 'bottom':
transformValue = 'translate3d(-'+(100-per)+'%, 0, 0)';
break;
case 'left':
case 'right':
transformValue = 'translate3d(0, -'+(100-per)+'%, 0)';
}
$progressDom.css({
transform: transformValue
}).children('div').css({
// transform: 'translate3d('+(per)+'%, 0, 0)'
}).text(parseInt(per)+'%');
if(per == 0){
$progressDom.data('onStart')();
}else if(per == 100){
$progressDom.data('onEnd')();
}else{
$progressDom.data('onProgress')(per);
}
}
$(window).on('scroll.indicator', this.ex).trigger('scroll.indicator');
};
$.progressIndicator({ barColor: 'rgb(191,38,60) ', percentageEnabled : true});
})(jQuery); Di bawah ini adalah html nya kalian taro di atas kode </body><div class='container'/>Untu warna kalian bisa sesuaikan sendiri dan untuk melihat demonya silahkan klik DEMO
Ok semoga Membantu .Kalian Bisa Komentar Di bawah .Jika Kalian Kurang Mengerti Denga Apa Yang Saya Sampaikan Di Atas Sengaja .saya Berikan Tutorial Tidak Mendetail Agar Kalian Bisa Berkomentar ..Dan Saya Akan Berikan Tanggapan Steip By Setep Sajah BIAR mudah Di Mengerti ......
Ok sya Akhiri .Artikel Kali Ini ..Slamat Mencoba
