 |
| Blogger - Gelişmiş Önceki ve Sonraki Yazı Eklentisi |
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/AVvXsEh2DYai3MOLTUpoAadO3TfcWIhZoFpthynLAb4QZc68x6uqEUO4lyJauXsz_IPxiUtYMVS0VY-e6GZLbTQqul8QXianIlh8jbIL5fE7Zvn_6KaAsyvNs7xUHluRzPnHGC2Fqv9_xZByPAE/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/AVvXsEgWrZlxReJFYgwlF79INTDbjNCKQhag3HLvDq7c19lQBMcJpiNBHGDA-6cjo25uSFSbOzo7_xzf7EmvD4dTyByYyocgreSyukfbt503r1Huf8ruuHMkDG-oh0M0dtfySEdCDE4bBKxE6gs/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 + "_blog-pager-newer-link"' title=''/></b:if>
<b:if cond='data:olderPageUrl'>
<a class='prev' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' 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.
