Blogger Okuma İlerleme Yüzdesi Çubuğu Ekleme

Sitenizde yazdığınız yazılarda okuyucuya yazıda ne kadar ilerlediği göstermek isteyebilirsiniz. İşte blogger okuma ilerleme yüzdesi gösterge çubuğu tam olarak bu işe yarıyor. Yazının altında okuyucu yazı içerisinde ilerledikçe artan şık bir gösterge çubuğu ekleniyor.

Blogger yazı okuma yüzde göstergesi okuyuculara yazının ne kadarını okuduğunu ve daha ne kadar süre okuyabileceğini gösterirken , yazıları okumaya teşvik eder.

Özellikle uzun makaleler ve teknik bilgiler sunan bir web sitesiyseniz okuma yüzdesi eklentisi oldukça işinize yarayacaktır.

Bu yazının devamında blogger okuma ilerleme yüzdesi çubuğunu blog sitemize nasıl ekleyeceğimizi anlatacağım.

Blogger Sitesine Okuma İlerleme Yüzde Çubuğu Nasıl Eklenir ?

Birinci adım : Blogger hesabınıza giriş yapın ve blogger kullanıcı panelinden "Tema > HTML'yi düzenle" adımlarını takip edin.

İkinci adım : Blogger kod listeniz içerisinden CTRL + F yardımı ile </head> kodunu bulun.

Üçüncü adım : </head> Kodunun bir satır üzerine aşağıdaki CSS kodlarını ekleyin.

CSS KODLARI

