Merhaba arkadaşlar Bloger kullanıcıları Google Code servisinin kapanması ile bir çok (js) tabanlı 3. parti kod ile çalışan eklentileri kullanamaz duruma geldi. Bunun sebebi kodları paylaşan web sitelerin js dosyalarını Google Code veya kendi dizinlerinde tutarak eklentilerin kendi ağları üzerinden servis edilmesiydi bu tür sebeblerden ötürüde Günümüzde şuandan itibaren blogunuza girdiginizde çalışan Blogger Sayfa Numaralandırma Eklentisi artık çalışamaz duruma geldi.
Üzülmeyin sizler için 2016 yılının teknolojisine uygun, HTML5 uyumlu olan Blogger sayfa numaralandırma eklentisini blogunuza nasıl ekleyeceğinizi anlatacağım.
!!! Eğer kodlar konusunda deneyimli değilseniz her ihtimale karşı şablonun yedeğini almanızı öneririm. Uyarı Şablonunuz çökerse sorumluluk tamamen size aittir Lütfen Yedek alınız…
ADIM 1: İlk olarak eklentinin CSS kodlarını şablona ekleyeceğiz. Bu kodlar üzerinde oynama yaparak eklentinin renklerini ve yazı boyutlarını değiştirebilirsiniz. CSS kodlarını şablona eklemek için Blogger kumanda panelimize gidip Şablon > HTML’yi Düzenle diyerek şablonumuzun kodlarının olduğu bölümü açacağız. Burada Ctrl+F tuş kombinasyonunu kullanarak açılan arama kutusunun da yardımıyla <b:skin>…</b:skin> yazan bölümü bulup 1 kez tıklayacağız. Böylece o bölüm genişleyecek ve tüm CSS kodları gözükecek. Ardından </b:skin> kodunun hemen üzerine şu CSS kodları yapıştıracağız.
/* Blogger Sayfa Numaralanadırma Eklentisi – Network Dizayn*/
.navipager{clear:both;margin:0;text-align:center;font-weight:bold;color:#fff !important;}
.navipager span,.navipager a{padding:5px 15px;margin-right:3px;display:inline-block;color:#fff !important;background-color:#9cd9d5;line-height:1.6em}
.navipager .current{color:#fff !important;background-color:#9cd9d5;}
.navipager .current,.navipager .pages{color:#fff !important;background-color:#9cd9d5;}
.navipager a:hover{color:#fff !important;background-color:#f1583b;}
.navipager .pages {margin:0 -1px 0 0}
Not: color:#fff yazan kısım numaratörüzünün renk ve arka renklerini ayarlamaya yarayan kısımdır buradan renk kodunuzu temanıza göre düzenleyebilirsiniz.
ADIM 2: Şimdi yine şablonun kodlarında <b:widget id=’Blog1′ locked=’true’ title=’Blog Kayıtları’ type=’Blog’> satırını bulup bunun hemen altına şu kodları ekleyeceğiz.
<b:includable id='navi-pager'>
<div class='navipager'>
<script type='text/javascript'>
var pageNaviConf = {
perPage: 7,
numPages: 5,
firstText: "Başa Git",
lastText: "Sona Git",
nextText: " ► ",
prevText: " ◄ "
}
</script>
<script type='text/javascript'>
//<![CDATA[
function pageNavi(o){var m=location.href,l=m.indexOf("/search/label/")!=-1,a=l?m.substr(m.indexOf("/search/label/")+14,m.length):"";a=a.indexOf("?")!=-1?a.substr(0,a.indexOf("?")):a;var g=l?"/search/label/"+a+"?updated-max=":"/search?updated-max=",k=o.feed.entry.length,e=Math.ceil(k/pageNaviConf.perPage);if(e<=1){return}var n=1,h=[""];l?h.push("/search/label/"+a+"?max-results="+pageNaviConf.perPage):h.push("/?max-results="+pageNaviConf.perPage);for(var d=2;d<=e;d++){var c=(d-1)*pageNaviConf.perPage-1,b=o.feed.entry[c].published.$t,f=b.substring(0,19)+b.substring(23,29);f=encodeURIComponent(f);if(m.indexOf(f)!=-1){n=d}h.push(g+f+"&max-results="+pageNaviConf.perPage)}pageNavi.show(h,n,e)}pageNavi.show=function(f,e,a){var d=Math.floor((pageNaviConf.numPages-1)/2),g=pageNaviConf.numPages-1-d,c=e-d;if(c<=0){c=1}endPage=e+g;if((endPage-c)<pageNaviConf.numPages){endPage=c+pageNaviConf.numPages-1}if(endPage>a){endPage=a;c=a-pageNaviConf.numPages+1}if(c<=0){c=1}var b='<span class="pages">Sayfa '+e+' / '+a+"</span> ";if(c>1){b+='<a href="'+f[1]+'">'+pageNaviConf.firstText+"</a>"}if(e>1){b+='<a href="'+f[e-1]+'">'+pageNaviConf.prevText+"</a>"}for(i=c;i<=endPage;++i){if(i==e){b+='<span class="current">'+i+"</span>"}else{b+='<a href="'+f[i]+'">'+i+"</a>"}}if(e<a){b+='<a href="'+f[e+1]+'">'+pageNaviConf.nextText+"</a>"}if(endPage<a){b+='<a href="'+f[a]+'">'+pageNaviConf.lastText+"</a>"}document.write(b)};(function(){var b=location.href;if(b.indexOf("?q=")!=-1||b.indexOf(".html")!=-1){return}var d=b.indexOf("/search/label/")+14;if(d!=13){var c=b.indexOf("?"),a=(c==-1)?b.substring(d):b.substring(d,c);document.write('<script type="text/javascript" src="/feeds/posts/summary/-/'+a+'?alt=json-in-script&callback=pageNavi&max-results=99999"><\/script>')}else{document.write('<script type="text/javascript" src="/feeds/posts/summary?alt=json-in-script&callback=pageNavi&max-results=99999"><\/script>')}})();
//]]>
</script>
</div>
</b:includable>
Not: Perpage ve numPages yazan kısımları kaç adet sayfa gözükmesini istiyorsanız kendinize göre ayarlayınız.
ADIM 3: Son olarak <b:include name=’nextprev’/> kodunu bulup siliyoruz ve bunun yerine şu kodları yapıştırıyoruz.
<b:if cond='data:blog.pageType == "index"'> <b:include name='navi-pager' /> <b:else/> <b:if cond='data:blog.pageType == "archive"'> <b:include name='navi-pager' /> </b:if> </b:if>
!!! Eklentinin düzgü çalışması için dikkat etmeniz gerekin önemli bir nokta var. Her sayfada kaç yazı görünmesini istiyorsanız 2. adımdaki kodlarda yer alan Perpage ve numPages kısımlarını Blogger kumanda panelinde Yerleşim > Blog Kayıtları > Düzenle yolunu takip ederek ana sayfadaki kayıt sayısı bölümüne aynısını yazıyorsunuz. eğer aynı değerleri yapmazsanız çakışma olabilir ve kodlar çalışmayabilir.
Evet arkadaşlar yukarıda yazan yöntemi uyguladığınızda js dosyalarına bağımsız güzel html5 ve mobil uyumlu Blogger sayfa numaralandırma eklentisine sahip olacaksınız unutmayın bilgi paylaştıkça büyür yazı altına yorumlarınızı yazmayı ihmal etmeyin. sizin işinize yarayan başka insanlarında işine yarayabilir.
Visitor Rating: 5 Stars
Visitor Rating: 5 Stars