Blogger için İlerleme Çubuğu Eklentisi

Bugün kullanıcının sayfanın UX Tasarımına dikkatini çekmek için harika tasarım tekniğiyle karşılaştım. Şu anki okuma pozisyonunu gösterecek bir göstergesi olan bir kaç web sayfası gördüm. Normalde, böyle bir Okuma Pozisyonu Göstergesi blog yazılarında veya uzun form yazılarında kullanılır ve kullanıcıların okumayı bitirmekten ne kadar uzakta olduklarını anlamalarına yardımcı olur, ancak bunu Chrome'un android uygulamasını form yükleme çubuğunda (ve Apple'ın tarayıcı Safari'sinde de bulabilirsiniz), çok benzer görünümlü bir yükleme çubuğu).

Eklenti geliştiricisi, kullanıcının makalenin tamamını okumak veya tüm web sayfasına göz atmak istiyorsa kullanıcının sayfayı kaydırması gerektiğinin gerçeğini izleyerek basit tekniği kullanır. Kullandığı teknik, okuyucunun yaklaşık konumunu belirlemek için anahtar olması muhtemel olan kaydırma olayı etrafında döner.

Bu yazıda, Blogger bloguna Okuma Pozisyonu Göstergesini nasıl ekleyeceğimizi öğreneceğiz, uygulamak için basit adımları izlememiz gerekiyor:

Öncelikle HTML şablon editör sayfamızı açıyoruz ve Ctrl+F yardımıyla </head> kodunu aratıp buluyoruz.

Daha sonra bulduğumuz kodun üzerine gelecek şekilde aşağıda ki JavaScript kodlarını ekliyoruz.

JS<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type='text/javascript'>
//<![CDATA[

$(document).ready(function(){
 
    var getMax = function(){
        return $(document).height() - $(window).height();
    }
 
    var getValue = function(){
        return $(window).scrollTop();
    }
 
    if('max' in document.createElement('progress')){
        // Browser supports progress element
        var progressBar = $('progress');
     
        // Set the Max attr for the first time
        progressBar.attr({ max: getMax() });

        $(document).on('scroll', function(){
            // On scroll only Value attr needs to be calculated
            progressBar.attr({ value: getValue() });
        });
   
        $(window).resize(function(){
            // On resize, both Max/Value attr needs to be calculated
            progressBar.attr({ max: getMax(), value: getValue() });
        }); 
    }
    else {
        var progressBar = $('.progress-bar'),
            max = getMax(),
            value, width;
     
        var getWidth = function(){
            // Calculate width in percentage
            value = getValue();         
            width = (value/max) * 100;
            width = width + '%';
            return width;
        }
     
        var setWidth = function(){
            progressBar.css({ width: getWidth() });
        }
     
        $(document).on('scroll', setWidth);
        $(window).on('resize', function(){
            // Need to reset the Max attr
            max = getMax();
            setWidth();
        });
    }
});
$(document).ready(function(){

$('#flat').addClass("active");
$('#progressBar').addClass('flat');

$('#flat').on('click', function(){
$('#progressBar').removeClass().addClass('flat');
$('a').removeClass();
$(this).addClass('active');
$(this).preventDefault();
});

}); 
//]]>
</script>

Yine aynı şekilde HTML kod editör sayfamızda "<b:includable id='post' var='post'> <article class='post hentry'>" kodunu buluyoruz ve bulduğumuz kodun altına gelecek şekilde aşağıda ki HTML kodlarını ekliyoruz.

HTML<progress id='progressBar' value='0'>
<div class='progress-container'>
<span class='progress-bar'/>
</div>
</progress>

Ve son olarak bu eklentiyi şekillendirme ve renklendirmek için kod editör sayfamız da ]]></b:skin> kodunu buluyoruz ve bulduğumuz kodun üzerine gelecek şekilde aşağıda ki CSS kodlarını ekliyoruz.

CSS/* reading position indicator */
progress {
  /* Positioning */
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 101;

  /* Dimensions */
  width: 100%;
  height: .25em;

  /* Reset the apperance */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;

  /* Get rid of the default border in Firefox/Opera. */
  border: none;

  /* For Firefox/IE10+ */
  background-color: transparent;

  /* For IE10+, color of the progress bar */
  color: red;
}

progress::-webkit-progress-bar {
  background-color: transparent;
}

.flat::-webkit-progress-value {
  background-color: red;
}

.flat::-moz-progress-bar {
  background-color: red;
}


.progress-container {
  width: 100%;
  background-color: transparent;
  position: fixed;
  top: 0;
  left: 0;
  height: .25em;
  display: block;
}

.progress-bar {
  background-color: red;
  width: 50%;
  display: block;
  height: inherit;
}

İsterseniz ilerleme çubuğunun rengini değiştirme seçeneklerimiz vardır:

İlerleme çubuğunun arka plan rengini değiştirmek için arka plan rengini düzenleyin : kırmızı;
İlerleme çubuğunun yüksekliğini değiştirmek için düzenleme yüksekliğini düzenleyin : .25em;

Demo sayfasını kontrol edebilirsiniz.

Bütün işlemler bu kadar herkese kolay gelsin.

Demo Buraya Tıkla