Kısa süre önce bloguma eklediğim en üstte Youtube tarzı yükleme çubuğu
bir çok blog sahibi tarafından fark edilmiş olmalı ki birden fazla
paylaşmam yönünde mesaj aldım, eklenti ücretsiz olduğu için paylaşmakta
sıkıntı görmedim açıkçası. Eklenti Rico Sta. Cruz adında birisi tarafından yapılmış olup, NProgres adı ile dağıtılmıştır.Eklentiyi benim gibi blogger altyapısını
kullanan bloglarınız da kullanmak için şu adımları izleyebilirsiniz;
Blogger Kumanda Paneli ➜ Blogunuz ➜ Şablon ➜ HTML'yi düzenle kısmına girip aşağıdaki kodu bulun
]]></b:skin>
Altına aşağıdaki kodu ekleyin,
<script src='http://ricostacruz.com/nprogress/vendor/jquery-1.10.js'></script>
<script src='http://ricostacruz.com/nprogress/nprogress.js'></script>
Hemen sonrasında aşağıdaki kodu bulalım,
</body>
Bulduğumuz kodun üstüne aşağıdaki kodu ekleyelim,
<script>
$('body').show();
$('.version').text(NProgress.version);
NProgress.start();
setTimeout(function() { NProgress.done(); $('.fade').removeClass('out'); }, 1000);
</script>
Renkli olarak işaretlediğim bölüm çubuğun dolma süresidir kendi blogunuzun açılma süresine göre düzenleyebilirsiniz.
Aşağıdaki kodları ise blogunuzun css bölümüne ekleyin,
#nprogress {
pointer-events: none;
-webkit-pointer-events: none;
}
#nprogress .bar {
background: #29d;
position: fixed;
z-index: 100;
top: 0;
left: 0;
width: 100%;
height: 2px;
}
/* Fancy blur effect */
#nprogress .peg {
display: block;
position: absolute;
right: 0px;
width: 100px;
height: 100%;
box-shadow: 0 0 10px #29d, 0 0 5px #29d;
opacity: 1.0;
-webkit-transform: rotate(3deg) translate(0px, -4px);
-moz-transform: rotate(3deg) translate(0px, -4px);
-ms-transform: rotate(3deg) translate(0px, -4px);
-o-transform: rotate(3deg) translate(0px, -4px);
transform: rotate(3deg) translate(0px, -4px);
}
#nprogress .spinner {
display: block;
position: fixed;
z-index: 100;
top: 15px;
right: 15px;
}
#nprogress .spinner-icon {
width: 14px;
height: 14px;
border: solid 2px transparent;
border-top-color: #29d;
border-left-color: #29d;
border-radius: 10px;
-webkit-animation: nprogress-spinner 400ms linear infinite;
-moz-animation: nprogress-spinner 400ms linear infinite;
-ms-animation: nprogress-spinner 400ms linear infinite;
-o-animation: nprogress-spinner 400ms linear infinite;
animation: nprogress-spinner 400ms linear infinite;
}
@-webkit-keyframes nprogress-spinner {
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-moz-keyframes nprogress-spinner {
0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
}
@-o-keyframes nprogress-spinner {
0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@-ms-keyframes nprogress-spinner {
0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes nprogress-spinner {
0% { transform: rotate(0deg); transform: rotate(0deg); }
100% { transform: rotate(360deg); transform: rotate(360deg); }
}
İşlemleri sorunsuz bir şekilde yaparsanız eklenti blogunuz da
çalışacaktır, sorun yaşadığınız yerlerde yorum formunu kullanıp
sorularınıza cevap alabilirsiniz, görüşmek üzere.
