Blogger - Gelişmiş Önceki ve Sonraki Yazı Eklentisi

Blogger - Gelişmiş Önceki ve Sonraki Yazı Eklentisi

Blogger tasarım çalışmalarımızdan tekrar merhabalar. Bildiğiniz gibi önceki ve sonraki yazı bağlantıları yerine farklı ifadeler ya da resim koyabiliyorduk. Bugün anlatacağım eklenti sayesinde ise, bu bağlantıların blog sayfamızın sağ ve sol köşelerine yerleştirilecek oklarla kullanılmasını sağlıyoruz.
Böylece blogumuza hem daha etkileyici bir görünüm katmış hem de yazılar arasındaki geçişleri daha belirgin hale getirmiş oluyoruz. Kurulum için öncelikle klasik görünümdeki Blogger panelimizin Tasarım > Html’yi Düzenle bölümünü açıyor ve ‘Widget Şablonlarını Genişlet’ kutucuğunu aktif ediyoruz. İlk olarak aşağıdaki kodu bulup,

]]></b:skin>

Hemen üzerine aşağıdaki kodları ekliyoruz.

a.prev { position: fixed; display: block; right:120px; top:360px; width: 13px; height: 34px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxhWOVyxhPwOQaRePAhSbQ0bbQP1agVg6axpNCXmzp4SMNy9YiipjixiI02Vo23GMtiXq1iaOEalDtJb20H9GmekCmORuFKInxf8GJZhXEh37iCWmX8eOvyMxabPiK42rNnG6zsXoMMA4/s1600/nextArr.png) 0px -34px no-repeat transparent; opacity: 1; background-position: 0px 0px; background-repeat: no-repeat no-repeat; } a.prev:hover { background-position: 0px -34px; } a.next { position: fixed; display: block; left:120px; top:360px; width: 13px; height: 34px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikndIwkD2-7JvEG6lcNnCqk9D6SXc7JeYWYEdOYdymC-JtwxEDtk4z9VnGolnNk2OAGSYKwOs89hpQSSDJLJUBagTzaA_QjtQkrX0iIb1gd48maq84fXuQbMTHcW5KsbyQUosWbCaYkKk/s1600/prevArr.png) 0px -34px no-repeat transparent; opacity: 1; background-position: 0px 0px; background-repeat: no-repeat no-repeat; } a.next:hover { background-position: 0px -34px; }

Daha sonra ‘Ctrl + F’ tuşlarına basarak sayfada arama yapıyor ve aşağıdaki kodu buluyoruz.

<b:includable id='nextprev'>

Bulduğumuz kodun başından itibaren, karşımıza ilk çıkacak

<b:includable id='nextprev'>

<b:if cond='data:newerPageUrl'>

<a class='next' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' title=''/></b:if>

<b:if cond='data:olderPageUrl'>

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

<b:if cond='data:mobileLinkUrl'>

<div class='blog-mobile-link'>

<a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a></div></b:if>

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

Önizlemede bir sorun yaşanmıyorsa şablonumuzu kaydediyoruz. Böylece eklentimiz yüklenmiş oldu. Herhangi bir yazınıza tıklayarak eklentiyi inceleyebilirsiniz.