Bumerang - Yazarkafe

Blogger Sayfa Numaralandırma Eklentisi-Page Navi



Açılan ana sayfada görünen içerik sayınızın10 dan fazla olması sayfalarınızın açılmasını yavaşlatacağı bir çok makaleye konu olmuştur.Standart blogger şablonlarının hemen hemen hepsinde sayfa numaralandırılması yapılmamış.Sayfa sonlarında daha eski kayıtlar,daha yeni kayıtlar gibi ilkel görünt sergileyen linklerle sayfa geçişleri sağlanmakta.Bu da şık olmayan bir görüntü sergilemekte.Şimdi sizlere şık bir tasarımı olan sayfa eklentisini nasıl bloğunuza ekliyebileceğinizi anlatalım.


Sayfalrınızın sonuna şekilde gördüğünüz gibi sayfa numaralandırma eklentisini bloğunuza-sitenize eklemenin iki yolu var.Birincisi zor ve güvenli olanı ikincisi ise 3 sn de yapabileceğiniz çok basit olan yöntem.
1.Yöntem(Önerilen)

1.Adım:Tasarım/Html yi düzenleye geliyoruz  ]]></b:skin> yazan yeri (Ctrl+F basıp aratıp kolayca bulabilirsiniz) buluyoruz.Aşşağıdaki kodu bundan önceki kısma yapıştırıyoruz.

.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;
  }
 
2.Adım:Yine Html yi düzenle kısmında  </body> kodunu buluyoruz.Aşşağıdaki kodu bu koddan önceki kısma 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 ='ÖNCEKİ';
var downPageWord ='SONTRAKİ';
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' 
type='text/javascript'/>
</b:if>
Kodu yapıştırdıktan sonra hemen kaydetmeyin, bir önizleme yapın sorun yoksa kaydedin hayırlı olsun.
2.Yöntem (kolay olan)  
İkinci yöntemde kodlara herhengi bir müdahalede bulunmuyorsunuz.BURAYA TIKLAYIN ardından açılan pencerede bilgileri girdikten sonra sırasıyla TAMAM-BLOGUMA EKLE butonlarını tıklayın.Normal bir Gadget ekler gibi bloğunuza ekleyin hayırlı olsun.
(İkinci Yöntem http://bloggermodifiyewidget.blogspot.com alıntıdır.)
PAYLAŞ

BLOG OKULU

Merhabalar, 2012 yılından beri editörlüğünü yaptığım blogokulu.org sitesinde blogger kullanıcıları için gerekli olan bir çok bilgiyi bulabilrsiniz.Blogger temaları,blogger eklentileri ve blogger dersleri ile blog yazarlarına elimizden geldiğince yardımcı olmaya çalışıyoruz.

  • Image
  • Image
  • Image
  • Image
  • Image
    Disqus Yorumları
    Facebook Yorumları

2 yorum:

  1. 2.Yöntem (kolay olan)  çalışmıyor, eskiden çalışıyordu birden çalışmamaya başladı.

    YanıtlayınSil
  2. eğer çalışmıyorsa;size görüntü olarak daha şık ve animasyonlu olan ve uygulaması çok basit olan  burdaki eklentileri tavsiye ederim.

    YanıtlayınSil

Belirtmek istediğiniz farklı konular varsa Burdan Yazabilrisiniz...