22 Mart 2019 Cuma

Blogger'a İlerleme Çubuğu Nasıl Eklenir?

Mart 22, 2019 Blogger İpuçları , Blogging 0 Comments
Önceki Blogger Okuma İlerleme Göstergesi (Read Meter)'nden farklı olarak bu eklenti sayfamızın üst tarafında bulunacak ve yüzde değerleri görünmeyecek. Sayfanız aşağı doğru kaydıkça sayfanın üst kısmında yatay bir çubuk dolacak. Görselliğe ve böyle detaylara önem veriyorsanız kullanabilirsiniz.

1. Adım
Blogger > Tema > HTML'yi Düzenle yolunu izleyip aşağıdaki CSS kodlarını ]]></b:skin> kodunun hemen üzerine ekleyin.

[progress{position:fixed;left:0;top:0;width:100%;height:5px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background-color:transparent;color:#5190d5;z-index:1000}
progress::-webkit-progress-bar{background-color:transparent;z-index:10}
progress::-webkit-progress-value{background-color:#5190d5;z-index:10}
progress::-moz-progress-bar{background-color:#5190d5;z-index:10}
.progress-container{width:100%;background-color:transparent;position:fixed;top:0;left:0;height:3px;display:block;z-index:10}
.progress-bar{background-color:#5190d5;width:0%;display:block;height:inherit;z-index:10}]

Turuncu ile renklendirdiğim yerleri düzenleyerek ilerleme çubuğunun rengini, yüksekliğini ve konumunu kendinize göre belirleyebilirsiniz.

2. Adım
<body ya da <body> kodunu bulup hemen altına aşağıdaki HTML kodlarını ekleyelim.

[<progress value='0' max='1'>
   <div class='progress-container'>
      <span class='progress-bar'></span> 
   </div>
</progress>]

3. Adım
</body> kodunu bulup aşağıdaki JavaScript kodlarını üstüne ekleyelim.

[<script type='text/javascript'>
//<![CDATA[
// Progress Scrollbar
$(document).ready(function(){var n=function(){return $(document).height()-$(window).height()},o=function(){return $(window).scrollTop()};if("max"in document.createElement("progress")){(r=$("progress")).attr({max:n()}),$(document).on("scroll",function(){r.attr({value:o()})}),$(window).resize(function(){r.attr({max:n(),value:o()})})}else{var e,t,r=$(".progress-bar"),i=n(),c=function(){r.css({width:(e=o(),t=e/i*100,t+="%")})};$(document).on("scroll",c),$(window).on("resize",function(){i=n(),c()})}});
//]]>
</script>]

Sonuç
By on
Tür: , , , ,

Hiç yorum yok:

Yorum Gönder

Kaydol: Kayıt Yorumları (Atom)