Blogger (Blogspot) için Pagenavi (Sayfa Numaralandırma) Eklentisi

Wordpress her gün gelişirken blogger'da wordpress'ten geri kalmıyor. Wordpress bloglarda gördüğümüz sayfa numaralandırma (pagenavi) eklentisini artık blogger'da da kullanabilirsiniz. Nasıl olduğunu merak ediyorsanız yazımın devamını inceleyebilirsiniz.

Örnek görünüm aşağıdaki gibidir:


Gelelim nasıl yapacağımıza. Blogger yönetim panelimizden Yerleşim > Html'yi Düzenle > Widget Şablonlarını Genişlet adımlarını uyguluyoruz.

Sonra </b:skin> kodunu aratıyoruz ve kodun bulunduğu satırın üstüne aşağıda verdiğim kodları ekliyoruz.

.showpageArea {
font-family:verdana,arial,helvetica;
color: #000;
font-size:11px;
margin:10px;
}

.showpageArea a {
color: #000;
text-shadow:0 1px 2px #fff;
font-weight: 700;
}

.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #999;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #ddd url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp1.jpg) 0 -50px repeat-x;
}

.showpageNum a:hover {
border:1px solid #888;
background: #ccc url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp1.jpg) 0 -25px repeat-x;
}

.showpageOf{
margin:0 8px 0 0;
}

.showpagePoint {
color:#fff;
text-shadow:0 1px 2px #333;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
-webkit-border-radius:3px;-moz-border-radius:3px;
border:1px solid #999;
background: #666 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp1.jpg) 0 0 repeat-x;
text-decoration: none;
}

Daha sonra </body> kodunu aratıyoruz ve bu kodun üst kısmına da aşağıdaki kodları yapıştırıyoruz.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>

Ve son olarak Şablonu Kaydet butonuna tıklıyoruz.