Blogger Sayfa Numaralandırma Eklentisi
Normalde Blogger bloglarda sayfalar arasında geçiş yapmak için önceki
kayıtlar – sonraki kayıtlar linkleri kullanılır. Örneğin her bir sayfada 5 kayıt
göstermeyi seçtiyseniz blgunuzun ana sayfasında en son yayınladığınız 5 yazınız
görünür. Ondalardan önce yayınladığınız 5 yazınızı görmek için de önceki
kayıtlar linkine tıklanır.
Fakat Blog Hocam’da ve bazı bloglarda göreceğiniz gibi önceki kayıtlar – sonraki kayıtlar linklerinin yerinde numaralar var. Sayfalar numaralandırılarak ziyaretçinin blogda dolaşması kolaylaştırılmıştır.
Bu yazıda 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.
1. Adım: İ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 aram 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.
2. Adım: Ş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.
3. Adım: Son olarak <b:include name='nextprev'/> kodunu bulup siliyoruz ve bunun yerine şu kodları yapıştırıyoruz.
!!! 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 kırmızı ile gösterdiğim yere o sayıyı yazıyorsunuz. Ardından 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.
Fakat Blog Hocam’da ve bazı bloglarda göreceğiniz gibi önceki kayıtlar – sonraki kayıtlar linklerinin yerinde numaralar var. Sayfalar numaralandırılarak ziyaretçinin blogda dolaşması kolaylaştırılmıştır.
Bu yazıda 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.
1. Adım: İ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 aram 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 – Blog Hocam*/
.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}
2. Adım: Ş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>
3. Adım: 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 kırmızı ile gösterdiğim yere o sayıyı yazıyorsunuz. Ardından 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.
Görsellik ve işleyiş açısından; bloglar için, önemli bir eklenti. Blog sahiplerine 'sayfa numaralandırma' işlemini tavsiye ederim.
YanıtlaSilİçeriğiniz için teşekkürler. :)
tşkürler hocam bbbende böyle bir şey arıyordum zaten ve hoccam bir sorum sizce Bloguma daha neler eklemeliyimm
YanıtlaSilhttp://webkodla.blogspot.com.tr/
Hocam bir sorun var su seo paketleri alinca etkisi ne kadar olur
YanıtlaSilMerhabalar. Eklenti güzel ve faydalı. Her blogger kullanmalı ki zaten ihtiyaç duyuyor olmalı. Fakat benim aklım bir yerde kaldı hocam; bazı blogger bloglarda sayfa numaralandırma eklentisi çok daha farklı. Mesela sayfa seçimi yapınca sayfa yenilenmeden sayfa içinde yazılar değişiyor eski yayınlar geliyor. Ama sayfa yenilenmeden oluyor bu. Sanırım Jquery ile yapılıyor. O tür sayfa numaranlandırma eklentisi nasıl yapılır hocam?
YanıtlaSilolmadı yapamadım yaa çok zor
YanıtlaSilBlog hocam merhaba iletişim kutusuna yazdım ancak güvenlik nosu çıkıyor ve iletildiğinden emin olmadığım için buraya yazmak istedim. Konu ile alakasız kusura bakmayın bu nedenle.
YanıtlaSilMerhabalar 1 senedir bloguma dönmüyorum çünkü pc çöpe gitti. Telefonda pc yerini tuttu ancak blog yazma konusunda tutamadı. 1 yıldır blog yazmıyorum. Bugün başlamak istedim artık ancak yazı yazma işkencesi bittikten sonra fotograf yüklemek isteyince sorunlar aldı başını gitti:
1. Fotograf yükleme kutusunda 'telefonunuzdan' yazan yere tıklayınca tlfndaki fotograflar çıkmıyor.
2. İphone galerideki fotografları kopyalayıp metin yazan kutuya yapıştırdığımda görünüyor ve metni yayınladıktan sonra fotograf yok oluyor.
3. Acaba png jpeg ya da jpg sorunumu var diye düşünüp çeşitli programlarla fotografların formatını değiştirdim yine olmadı.
4. Postimage.orga girip kopyalama kaydetme ile beraber url ile yükleme yapmayı denedim ancak url kutusuna yapıştır yazısı çıkmadığı için o da olmadı. İnanın 2 saatten fazladır deniyorum hiç bir sonuç elde edemedim.
Zaten bloggerın bir mobil uygulaması da yok..
Bunun bir çözümü var mı? Sırf blog yazmak için bir bilgisayar almak istemiyorum ve sanırım emek verdiğim blog hayatımı tamamen sonlandırıp büyük bir üzüntü ile blogumu sileceğim :(
Misspoine
Miss.poinepa@gmail.com
Meraba...
SilEvet blogger mobil uygulaması google play veya appstoreda yok. Ancak apk olarak indirebilirsiniz. Ben yaptım. İyi günler...
Kullanıcı rahatlığı için önemli bir detay! Tşk
YanıtlaSilYararlı olmuş
YanıtlaSilhttp://sorunshift.blogspot.com
Ana Sayfamızın vazgeçilmezi.
YanıtlaSilHerkesi Bloguma bekliyorum.
merhaba
YanıtlaSileklentinizi denedim.Ancak bir yerde hata oldu galiba ilk sıradaki css kodunun içeriği blog sayfasında en üstte görülmekte.anasayfada yani nette görünen sayfada.yapıştırmada hatamı yaptım acaba. kodunun üstüne yapıştırıldı.benmi yanlış anladım.acil cevap kolay gele.
Yanlış yere yapıştırmışsınız
Silşöyle bir hata çıkıyor:)The widget with id "Blog5" cannot contain element: "b:if". A widget can only contain b:includable elements.)ne yapabilirim acil cevap
Silemeğinize sağlık
YanıtlaSilwww.kelepirexpress.com
http://tavlaturkiye.blogspot.com siteme uyguladım. Teşekkür ederim
YanıtlaSilHocam herhalde çok yoğunsunuz artık eskisi gibi değil konularınız geç geliyor özletiyorsunuz kendinizi bu arada bloguma uyguladım fakat pek hoşuma gitmedi kaldırdım
YanıtlaSilhttp://harunlog.blogspot.com
Arkafaşlar benim blogumda sayfa numaraları mobilde çalışmıyon. Nedenini bilen var mı?
YanıtlaSilHocam Merhaba. Ben size iletişim bölümünden mesaj attım fakat ulaşmadı galiba. Burdan söyleyeyim dedim: ben de hobi olarak bir blog açtım ama devamı gelir mi nasıl gelir, iyileştirmeler nelerdir? Bunlar hakkında sizden yardımınızı rica ediyorum. Şimdiden teşekkürler.
YanıtlaSilhttps://akilli-karsilastir.blogspot.com/
Hocam Selamlar,
YanıtlaSil12 gündür yeni yazı girmediniz, takipteyiz umarız her şey yolundadır :)
2016 yılının teknolojisine uygun bir eklenti olabilmesi için mobili desteklemesi gerekmektedir. ;)
YanıtlaSil'Blog1' yeri hata veriyor acil ne yapacağımı söylermisiniz
YanıtlaSilÇok Gerekli Bir Çalışma Ama Sağdaki Etiketlere Tıklayınca Sayfa Numaratörü Onlarda Çıkmıyor Maalesef :(
YanıtlaSilhttp://canayvideo.blogspot.com.tr/
Teşekkürler. Ama bir sorunum var 150 yayından sonrasını göstermiyor. Acaba nedeni ne olabilir?
YanıtlaSilYardımcı olabilecek yok mu? Kaç haftadır uğraşıyorum çözüm bulamadım :(
SilGerçekten çok açıklayıcı olmuş. Çok teşekkür ederim. ^_^
YanıtlaSilŞahane oldu, bayıldım. Çok teşekkürler ;)
YanıtlaSilŞahane oldu, bayıldım. Çok teşekkürler ;)
YanıtlaSilHoş bir görünüme sahip, teşekkürler. :)
YanıtlaSilOlmuyor sayfaya ilk kez girdiğinizde sayfada yayınlar önceki gibi sayda gösteriyor yalnız ilave etdiğimiz sayfa 1 , 2 üzerine tıkladıkdan sonra yayınların sayı biz kurduğumuz gibi gösteriyor
YanıtlaSilOldukça uzun bir işlem . Deneyeceğim yinede .
YanıtlaSilÇok yararlı ve açıklayıcı yazılar. Ben de blogumu oluştururken sadece sizin soylediklerinizi uygulamaya calistim. Bazilarini tam yapamadim ama genel olarak cok guzel ışık tuttu.
YanıtlaSil1haritaci.blogspot.com.tr
Bloguma uyguladım . Yararlı olmuş .Teşekkürler
YanıtlaSilsementit temada işe yaramıyor..olsun.
YanıtlaSilHocam eklenti için teşekkür ederim. Bir sorun yaşıyorum, siz veya bilenler yardımcı olur umarım. Eklentiyi uyguluyorum herhangi bir sorun yok, gayet güzel çalışıyor, bir kaç gün veya bir kaç hafta sonra tekrar yok oluyor, sanki hiç yapılmamış gibi css kodu dışındakiler kayboluyor. Tekrar uyguluyorum, belirsiz bir süre sonra yine aynı şekilde kayboluyor. Bir kodun kendi kendine yok olması mantıken mümkün değil ama bu konuda tecrübeli arkadaşların bir bildigi vardır mutlaka. Bu yorumu okuyan arkadaşlardan yardım bekliyorum...
YanıtlaSilİkinci adımda bahsettiğiniz satırlar yok şablonda. Daha önce de hiç kullanmadım buradan şablon değiştirmeyi. Yardımcı olursanız sevinirim. Tek tek bile baktım yok yani.
YanıtlaSilTeşekkürler Gerçekten çok işime yaradı temamın sayfa numaralandırması yoktu hallettim sayenizde.
YanıtlaSilwww.nasilyapilirshow.blogspot.com.tr
Tamamen BLOG HOCAM Yardımı ve yazılarıyla hazırlanmaya başlamış bir blogtur.
teşekkürler Bloghocam
Bu yorum yazar tarafından silindi.
YanıtlaSildüzelttim oldu şimdi çalışıyor. Ama başka bir sitemde olmadı sayfalar hiç görünmüyor neden olabilir ?
SilHocam sharefancy.blogspot.com Bloguma Ekledim Güzel Fakat Renk Nası Değiştircez Benim Turuncu Yapmam Lazım Bunu Acil Cevap Verirmisiniz
YanıtlaSil1. adımdaki renk kodlarını değiştirebilirsiniz.
Silrenklerle oynayınca turuncu yapyorum hocam olmuyor yani sorun var
SilMerhaba ben blogumda hazır temalardan kullanyorum o yüzden yapamadım yardımcı olursanız sevinirim.
YanıtlaSilBu yorum yazar tarafından silindi.
YanıtlaSilpagenave anasayfada gözüküyor bloğumda fakat menüye ait diğer sayfalarda görünmüyor sadece anasayfada var ..ben hepsinde görünmesini istiyorum bunu nasıl yapabilirim
YanıtlaSilTekrar teşekkür ederim.
YanıtlaSiltesekkurler faydali bir makale hocam
YanıtlaSilTeşekkürler,
YanıtlaSilGayet detaylı ve titizlikle anlatılmış.
Paylaşımınız sayesinde bende başarılı bir şekilde yaptım.
CTRL + F YAPIYORUM ARATIYORUM ÇIKMIYOR
YanıtlaSilBlogger sayfa numaraları yeni geliştirilen temaların içinde hazır bulunmasına rağmen bazı durumlarda düzgün çalışmayabilir. Html kod içerisinde bulunan "POSTPERPAGE_NUM" ile ana sayfada gösterilmesi gereken kayıt sayısının aynı olması gerekmektedir. İşleyiş düzgün olmasına rağmen bazı durumlarda ana sayfada sadece bir kayıt görüyorsanız bu hatanın sebebi de tamamen yayınlardaki uzun içeriklerden kaynaklanmaktadır. Temanın uzun içerikleri kesme ve devamını oku özelliği olmasına rağmen yine de kesme işlemi yapılmalıdır. Böylelikle sayfa numaraları düzgün çalışacaktır.
YanıtlaSilaradığım ilaçtı ama renklerini nerden değiştircez sitemde renk uyumu olmadı
YanıtlaSilhttps://filmdizicu.blogspot.com.tr/
yalnız 160 kayıt gösteriyor en fazla. sorunlu sanırım
YanıtlaSilAynen 160 kayıtta kalıyor. Bir sayfada gözükecek kayıt sayısını 28 yaptım toplamda 168 kayıt gösterdi. gene tamamını göstermiyor. bunun bir çözümü var mı
Sil