Blog Yazısının İçeriğini Sayfalara Ayırmak

Bazı büyük çaplı bloglarda, portallarda ve haber sitelerinde gördüğümüz yazıyı birden fazla sayfaya bölerek, yazı içerisinde geçiş yapılması olayını Blogger'a uygulamak isteyenler için çok profesyonel olması aynı işlevi görecek bir ipucu ve kod paylaşmak istiyorum.

Bir örnekle açıklamak gerekirse; 3000 kelimelik bir yazı yazdığınızı düşünün. Bu yazıyı yayınladığınızda sayfada oldukça fazla yer kaplayacak ve kaydırma çubuğunu epey hareket ettirmek zorunda kalacaksınız. Üstelik bu kadar uzun bir sayfa okuyucuyu da ürkütüp okumaya üşendirebilir. Böyle bir durumda bu kodları kullanarak 3000 kelimeli yazıyı 1000 bölümlük 3 parçaya ayıracak ve yazının altındaki numaralı navigasyon butonlarıyla bu parçalar arasında geçiş yapabileceksiniz.

İşleyişi daha iyi anlamak için hazırladığım şu örnek videoyu izleyebilirsiniz:

Gelelim bu uygulamayı blogunuzda nasıl kullanacağınıza. Öncelikle şablonunuzun kodlarında jquery olması gerekiyor. Eğer daha önce eklemediyseniz Blogger kumanda panelinize giriş yaparak Şablon > HTML'yi Düzenle  yolunu takip ederek HTML kodlarını açın ve Ctrl + F tuş kominasyonunun yardımıyla açabileceğiniz arama kutusuna </head> yazarak bu satırı bulun. Hemen üzerineşu kodu ekleyin:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

Hemen altına ise şu kodları ekleyin:

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.button_1').click(function(){
jQuery('.content_1').fadeIn('slow');
  jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_2').click(function(){
jQuery('.content_1').fadeOut('fast');
  jQuery('.content_2').fadeIn('slow');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_3').click(function(){
jQuery('.content_1').fadeOut('fast');
  jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeIn('slow');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
return false;
});
});
</script>

Son olarak şablonda ]]></b:skin> satırının üzerine şu kodları ekleyin:

.post-pagination {    margin: 40px auto;    text-align: center;    width: 100%; float:left;}.button_1, .button_2, .button_3 {    border: 1px solid #000;    font-weight: 900;    padding: 6px 16px;    color:#f4655f;    transition:ease 0.69s !important;}.button_1:hover, .button_2:hover, .button_3:hover {    background: none repeat scroll 0 0 #f4655f;    color: #fff;    text-decoration: none;}

Şablon kodlarıyla işimiz bitti. Şimdi uygulamayı kullanacağımız yazıya gidelim veya yeni bir yazı yazalım.Yazı editöründen yazının HTML kısmına geçiş yaparak aşağıda kodları ekleyelim:

<div class="content_1">
Birinci sayfada görünmesini istediğiniz içeriği buraya yazın.
</div>
<div class="content_2" style="display: none;">İkinci sayfada görünmesini istediğiniz içeriği buraya yazın.
</div>
<div class="content_3" style="display: none;">Üçüncü sayfada görünmesini istediğiniz içeriği buraya yazın.
</div>
<div class="post-pagination">
<a class="button_1" href="#">1</a>
<a class="button_2" href="#">2</a>
<a class="button_3" href="#">3</a>
</div>

Gördüğünüz gibi yazıyı  parçaya bu kodlarla ayırıyoruz. Kırmızı renkle gösterdiğim yerlere içeriğinizi yazabilirsiniz.

Blogger Site Haritalarınızı Güncellediniz Mi?

Blogger site haritası oluşturmak ile ilgili yaklaşık 5 yıl önce yayınladığım yazı pek çok kişiye rehber oldu ve Blog Hocam'ın en çok okunan yazılarından biriydi. 

Yakın zaman Google Web Yöneticisi Merkezi'ne girip site haritalarını inceleyenler bir aksilik ve gariplik olduğunu fark etmişlerdir. Şöyle ki; önceden Google tek bir site haritası ile 500 içerik indekslerken artık 150 içerik indeksliyor. Bu nedenle bizim eski site haritalarını silip yeni site haritaları eklememiz gerekiyor.

2016 Blogger İçin Site Haritası Oluşturma Ve Ekleme

Google Web Yöneticisi Merkezindeki site haritalarını güncelleme işlemini 3 adımda gerçekleştireceğiz.

1. Adım: Google Web Yöneticisi Merkezine giderek eski site haritalarını silelim. Bununn için Google Web Yöneticisi merkezine giriş yaparak blogumuzun ismine tıklıyoruz ve açılan sayfada sol taraftaki menüden Tarama > Site haritaları yolunu izliyoruz. Ardından önceden oluşturduğumuz site haritalarını seçerek siliyoruz.

2. Adım: Şimdi yeni site haritalarını oluşturalım. Bunun için eski yöntemi kullanacağız ama bir farkla. İndekslemeyi 500er 500er değil 150şer 150şer yapacağız. Ben ilk 1000 içerik gerekli olan site haritalarını aşağıda yazdım. Eğer 1000'den az içeriğiniz varsa oluşturduğum bu site haritalarının hepsini ekleyebilirsiniz.

atom.xml?redirect=false&start-index=1&max-results=150
atom.xml?redirect=false&start-index=151&max-results=150
atom.xml?redirect=false&start-index=301&max-results=150
atom.xml?redirect=false&start-index=451&max-results=150
atom.xml?redirect=false&start-index=601&max-results=150
atom.xml?redirect=false&start-index=751&max-results=150
atom.xml?redirect=false&start-index=901&max-results=150

3. Adım: Son olarak oluşturduğumuz bu site haritalarını Google Web Yöneticisi Merkezine göndereceğiz. Bunun için yine site haritaları sayfasına giderek yukarıda oluşturduğumuz site haritalarını teker teker ekliyoruz.

Sayfayı yenilediğimizde dizine gönderilen içeriklerin olması gereken sayıda olduğunu ve yanlarında beklemede yazdığını görüyoruz. Yaklaşık 24 saat sonra gönderilen bu içerikler dizine eklenecek ve bu yazı değişecektir.


Not: Yukarıda sadece ilk 1000 içerik için yeterli gelecek site haritalarını yazdım. Eğer 1000'den fazla içeriğiniz varsa ve hangi site haritalarını ekleyeceğinizi bilmiyorsanız lütfen yorum bölümünden sorun.