Blogger blog pager özelleştirilmiş yeni tasarımı

Blogger Blog Pager Özelleştirilmiş Yeni Tasarımı

Blogcular standart sayfalandırma (blog pager) ile "Daha eski/Daha yeni veya Önceki/Sonraki ve Ana Sayfa" gezinme seçeneklerini kullanarak ziyaretçilerin blog sayfalarına göz atmasını sağlar.

Blogger Blog Pager gezinme seçenekleri ana sayfada ve son sayfada iki buton olarak görünüyor. Blog sitesinde bulunan ilk sayfa/son yayın sayfası ve son sayfa/ilk yayın sayfası gibi hangi sayfada olduğunuzu belirten butonlar görüntülenmiyordu. Bu nedenle, Blogger standart gezinme seçeneklerini özelleştirerek ziyaretçileri daha da bilgilendiren ve daha düzenli görünen gezinme seçeneklerini haline getirdik. Böylece, ilk sayfa/son yayın sayfası ve son sayfa/ilk yayın sayfası gibi hangi sayfada olduğunuzu belirten butonları (Blog Pager) gezinme seçenekleri butonları arasına ekledik.

Şimdi özelleştirilmiş Blogger Blog Pager gezinme seçeneklerini blog sitenize eklemek istiyorsanız aşağıdaki adımları takip edin.

Öncelikle Blogger hesabınıza giriş yapın ve eklemek istediğiniz blog sitenizin yönetim panelinde bulunan Tema sekmesine tıklayın. Açılan sayfada Tema editör sayfanıza erişmek için HTML'yi Düzenle seçeneğine tıklayın.

Not: Aşağıdaki adımları blog sitenizde uygulamadan önce temanızın yedeğini alın veya mevcut kodları tamamen silmeden bilgisayarınız Not Defterine kopyalayın.

Birinci adım: Blog sitenizin tema editör sayfasında klavyenizin CTRL+F tuşları yardımıyla aşağıdaki kodu bulun.

<b:includable id='nextprev'>
.................................
.................................
.................................
</b:includable>

Bulmuş olduğunuz kodu aşağıdaki 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'><svg viewBox='0 0 448 512'><path d='M448 208v96c0 13.3-10.7 24-24 24H224v103.8c0 21.4-25.8 32.1-41 17L7 273c-9.4-9.4-9.4-24.6 0-34L183 63.3c15.1-15.1 41-4.4 41 17V184h200c13.3 0 24 10.7 24 24z' fill='#1c7ed6'/></svg></a>
</span>
<b:else/>
<span class='newer-link-frist-page' id='blog-pager-newer-link'><svg viewBox='0 0 448 512'><path d='M448 208v96c0 13.3-10.7 24-24 24H224v103.8c0 21.4-25.8 32.1-41 17L7 273c-9.4-9.4-9.4-24.6 0-34L183 63.3c15.1-15.1 41-4.4 41 17V184h200c13.3 0 24 10.7 24 24z' fill='#1c7ed6'/></svg></span>
</b:if>
<span id='home-link'>
<h5><a class='home-link' expr:href='data:blog.homepageUrl' expr:title='data:homeMsg'><data:homeMsg/></a></h5>
</span>
<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'><svg viewBox='0 0 448 512'><path d='M0 304v-96c0-13.3 10.7-24 24-24h200V80.2c0-21.4 25.8-32.1 41-17L441 239c9.4 9.4 9.4 24.6 0 34L265 448.7c-15.1 15.1-41 4.4-41-17V328H24c-13.3 0-24-10.7-24-24z' fill='#1c7ed6'/></svg></a>
</span>
<b:else/>
<span class='older-link-last-page' id='blog-pager-older-link'><svg viewBox='0 0 448 512'><path d='M0 304v-96c0-13.3 10.7-24 24-24h200V80.2c0-21.4 25.8-32.1 41-17L441 239c9.4 9.4 9.4 24.6 0 34L265 448.7c-15.1 15.1-41 4.4-41-17V328H24c-13.3 0-24-10.7-24-24z' fill='#1c7ed6'/></svg></span>
</b:if>
</div>
<div class='clear' />
</b:includable>

İkinci adım: Aşağıdaki CSS kodlarını tema editör sayfanızda bulunan </head> kodunun bir satır üzerine ekleyin.

<style>
/*<![CDATA[*/
#blog-pager,.blog-pager{
justify-content:center;
align-items:center;
display:-webkit-box;
display:-ms-flexbox;
display:flex
}
#blog-pager-newer-link,#home-link,#blog-pager-older-link{
justify-content:center;
align-items:center;
display:-webkit-box;
display:-ms-flexbox;
display:flex
}
.newer-link-frist-page svg,.older-link-last-page svg{
opacity:0.5
}
#blog-pager-older-link a,#blog-pager-newer-link a,#home-link a,.older-link-last-page,.newer-link-frist-page{
background:rgba(0,0,0,0.1);
height:35px;
padding:0 8px;
border-radius:2px;
overflow:hidden
}
#blog-pager a{
font-size:14px;
color:#495057;
font-weight:bold;
text-transform:uppercase;
justify-content:center;
align-items:center;
display:-webkit-box;
display:-ms-flexbox;
display:flex
}
#home-link{
margin:0 16px
}
#home-link a{
padding:0 16px
}
#blog-pager svg{
width:28px;
height:28px;
vertical-align:middle
}
/*]]>*/
</style>

Not: Burada dikkat etmeniz gereken husus, tema editör sayfanızda daha önceden bulunan Blog Pager CSS kodları yeni eklemiş olduğunuz Blog Pager gezinme seçenekleri butonlarının düzensiz görünmesine neden olabilir. Bu nedenle, önceden bulunan Blog Pager CSS kodlarını da bilgisayarınız Not Defterine kopyalayın ve tema editör sayfasından kaldırın.

Yeni tasarımlı Blogger Blog Pager gezinme seçenekleri ile ilgili soru ve görüşleriniz için ve ayrıca daha da özelleştirmek için yorum formunu kullanabilirsiniz. Blog sitenizi özelleştirme ve Blog sitenize yeni özellikler kazandırmak için çalışmalarımız devam etmekte ve en yakın zamanda yeni bilgileri de sizlerle paylaşacağız. Bizi takip ettiğiniz için teşekkür ederiz.

Bu içerik Arlina Design tarafından Blog Tecrübem için hazırlanmıştır.