Blogger sayfalandırma eklentisi

    Blogger için Daha eski kayıtlar ve Daha yeni kayıtlar yerine bu sayfaların hepsini sayfalandıralım, bu blogunuza tasarım açısından da güzellik katacaktır.

    Öncelikle tasarımızda şu kodu bulalım.

    ]]></b:skin>

    Bulduğumuz kodun üstüne şu kodları ekleyelim.

    .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://2.bp.blogspot.com/-YgTpGYBvcXs/TqrI3EHV3jI/AAAAAAAACFs/lNUj1Iwuomg/s1600/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://2.bp.blogspot.com/-YgTpGYBvcXs/TqrI3EHV3jI/AAAAAAAACFs/lNUj1Iwuomg/s1600/wp1.jpg)
    0 0 repeat-x;
    text-decoration: none;
    }

    Daha sonra tasarımızda,

    </body>

    kodunu buluyoruz ve üstüne aşağıdaki kodları ekliyoruz.

    <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://dl.dropbox.com/u/29281608/JS%20Dosyalar%C4%B1/blogger-page-navi.v1.js'
    type='text/javascript'/>
    </b:if>

    Tamamdır 🙂 Tasarımı kaydedin çıkın, sağlıcakla kalın.

    Rate this post

    Paylaş

    10 Cevaplar

    1. Alper dedi ki:

      Çok Teşekkürler Furkan Kardeş,Rengini Felan Kodlardan Değiştiriyoruz Dimi.

    2. Furkan ÖZDEN dedi ki:

      GÖrsel temsilidir. Rengini http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp1.jpg şu resmi değiştirerek değiştirebilirsin. Verdiğim link butonun arkaplan rengidir.

    3. RizeliHaylaz dedi ki:

      Ya şu kopyalamayı engellemesen bide 😀

    4. Furkan ÖZDEN dedi ki:

      🙂 Kod penceresinin üzerine gelince sağ üstte beliren simgeden kodları alabilirsin 🙂

    5. Alperen Ünver dedi ki:

      Güzel paylaşım olmuş eline sağlık =)

    6. Webportalim dedi ki:

      Bende çalışmadı :S

    7. john deep dedi ki:

      bu üstte yazar hakkında bölümünü altında buluna paylaş butonları ve aşağıdaki paylaş kodlarını nasıl yapabiliriz

    8. Perimelis dedi ki:

      Merhaba ben bunu yapıyorum ama benım bloğumda olmuyor yardım edebılırmısınız lütfen

    9. Aamir Turkiye dedi ki:

      teşekkür ederim sayenizde yaptım

    Bir yanıt yazın

    E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

    Bunlar da hoşunuza gidebilir...