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.

Paylaş

Furkan Özden

Blog dünyası ile 2009 yılında tanıştım. Bloğumda haftada en az bir yazı yayımlıyorum. Yazdığım yazıları beğendiyseniz beni Twitter'dan (@frknzdn) takip edebilirsiniz. Daha fazlası için hakkımda sayfasını ziyaret edin.

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 cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bunlar da hoşunuza gidebilir...