CSS İle Oluşturulmuş Navigasyon Butonları

Hepimizin bildiği "Eski Yazılar, Yeni Yazılar" navigasyon linklerini CSS ile özelleştirerek buton haline getireceğiz.Butonlarımızı bundan önce editini kendim yapmış olduğum SimpleV. temasında görmüş olmanız mümkün.

Şimdi nasıl ekleyeceğimizi anlatalım.Her zamanki gibi önce CSS kodları.

Aşağıdaki kodu tema şablonunuzda CTRL+F ile bulun.

]]></b:skin>

Bulduğunuz kodun hemen üstüne aşağıdaki kodları ekleyin.

* Navigasyon aerakman
----------------------------------------------- */
.previouspage{float:left;background:url(http://3.bp.blogspot.com/-jg1jr1vYDAY/UEeq3UDzFuI/AAAAAAAAApQ/hgCN0OJPZi8/s1600/OnurBaturNext.png) no-repeat left;width:100px;height:29px;line-height:29px;margin:10px 0 10px 0;padding:0 0 0 0px;font-size:11px;}
.nextpage{float:right;background:url(http://4.bp.blogspot.com/-IyKmN8wc8z0/UEeq2hZ4IjI/AAAAAAAAApM/EoeRh_7WMoE/s1600/OnurBaturPrev.png) no-repeat left;width:90px;height:29px;line-height:29px;margin:10px 0 10px 0;padding:0 0 0 10px;font-size:11px;}
.previouspage a:link,.previouspage a:visited,.nextpage a:link,.nextpage a:visited{color:#7c7c7c;text-shadow:none;}
.previouspage a:hover,.nextpage a:hover{color:#82a4b0;}

Daha sonra ise aşağıdaki kodu bulun

<a class='blog-pager-older-link'

Yukarıdaki kodun en sonuna ise şunu ekleyeceksiniz:

<div class='previouspage' title='Eski Yazılar'>Eski Yazılar</div>

Aynı şeyi aşağıdaki kodumuzda yapacağız

<a class='blog-pager-newer-link'

Fakat bu sefer class'ımıza previouspage değil, nextpage diyeceğiz.

<div class='nextpage' title='Yeni Yazılar'>Yeni Yazılar</div>

Yapamadığınız veya takıldığınız bir yer olursa yorum atabilirsiniz.Umarım yapabilirsiniz :)
İyi bloglamalar !