Blogger Sayılı Pagenavi Oluşturmak - Sayılı Navigasyon

Bloggerların çoğunun şikayetçi olduğu şey anasayfanın en alt kısmındaki Pagenavi kısmıdır, yani sayfa navigasyonu, sayfalar arasında geçiş yapan kısım. Bu kısım blogspot sitelerde, önceki yazılar ve sonraki yazılar şeklindedir. Oysa ki çoğu kişi bu kısmı sayılı bir şekilde göstermek ister. İşte bu yapacağınız işlemler istediğiniz sayılı navigasyonu(pagenaviyi) oluşturacaktır. Şunu belirmek istiyorum ki bu işlemleri yapmadan önce şablonunuzun yedeğini alın, sadece bu işlem için değil herhangi bir işlem yaparken özellikle kodlamalarda yapılacak değişiklikten önce mutlaka Blogger Şablonunuzun yedeğini alın. Bloggerlar için hazırladığım Türkçeleştirilmiş Blogger Temalarına da göz atmanızı öneririm.   öncelikle;

]]></b:skin>

kodunu buluyoruz aşağıdaki kodları bu kodun üst kısmına yapıştırıyoruz. ( Copy + Paste)

/* Sayfa Navigasyonu */

.pagenavi{clear:both;margin:10px auto;text-align:center}
.pagenavi span,.pagenavi a{padding:3px;margin-right:5px;background:#fff;border:1px solid #c20c0c}
.pagenavi a:visited{color:#c20c0c}
.pagenavi a:hover,.pagenavi .current{background:#c20c0c;color:#fff;text-decoration:none}
.pagenavi .pages,.pagenavi .current{font-weight:bold}
.pagenavi .pages{border:none}

Daha sonra, kaynakta şu kodu aratıyorsunuz.

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

bulduğunuz bu kodu silmeyin hemen altına aşağıdaki kodları ekleyin.

<b:includable id='page-navi'>
<div class="pagenavi">
<script type="text/javascript">
var pageNaviConf = {
perPage: 5,
numPages: 9,
firstText: "First",
lastText: "Last",
nextText: "Next",
prevText: "Prev"
}
</script>
<script type="text/javascript" src="https://raw.githubusercontent.com/halituzan/halituzan-com/master/sayilipagenavi.js"></script>
<div class="clear" />
</div>
</b:includable>

Bu eklediğiniz kodlarda değişiklik yaparak navigasyonunuzu Türkçeleştirebilirsiniz. Daha sonra da kaynakta aşağıdaki kodu aratın.

<b:include name='nextprev'/>

Aratıp bulduğunuz bu kodu silin ve yerine aşağıdaki kodları yapıştırın.

<b:if cond='data:blog.pageType == "index"'>
<b:include name='page-navi' />
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<b:include name='page-navi' />
</b:if>
</b:if>

Eğer bu aşamadaki kod dizimini bulamadıysanız şunu aratın. (bu işlemi yapmak zorunda değilsiniz eğer bu aşamadaki kod dizimi olan <b:include name='nextprev'/> bulamadıysanız bunu yapacaksınız.)

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
...
<b:includable id='main' var='top'>
...
</b:includable>
</b:widget>
</b:section>

bulduğunuz bu kodda  </b:includable> un hemen üstüne şu kodu yapıştırın.

<b:if cond='data:blog.pageType == "index"'>
<b:include name='page-navi' />
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<b:include name='page-navi' />
</b:if>
</b:if>

Şu an için eksik bir şey yapmadıysanız Sayılı Pagenavi (Önceki ve Sonraki Yazılar) kısmınız hazır demektir. Navigasyonun renk ayarlamalarını Css kodlarıyla oynayarak değiştirebilirsiniz. Yapmış olduğunuz bu işlemlerle sayfalarınız çok şık bir görünüme kavuşmuş olacaktır. Yorumlarınızı eksik etmeyin. Herkese iyi bloglamalar.