Blogger'da Başlıklı Önceki Sonraki Buton Kodu

,  

Blogger'da blog yazılarınıza kolayca başlıklı önceki/sonraki butonlar özelliği ekleyebilirsiniz. Bu butonlar, okuyucularınızın blogunuzdaki diğer yazıları keşfetmesine yardımcı olur ve kullanıcı deneyimini iyileştirir.

Bu özelliğin doğru çalışabilmesi için aşağıdaki kodların hepsinin eklendiğinden emin olun. Özel not kısmını unutmayın(!)

Başlıklı önceki/sonraki buton kodu oluşturmak için:

  1. Blogger'da blogunuza giriş yapın.
  2. Düzen > Sayfa Düzeni'ne gidin.
  3. HTML Düzenleyicisi sekmesini seçin
  4. Kod eklemek istediğiniz yere tıklayın.
  5. Aşağıdaki kodları kopyalayıp yapıştırın:

HTML :

<b:includable id='postNextPrev'>
<b:if cond='data:view.isPost'>
<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'>Newer</a>
</span>
</b:if>
<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'>Older</a>
</span>
</b:if>
<!--<a class='home-link' expr:href='data:blog.homepageUrl'> Home</a>
<b:if cond='data:mobileLinkUrl'>
<div class='blog-mobile-link'>
<a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
</div>
</b:if>-->
</div>
</b:if>
</b:includable>
<b:includable id='postPagination'>
<div class='blog-pager container' id='blog-pager'>
<b:include cond='data:newerPageUrl' name='previousPageLink'/>
<b:include cond='data:olderPageUrl' name='nextPageLink'/>
<b:include cond='data:view.url != data:blog.homepageUrl' name='homePageLink'/>
</div>
</b:includable>

CSS:

#blog-pager {
text-decoration:none;
display:flex;
justify-content : center;
margin : 50px 0 30px;
width : 100%;
align-items : flex-start;
gap : 30px;
}
#blog-pager a.blog-pager-newer-link,
#blog-pager a.blog-pager-older-link {
text-decoration:none;
}
.blog-pager-newer-link span:first-child,
.blog-pager-older-link span:first-child {
font-size:14px;
font: normal bold 14px 'Anek Devanagari';
text-transform:uppercase;
text-decoration:none!important;
}
.blog-pager-newer-link span:last-child,
.blog-pager-older-link span:last-child{
display:block;
line-height:24px;
font-size:16px;
text-decoration:none!important;
text-transform:none;
}
#blog-pager-newer-link {
flex : 1 1 50%;
text-decoration:none;
}
#blog-pager-older-link {
flex : 1 1 50%;
text-align : right;
text-decoration:none;
}

JavaScript :

<b:if cond='data:view.isPost'>
<script> //<![CDATA[
// Navigasi Next Prev Blogger dengan Judul by igniel.com
!function() {
var next = 'Sonraki içerik';
var prev = 'Önceki içerik'; eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('C c=["\\g\\s\\B\\i\\u\\n\\j\\k\\g\\n\\e\\h\\j\\f\\e\\H\\e\\h\\j\\i\\m\\f\\z","\\g\\s\\B\\i\\u\\n\\j\\k\\g\\n\\e\\h\\j\\u\\i\\A\\e\\h\\j\\i\\m\\f\\z","\\x\\h\\e\\t","\\g\\d\\d\\h","\\p\\l\\k\\g\\f\\o","\\p\\v\\l\\k\\g\\f\\o\\J\\p\\l\\k\\g\\f\\o","\\d\\e\\I\\d","\\t\\m\\h\\l\\d","\\s\\e\\f\\d\\h\\E\\j\\d\\m\\d\\i\\e","\\t\\m\\f\\A","\\p\\v\\l\\k\\g\\f\\o","\\x\\d\\G\\i","\\n\\e\\d"];C a=$(c[0]),b=$(c[1]);$[c[y]](a[c[3]](c[2]),w(r){a[c[q]](c[4]+F+c[5]+$(r)[c[9]](c[8])[c[7]]()[c[6]]()+c[D])},c[q]);$[c[y]](b[c[3]](c[2]),w(r){b[c[q]](c[4]+K+c[5]+$(r)[c[9]](c[8])[c[7]]()[c[6]]()+c[D])},c[q])',47,47,'||||||||||||_0x9c5e|x74|x65|x6E|x61|x72|x6C|x2D|x70|x73|x69|x67|x3E|x3C|11|_0x42fcx3|x2E|x66|x6F|x2F|function|x68|12|x6B|x64|x62|var|10|x79|next|x6D|x77|x78|x20|prev'.split('|'),0,{})); }();
//]]> </script></b:if>

Özel Not:

Bu kodları ekledikten sonra <b:includable data='post' name='postFooter' /> kısmına gelip <b:include name='postNextPrev'/> kodunu eklemeniz gerekiyor yoksa çalışmaz.

Ek olarak:

  • Butonların renklerini ve stillerini CSS kullanarak değiştirebilirsiniz.
  • Butonların konumunu HTML kodunu düzenleyerek değiştirebilirsiniz.

Yorum Gönder