Yeni Kayıtlar /Önceki Kayıtlar Özelleştirme

Blogger da sayfa numaralandırmada bir ara meşhur olmuştu. Hemen hemen herkes bunu bloguna ekledi. Numaralandırma hoşuma gitmiyor ama klasik takılmakta tarzım değil diyenler varsa buyrun birde burdan yakın :)) 2 farklı versiyonu ile karşınızda...

.....Lütfen şablonunuzun yedeğini almayı unutmayın......

Yerleşim--->Html Düzenle---Widget Şablonunu Genişlet

Temanızın html kodları arasında Yeni kayıtlar/Önceki kayıtlar için css kodu;


#blog-pager-newer-link {
float: $startSide;
margin-$startSide: 13px;
}

#blog-pager-older-link {
float: $endSide;
margin-$endSide: 13px;
}

#blog-pager {
text-align: center;
}

şeklindedir.Burada
#blog-pager-newer-link ---> Yeni yazılarınızı
#blog-pager-older-link ---> Eski yazılarınızı
#blog-pager---> Ana Sayfanızı içeren css kodlarıdır.

Bazı temalarda bu

#blog-pager-newer-link {
padding-left : 20px;
border : none;
float : left;
}
#blog-pager-older-link {
float : right;
padding-right : 20px;
border : none;
}
#blog-pager {
padding : 0 15px 0;
text-align : center;
}
.blog-pager a {
color : #cc0000;
}
.blog-pager a:hover {
color : #cc0000;
}

şeklindede olabilir.

1. Yukarıdaki kırmızı css kodu ile aşağıdaki css kodunu değişerek resimdeki görünüme dönüştürebilirsiniz.



#blog-pager-newer-link {
background : url(http://i43.tinypic.com/11bro1s.jpg) no-repeat left 0%;
padding-left : 20px;
border : none;
float : left;
}
#blog-pager-older-link {
float : right;
background : url(http://i44.tinypic.com/2n6dirp.jpg) no-repeat right 0%;
padding-right : 20px;
border : none;
}
#blog-pager {
padding : 0 15px 0;
text-align : center;
}
.blog-pager a {
color : #cc0000;
}
.blog-pager a:hover {
color : #cc0000;
}

2. Yukarıdaki kırmızı css kodu ile aşağıdaki css kodunu değiştiriyoruz.


CSS KODU:

#blog-pager-newer-link {
padding-left : 20px;
border : none;
float : left;
}
#blog-pager-older-link {
float : right;
padding-right : 20px;
border : none;
}
#blog-pager{
padding:50px 10px 10px 10px;
text-align:center;
}
.blog-pager a{
color:#A10000
}

.blog-pager a:hover{
color:#15FFED
}


Ayrıca aşağıdaki kodu bulurak;


<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

</div>
<div class='clear'/>
</b:includable>

alttaki kod ile değiştirin.


<b:includable id=’nextprev’>
<div class=’blog-pager’ id=’blog-pager’>
<b:if cond=’data:newerPageUrl’>
<span id=’blog-pager-newer-link’>
<a class=’blog-pager-newer-link’ expr:href=’data:newerPageUrl’ expr:id=’data:widget.instanceId + &quot;_blog-pager-newer-link&quot;’ expr:title=’data:newerPageTitle’><img alt=’techieblogger.com’ src=’http://i69.photobucket.com/albums/i42/queenofdreamsz/NextIcon.gif’ title=’Newer Post’/></a>
</span>
</b:if>

<b:if cond=’data:olderPageUrl’>
<span id=’blog-pager-older-link’>
<a class=’blog-pager-older-link’ expr:href=’data:olderPageUrl’ expr:id=’data:widget.instanceId + &quot;_blog-pager-older-link&quot;’ expr:title=’data:olderPageTitle’><img alt=’Techie Blogger’ src=’http://i69.photobucket.com/albums/i42/queenofdreamsz/BackIcon.gif’ title=’Older Post’/></a>
</span>
</b:if>

<b:if cond=’data:blog.homepageUrl != data:blog.url’>
<a class=’home-link’ expr:href=’data:blog.homepageUrl’><img alt=’Techie Blogger’ src=’http://i85.photobucket.com/albums/k47/bongmalove/icon/home.gif’ title=’Home Page’/></a>
<b:else/>
<b:if cond=’data:newerPageUrl’>
<a class=’home-link’ expr:href=’data:blog.homepageUrl’><img alt=’Techie Blogger’ src=’http://i85.photobucket.com/albums/k47/bongmalove/icon/home.gif’ title=’Home Page’/></a>
</b:if>
</b:if>

</div>
<div class=’clear’/>
</b:includable>

İsterseniz resimleri değişebilirsiniz.