Blogger için gelişmiş önceki ve sonraki yazı eklentisi

Blogger tasarım çalışmalarımızdan tekrar merhabalar. Daha önce, WordPress kullanan ziyaretçilerimiz için paylaştığımız ‘gelişmiş önceki ve sonraki yazı eklentisi’ne benzer eklentinin bu defa Blogger’da nasıl kurulacağından bahsetmek istiyorum. 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 oklarlakullanı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üzenlebö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/AVvXsEhqTJuV71cpvGoJviCXV-4qW_vFR9_nTv0TM1tDluyzAF68id0o4DbvVbm1dm6hcb2Rcag-XCDDeCwk8WainLiyNHK8Y2FSRAS9Aq_0SXamNDjHhuQnbvvPfUCGVFkB2MJUkbD9z5ZIc0I/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/AVvXsEhDOi-C1aYxY60UCZFL30ftxzcU_49ppPX0U4dViTjlOcnlRWHMqB6x0nF6pa4orQfNYwQr83NwiNrBdcC8EMEDO7WP7NhdBAToUeC8N9RpEtLuT9hV8xy6wj7m1wqEWgb6TtBRhD5cyiA/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>

kodunun hemen sonuna kadar siliyor ve onların silindiğin yere aşağıdaki kodu ekliyoruz.

<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.