3 Şubat 2014

Blogger Önceki Yayın Sonraki Yayın


Bir blog için önceki/sonraki yayın navigasyonu oldukça önemlidir. Okuyucularımız arama motorlarından gelip herhangi bir yazımızı okuduktan sonra onlara bir önceki yada bir sonraki yazılarımızın ne olduğunu gösterebilmemizi sağlar. Bu şekilde okuyucularımızın blogumuzda daha fazla zaman geçirmelerini sağlayabiliriz.

Önceki ve sonraki yazı navigasyonunu dikkat çekici hale getirmek yazılarımızın okunmasına yardımcı olur. Bu yönlendirme için bir çok çalışmayı küçük bir araştırma yaparak bulabiliriz. Bulduğumuz bu çalışmalar arasından istediğimizi blogumuza ekleyerek okuyucularımızın dikkatini çekebiliriz.

Jquery kullanılarak yapılandırılmış bu önceki ve sonraki yazı yönlendirmesi oldukça şık bir görünüme sahip. Önceki ve sonraki yazılar eklentisinin ön izlemek tıklayınız. DEMO

Blogumuza nasıl ekleyeceğimize gelirsek;
Not: Olası bir hataya önlem almak için şablonumuzun yedeğini almayı unutmayınız.

Blogger Kontrol Paneli > Şablon > HTML'yi Düzenle dediğimizde karşımıza gelen kod penceresinde CTRL+F kombinasyonu ile ]]></b:skin> kodunu aratıp bulduktan sonra hemen üzerine aşağıdaki kodları yapıştırıyoruz.

.mbt-pager { border-top: 2px dashed #ddd; border-bottom: 2px dashed #ddd;  margin-bottom: 10px;   overflow:hidden; padding:0px;} 
.mbt-pager li.next { float: right; padding:0px; background:none; margin:0px;} 
.mbt-pager li.next a { padding-left: 24px; }
.mbt-pager li.previous { margin:0px -2px 0px 0px; float: left;  border-right:1px solid #ddd; padding:0px; background:none; 
} 
.mbt-pager li.previous a { padding-right: 24px;  }
.mbt-pager li.next:hover, .mbt-pager li.previous:hover  {background:#333333; }
.mbt-pager li { width: 50%; display: inline; float: left; text-align: center; } 
.mbt-pager li a { position: relative; min-height: 77px; display: block; padding: 15px 46px 15px; outline:none; text-decoration:none;}
.mbt-pager li i { color: #ccc; font-size: 18px; }
.mbt-pager li a strong { display: block; font-size: 20px; color: #ccc; letter-spacing: 0.5px; font-weight: bold; text-transform: uppercase; font-family:oswald, sans-serif, arial; margin-bottom:10px;}
.mbt-pager li a span { font-size: 15px; color: #666;  font-family:oswald,Helvetica, arial; margin:0px;} 
.mbt-pager li a:hover span, 
.mbt-pager li a:hover i { color: #ffffff; } 
.mbt-pager li.previous i { float:left; margin-top:15%; margin-left:5%; } 
.mbt-pager li.next i { float: right; 
margin-top: 15%; 
margin-right: 5%; }
.mbt-pager li.next i, .mbt-pager li.previous i , 
.mbt-pager li.next,  .mbt-pager li.previous{ 
-webkit-transition-property: background color; -webkit-transition-duration: 0.4s; -webkit-transition-timing-function: ease-out; 
-moz-transition-property: background color; -moz-transition-duration: 0.4s; -moz-transition-timing-function: ease-out; 
-o-transition-property: background color; -o-transition-duration: 0.4s; -o-transition-timing-function: ease-out; 
transition-property: background color; transition-duration: 0.4s; transition-timing-function: ease-out; }
.fa-chevron-right {padding-right:0px;}

Daha sonrasında yine CTRL+F kombinasyonu ile </head> kodunu bulduktan sonra hemen üzerine aşağıdaki kodları yerleştiriyoruz.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

Daha Sonrasında ise <data:post.body/> kodunu aratıp buluyoruz. Bulduğumuz kodun hemen üzerine aşağıdaki kodları yerleştiriyoruz. Bir çok şablonda <data:post.body/> kodu birden fazla bulunmaktadır doğru olanı deneme yanılma yöntemiyle bulabilirsiniz.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<ul class='mbt-pager'>
        <li class='next'> 
<b:if cond='data:newerPageUrl'> 
<i class='fa fa-chevron-right'/><a class='newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' rel='next'/> 
<b:else/> 
<i class='fa fa-chevron-right'/><a rel='next'><strong>Sonraki</strong> <span>EN Yeni Yayın</span></a> 
</b:if> 
</li>
    <li class='previous'> 
<b:if cond='data:olderPageUrl'> 
<i class='fa fa-chevron-left'/><a class='older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' rel='previous'/> 
<b:else/> 
<i class='fa fa-chevron-left'/><a rel='previous'><strong>Önceki</strong> <span>YEn Eski Yayın</span></a> 
</b:if> 
</li>
    </ul>

<script type='text/javascript'> 
//<![CDATA[ 
(function($){    
    var newerLink = $('a.newer-link'); 
    var olderLink = $('a.older-link'); 
    $.get(newerLink.attr('href'), function (data) { 
     newerLink.html('<strong>Sonraki</strong> <span>'+$(data).find('.post h3.post-title').text()+'</span>');    
    },"html"); 
    $.get(olderLink.attr('href'), function (data2) { 
     olderLink.html('<strong>Önceki</strong> <span>'+$(data2).find('.post h3.post-title').text()+'</span>');    
    },"html"); 
})(jQuery); 
//]]> 
</script>
      </b:if></b:if>

Son olarak şablonumuzu kaydediyoruz. Önceki sonraki yayın eklentisi hazır durumda olacaktır.

5 yorum:

  1. kod için teşekkurler.
    ben biraz modifiye ettim www.kaynaq.com

    YanıtlaSil
  2. Oldu ama yazı başlığı ile yazı arasına girdi. Demo'da olduğu gibi nasıl düzeltebilirim?

    YanıtlaSil
    Yanıtlar
    1. Yazıda da belirttiğim gibi kodlarımızı belirtilen yerlere eklediğimizde demo görüntüsünde olduğu gibi yazılarımızın altında görülecektir.

      Sil
    2. Öncelikle teşekkürler.

      Şunu sormak istiyorum. Bu sonraki konuyu browserın sağ orta tarafına önceki konuyu da sol orta tarafa yerleştirmemiz mümkün müdür ? Birde bu ileri geri butonlarının resimli yapabilir miyiz ? Yani o içeriğin resmi neyse o olacak şekilde.


      Dönüş yaparsanız sevinirim.


      İyi çalışmalar.

      Sil
  3. teşekkürler

    http://www.yuklex.blogspot.com.tr

    YanıtlaSil

© 2013 iPRESS. All rights resevered. Designed by Templateism