<b:if cond='data:view.isPost'>
<style>
#read_meter{position:fixed;width:100%;height:4px;left:0;bottom:0;z-index:1000001;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:transparent;color:#134}
progress#read_meter::-webkit-progress-bar{background-color:rgba(255,255,255,0.75)}
progress#read_meter::-webkit-progress-value{background-color:#2d2d2d}
progress#read_meter::-moz-progress-bar{background-color:#2d2d2d}
.percentage_number{position:fixed;width:46px;bottom:-8px;left:50%;left:calc(50% - 26px);z-index:10000001;padding:3px;font-size:0.7em;background:#313131;color:#fff;box-shadow:2px 2px 10px rgba(0,0,0,0.3);text-align:center;opacity:0;border-radius:4px;animation:popDown 0.2s forwards}
.percentage_number.display{animation:popUp 0.2s forwards}
.percentage_number::after{content:attr(title);display:inline-block}
@keyframes popUp{0%{bottom:-8px;opacity:0}100%{bottom:8px;opacity:0.7}}
@keyframes popDown{0%{bottom:8px;opacity:0.7}100%{bottom:-8px;opacity:0}}
</style>
</b:if>

Dördüncü adım : Blogger kod listeniz içerisinden bu kez </body> Kodunu aratın ve bir satır üzerine aşağıdaki JavaScript kodlarını ekleyin.

JavaScript KODLARI

<b:if cond='data:view.isPost'>
<script>
// <![CDATA[
function readProgressMeter(){var winHeight=$(window).height(),docHeight=$('.post-body').height()+$('.post-body').offset().top,progressBar=$('#read_meter'),max,value;var percent_show=$(".percentage_number");var scrollTimer;max=docHeight-winHeight;progressBar.attr('max',max);$(this).on('scroll',function(){value=$(window).scrollTop()-$('.post-body').offset().top;progressBar.attr('value',value);var perCentage=((value / max)*100);var roundedPercentage=Math.round((Math.round(perCentage*100)/ 100));if(perCentage>=1&&perCentage<=101){clearTimeout(scrollTimer);progressBar.attr('title',"Okudunuz "+roundedPercentage+"% of the article, till now.");percent_show.addClass("display");if(perCentage<4){percent_show.css({'left':perCentage+"%",'margin-left':'0px'});}else if(perCentage>96){percent_show.css({'left':perCentage+"%",'margin-left':'-50px'});}else{percent_show.css({'left':perCentage+"%",'margin-left':'-28px'});}
percent_show.attr("title",Math.floor((Math.round(perCentage*100)/ 100))+"%");scrollTimer=setTimeout(function(){percent_show.removeClass("display")},700);}});}
$(function(){if($('body').length>0){window.setTimeout(function(){readProgressMeter();},1000);serve_adBlock_Notice();}});
// ]]>
</script>
</b:if>

Beşinci adım : Blogger kod listeniz içerisinden bu kez <body> kodunu aratın ve bir satır altına aşağıdaki HTML kodlarını ekleyin.

HTML KODLARI

<b:if cond='data:view.isPost'>
<div class='percentage_number'></div>
<progress id='read_meter' value='0'></progress>
</b:if>

Yukarıdaki adımları tamamlarken önemli olan bir nokta bir satır altına ve bir satır üstüne ibarelerine dikkat etmenizdir. İşlemi doğru bir şekilde tamamladıktan sonra kod sayfasını kaydedin. Okuma ilerleme çubuğu'nu kontrol etmek için blogunuzdan herhangi bir yazıyı açın.

Ön İzleme

Ön izleme için aşağıki kodları kopyalayıp KOD ÖN İZLEME sayfamızda test ederek inceleyebilirsiniz.

Ön İzleme Kodları

<!DOCTYPE html>
<html class="item">
<head>
<title>Kodeks Editör</title>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');
body {font-family: 'Fira Sans Condensed', sans-serif;padding:20px;margin:0;line-height:1.6}
#read_meter{position:fixed;left:0;bottom:0;z-index:10000001;width:100%;height:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background-color:transparent;color:#135}
progress#read_meter::-webkit-progress-bar{background-color:rgba(255,255,255,0.75)}
progress#read_meter::-webkit-progress-value{background-color:#2d2d2d}
progress#read_meter::-moz-progress-bar{background-color:#2d2d2d}
.percentage_number{position:fixed;bottom:-8px;left:50%;left:calc(50% - 26px);width:46px;z-index:100000001;padding:3px;font-size:0.7em;background-color:#313131;color:#fff;box-shadow:2px 2px 10px rgba(0,0,0,0.2);text-align:center;border-radius:4px;opacity:0;animation:popDown 0.2s forwards}
.percentage_number.display{animation:popUp 0.2s forwards}
.percentage_number::after{content:attr(title);display:inline-block}
@keyframes popUp{0%{bottom:-8px;opacity:0}100%{bottom:8px;opacity:0.7}}
@keyframes popDown{0%{bottom:8px;opacity:0.7}100%{bottom:-8px;opacity:0}}
</style>
</head>
<body class="item">
<div class='percentage_number'></div>
<progress id='read_meter' value='0'></progress>
<div class="page">
<div class="post-body">
<h3 id="toc_1">Blogunuzda reklam yayınlama</h3>
<p>Blogger ile, AdSense reklamları ve başka reklamlar göstererek blogunuz üzerinden para kazanabilirsiniz.</p>
<p><u>Not:</u> Yetişkinlere yönelik içerik barındıran bloglarda reklam gösterilmesi yasaktır.
<h3 id="toc_2">Reklam göstermek için AdSense'e kaydolma</h3>
<ol>
<li>Blogger'da oturum açın</li>
<li>Sol üstte, Aşağı oku tıklayın.</li>
<li>Reklam yayınlanmasını istediğiniz blogu tıklayın.</li>
<li>Soldaki menüde <strong>Kazançlar</strong>'ı tıklayın.</li>
<li><strong>AdSense'e kaydol</strong>'u tıklayın. Düğmeyi görmüyorsanız blogunuz AdSense için uygun değil demektir. Nedenini öğrenmek için AdSense uygunluk kontrol listesini gözden geçirin.</li>
<li>Forma Google Hesabı bilgilerinizi girin veya yeni bir hesap oluşturun.</li>
</ol>
<p><strong>Not:</strong>Başvurunuzun incelenmesi en az 48 saat sürebilir.</p>
<h3 id="toc_3">Yayınlarınız arasında reklam gösterme</h3>
<ol>
<li>Blogger'da oturum açın.</li>
<li>Sol üstte, Aşağı oku tıklayın.</li>
<li>Reklam gösterilmesini istediğiniz blogu tıklayın.</li>
<li>Soldaki menüde <strong>Düzen</strong>'i tıklayın.</li>
<li>Şablonunuza bağlı olarak:
<ul>
<li>"Blog Yayınları"nda, "Sayfa Gövdesi" bölümünde <strong>Düzenle</strong>'yi tıklayın.</li>
<li>"Blog Yayınları"nda, "Ana" bölümünde&nbsp; <strong>Düzenle</strong>'yi tıklayın.</li>
</ul>
</li>
<li>Görüntülenen pencerede "Yayınlar Arasında Reklam Göster" seçeneğinin yanındaki kutuyu işaretleyin.</li>
<li>Reklam biçimini, renkleri ve reklamların ne sıklıkta gösterileceğini belirtin.</li>
<li><strong>Kaydet</strong>'i tıklayın.&nbsp;</li>
</ol>
<h3 id="toc_4">Sütunlarda reklam gösterme</h3>
<ol>
<li>Blogger'da oturum açın.</li>
<li>Soldaki menüde<strong>Düzen</strong>'i tıklayın.</li>
<li><strong>Gadget Ekle</strong>'yi tıklayın.</li>
<li>AdSense gadget'ını seçin ve Ekle'yi tıklayın.</li>
<li>AdSense'i yapılandırın ve <strong>Kaydet</strong>'i tıklayın.</li>
<li>Sağ üstte <strong>Düzenlemeyi kaydet</strong>'i tıklayın.</li>
</ol>
<h3 id="toc_5">Diğer reklam hizmetlerinden reklamlar gösterme</h3>
<ol>
<li>Blogger'da oturum açın.</li>
<li>Sol üstte, Aşağı oku tıklayın.</li>
<li>Reklam gösterilmesini istediğiniz blogu tıklayın.</li>
<li>Soldaki menüde <strong>Düzen</strong>'i tıklayın.</li>
<li>Reklam yerleştirilmesini istediğiniz alanda <strong>Gadget ekle</strong>'yi tıklayın.</li>
<li>Görüntülenen pencerede, "Temel" altındaki HTML/JavaScript'i bulun ve Ekle'yi tıklayın.</li>
<li>Bir başlık girin (isteğe bağlı).</li>
<li>Reklam hizmeti web sitesinden kodu kopyalayıp içerik bölümüne yapıştırın.</li>
<li><strong>Kaydet</strong>'i tıklayın.&nbsp;</li>
</ol>
<h3 id="toc_6">Blogger kazançları raporunu görüntüleme</h3>
<ol>
<li>Blogger'da oturum açın.</li>
<li>Raporunu görmek istediğiniz blogu tıklayın.</li>
<li><strong>Kazançlar</strong>'ı tıklayın.</li>
<li><strong>Kazançlarınıza ilişkin ayrıntılı bilgi için AdSense'i ziyaret edin</strong>'i tıklayın.</li>
</ol>
<p>Raporunuzdaki her bir terimin ne anlama geldiğini öğrenmek için AdSense sözlüğüne bakın.</p>
<h3 id="toc_7">AdSense açılmıyorsa ne yapmak gerekir?</h3>
<ol>
<li>Blogger'da oturum açın.</li>
<li>Sol üstte, Aşağı oku tıklayın.</li>
<li>Blogger kontrol panelinde, AdSense reklamı yayınlamak istediğiniz blogu tıklayın.</li>
<li>Soldaki menüde, <strong>Düzen</strong>'i seçin.</li>
<li>AdSense gadget'ı altında, <strong>Düzenle</strong>'yi tıklayın.</li>
<li><strong>Kaydet</strong>'i tıklayın.</li>
<li>Blogunuzda bulunan her AdSense gadget'ı için 4. ve 5. adımları yineleyin.</li>
<li>"Blog Yayınları" gadget'ınızın altında, <strong>Düzenle</strong>'yi tıklayın.</li>
<li><strong>Kaydet</strong>'i tıklayın.</li>
<li>Sağ üstte <strong>Düzenlemeyi kaydet</strong>'i tıklayın.</li>
<li>Hesabınızın hâlâ etkin olup olmadığını kontrol etmek için AdSense'e gidin.</li>
</ol>
</div>
</div>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' type='text/javascript'></script>
<script>
//<![CDATA[
function readProgressMeter(){var winHeight=$(window).height(),docHeight=$('.post-body').height()+$('.post-body').offset().top,progressBar=$('#read_meter'),max,value;var percent_show=$(".percentage_number");var scrollTimer;max=docHeight-winHeight;progressBar.attr('max',max);$(this).on('scroll',function(){value=$(window).scrollTop()-$('.post-body').offset().top;progressBar.attr('value',value);var perCentage=((value / max)*100);var roundedPercentage=Math.round((Math.round(perCentage*100)/ 100));if(perCentage>=1&&perCentage<=101){clearTimeout(scrollTimer);progressBar.attr('title',"Okudunuz "+roundedPercentage+"% of the article, till now.");percent_show.addClass("display");if(perCentage<4){percent_show.css({'left':perCentage+"%",'margin-left':'0px'});}
else if(perCentage>96){percent_show.css({'left':perCentage+"%",'margin-left':'-50px'});}
else{percent_show.css({'left':perCentage+"%",'margin-left':'-28px'});}
percent_show.attr("title",Math.floor((Math.round(perCentage*100)/ 100))+"%");scrollTimer=setTimeout(function(){percent_show.removeClass("display")},700);}});}
$(function(){if($('body').length>0){window.setTimeout(function(){readProgressMeter();},1000);serve_adBlock_Notice();}});
//]]>
</script>
</body>
</html>