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

23 Mayıs, 2019
Blogger Blog Pager Özelleştirilmiş Yeni Tasarımı
Blogger Blog Pager Özelleştirilmiş Yeni Tasarımı
Blogger Blog Pager Özelleştirme - 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.

15 yorum:

  1. Bu gibi eklentilerde yazının başında mobil-masaüstü kullanıcılar şeklinde açıklama yapılması lazım aslında.
    Bu eklenti masaüstü görünüm için hazırlanmış bir eklenti.
    Mobil görünümdeki sayfa navigasyonu için değişiklik yapmaya gerek yok.
    Bir site en çok hangi kullanıcılardan izleyici alıyorsa ona göre hareket etmesi gerekir.
    Örneğin hiç masaüstü kullanan izleyicisi yoksa masaüstü görünüm için türlü çalışmalar yapmasına gerek yoktur.
    Masaüstü kulanım daha çok mobilin yapamadığı araçları barındırdığı için tercih ediliyor. Masaüstünde ise ne kadar az araç-kod olursa o kadar iyi deniliyor. Hangi kullanıcıya göre hareket edileceğini planlamak gerekir.
    Teşekkürler.

    YanıtlaSil
    Yanıtlar
    1. Tabi kullanım yoğunluğuna göre gerekli planlamalar yapılıp hareket edilmeli ama masaüstü ve mobil görünümdeki uyumda oldukça önemlidir. Bu içerikteki eklenti de tamamen tercih meselesi. Ayrıca sadece masaüstü ya da sadece mobil görünüm içinde uyarlanabilir bu pager eklentisi. Ben teşekkür ederim yorumunuz için.

      Sil
  2. Üstad öncelikle ellerine sağlık güzel bir paylaşım olmuş ancak benim bloğuma eklediğimde görünüm istediğim gibi olmadı yardımcı olabilir misin? Şimdiden tşkr ederim. https://i.hizliresim.com/AOQ8l7.png

    YanıtlaSil
  3. Arlina Design'in gerek temaları gerekse de bu tür özelleştirme seçeneklerine bayılıyorum :) Ah birde temalarında ki yorum kısmı sorunu da düzeltseler tadından yenmeyecek.

    YanıtlaSil
    Yanıtlar
    1. Yorum kısmı sorunu nedir?

      Sil
    2. Çoğu temanızda yorum kısmında yanıtla butonu çalışmıyor. Nasıl düzeltileceğini sitenizde paylaşmışsınız. Bende şu anda sizin temanızı kullanıyorum ve oradan bakarak düzelttim ama bilmeyenler için büyük problem oluşturuyor. Bu arada geç dönüş yaptığım için özür dilerim :( Malum işlerden dolayı sürekli bloglara zaman ayıramıyorum.

      Sil
  4. Ümit Ağabey tarayıcılarla ilgili yazı yazsanız efsane olur.
    Örneğin benimle Chrome mu Opera mı deseniz size Opera derim ama belki başkası "Chrome ezer geçer" der.
    Detaylı bir Opera-Chrome kıyası bekliyorum özetle :D

    YanıtlaSil
    Yanıtlar
    1. Google'dan uzak durmak en iyisi aslında ama yapamayacağımız için... Maalesef ben de Chrome kullananlardanım.

      Sil
    2. chrome'yi bıraktım firefox'a geçtim çok memnunum.
      Hatırlatmaları, parola vs. hiç yormuyor.
      1-2 özelleştirme ile mükemmel çalışıyor.
      Artık Chrome dönmem.

      Sil
    3. Sayısal Mehmet sözünüze katılıyorum.Bu aralar Chrome kendi kendine kapanıyor.Tamamen bırakacağım artık.

      Sil
    4. Bende bir aralar FireFox kullanmıştım. İyi yanı ipini istediğin gibi değiştirebiliyorsun. Farklı ülkelerde gözüküyorsun.

      Sil
    5. İzet
      Aynısı Opera'da da var.VPN özelliği olarak :)

      Sil
  5. Bende
    .................................
    .................................
    .................................
    kodları çıkmıyor ne yapabilirim?

    YanıtlaSil
    Yanıtlar
    1. Merhaba blog sitenizde butonları görüntüleyemiyorsanız aşağıdaki koda benzer kodları blog sitenizde inceleyin.
      <b:includable id='main' var='top'>
      ...........
      <b:include name='nextprev'/>
      ...........
      </b:includable>

      Sil

Yorum yaparken:
1. İçerik konusuyla alakalı olmasına özen gösterin.
2. Aktif link bırakmayın, aksi taktirde yorumunuz silinir.
3. Yazım ve dil bilgisi kurallarına uymayı ihmal etmeyin.
Konu ile ilgili olmayan sorularınız için ise Blogger Yardım veya İletişim sayfalarını kullanınız.

Copyright © 2016 - 2019 www.blogtecrubem.com · Duyuru · İletişim · Yasal Uyarı