Blogcu Page Navigation [Sayfa Numaralandırma] 2

Merhaba Arkadaşlar.Bu Yazımı blogcu arkadaşlara blogcu hizmetini kullanan arkadaşları düşünerek bu yazı yazayım.
Biliyorsunuz Blogcuda ne bir eklenti nede başka bir şey var o yüzden onların yaralarına bir nebze olsun böle birşey yaptım.

Bu Pagenavigationu ilk yazımda yani burada anlatmıştım şimdiki yazımda stili biraz değiştirdik görünümü aşağıdaki gibi



Şimdi Bu görünümde Sayfa Numaralandıracağız
Şimdi Öncelikle şablkon HTMLsini düzenle dedikten sonra </style> kodunu buluyoruz ve hemen altına aşağıdaki kdoları ekliyoruz

/* ~ Pagination başla http://mucozer.blogspot.com  ~ */
 #pagination{clear:both;padding:15px;text-align:center;font-size:12px;font-weight:bold;color:#999;margin:10px auto 10px auto;}
 #pagination li{margin:0 1px 0 1px;display:inline;list-style-type:none;}
 #pagination li a{padding:5px 7px 5px 7px;color:#353535;border:1px solid #CCC;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}
 #pagination li a:hover{text-decoration:none;padding:5px 7px 5px 7px;color:#464646;border:1px solid #464646;background:#ededed;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}
 #pagination .active a{background:#464646;color:#FFF;border:1px solid #353535;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}
 #pagination .extreme a{border:0;color:#555;font-size:14px;}
 #pagination .extreme a:hover{border:0;color:#353535;font-size:14px;background:#FFF;}
 #pagination .active a:hover{background:#464646;color:#FFF;border:1px solid #353535;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}
 #pagination .inactive{color:#CCC;padding:5px 7px 5px 7px;border:1px solid #EEE;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}
    /* ~ Pagination Bitiş http://mucozer.blogspot.com  ~ */

Ardından Aşağıdaki kodları buluyoruz

      <p class="content-nav">
                <EarlierLink>«  Önceki </EarlierLink>
                |
                <LaterLink> Sonraki »</LaterLink>
              </p>

bunları bulduktan sonra siliyor ve aşağıdaki kodları ekliyoruz

<div id="pagination">
      
          <li><LaterLink>Önceki Sayfa</LaterLink></li>
          <li><a href="<%MainPageURL%>/sayfa/1">2</a></li>
          <li><a href="<%MainPageURL%>/sayfa/2">3</a></li>
          <li><a href="<%MainPageURL%>/sayfa/3">4</a></li>
          <li><a href="<%MainPageURL%>/sayfa/4">5</a></li>
          <li><EarlierLink>Sonraki Sayfa</EarlierLink></li>

</div> 

Hepsi Bu Kadar Hayıurlı Olsun
Artık Blogcuda Page Navigationu yaptık yani artık sayfalarımızı numaralandırma eklentisini blogcuya ekledik..