21 Nisan 2015 Salı

Blogger Blogda Sayfa Navigasyonu (PageNavi)

pagenavi.jpg
Blogger şablonlarında ki her sayfanın altında, sayfalar arasında geçiş yapmak için daha eski kayıtlar ve daha yeni kayıtlar gibi linkler var. Bu linklerin yerine, ziyaretçilerin blogunuzdaki sayfalar arasında daha rahat dolaşmaları için numaralı sayfa navigasyonu ekleyebilirsiniz. Blogunuza numaralı sayfa navigasyonu eklemek için tek yapmanız gereken HTML/JavaScrip gadgeti ile aşağıdaki kodları eklemenizdir.


Diğer sayfa sıralama kodlarından farklı olarak her temaya uyumludur. Genelde eklenen pagenaviler tema renkleri yada yazı büyüklükleri uyumsuz tasarımı bozan yapıdadırlar. Temada hangi renkleri kullanıyorsanız o fontta gözükecektir.
Bloggerde Yerleşim > Gadget ekle > HTML/Javascript ekle yolunu izleyerek ekleyebilirsiniz.


<style type="text/css">
#blog-pager{font-size:small;padding:10px 0;clear:both;}
.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:14px;margin:10px}
.showpageArea a{color:#000}
.showpageNum a{padding:3px 8px;margin:0 2px;text-decoration:none;border:1px solid #999;background:#6fb5f1;color:#000;}  
.showpageOf{margin:0 2px 0 0;padding:3px 8px;margin:0 2px;text-decoration:none;border:1px solid #999}
.showpagePoint{color:#fff;padding:3px 8px;margin:2px;border:1px solid #999;background:#666; text-decoration:none}
</style>
<script style='text/javascript'>
var numshowpage=10;
var postperpage =7;
var upPageWord="Önceki";
var downPageWord="Sonraki";
var home_page="/";
var urlactivepage=location.href;
</script>

İsteğe bağlı olarak aşağıdaki kodları değiştirebilirsiniz. 

1- Border:1px solid #999; Seçili numaranın etrafındaki çerçeve kalınlığı  0,1,2...px ve çerçeve rengi .... olarak istediğinizi rengi verebilirsiniz.

2- Bbackground:#666 : Seçili numaranın arka fon rengini de  isteğinize göre değiştirebilirsiniz.

5- Postperpage (7) kısmına blogda ana sayfada bulunan  yazı adediniz kaç    ise o sayıyı giriniz.

6- Font-size:normal : small: Küçük, medium: Orta ve mevcut ayarlar Normal ile değiştirerek pencere görünümünü değiştirebilirsiniz.

7- Numshowpage : Yatay olarak gösterilecek sayfa adedi (10) 

Hiç yorum yok:

Yorum Gönder