28 Ocak 2016 Perşembe

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

30 yorum
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.

blogger yazıyı sayfalara ayırmak


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.

30 yorum:

  1. Hocam bunu resimler içinde kullanabiliriz pc başına geçtiğimiz de muhakkak bakmaliyim tesekkurler

    YanıtlaSil
  2. Kişisel bloglar için belki ideal değil ama moda, bilişim, tanıtım tarzı bloglar için ideal bir eklenti. :)

    YanıtlaSil
  3. Merhaba Hocam bu konunuzdaki http://bloghocam.blogspot.com/2016/01/blogger-site-haritalari.html herşeyi yaptım şimdi google indexlerim yok yüklenmesi uzun sürdüğünden dolayı mı? Sayfa indexlerim hariçindeki indexler yok. Yardımcı olursanız sevinirim... sitem: www.haberbuya.com

    YanıtlaSil
  4. Öncelikle Merhaba. Bir sorum olacaktı.. Blogger'da haftalık , aylık ve tüm zamanların popüler yazıları eklentisi var. Bu zaman zarflarını nasıl değiştirebiliriz acaba?

    Günün popüler yayınları veya son 1 saatte en çok görüntülenen yazılar gibi bir şey yapabilir miyiz? Yapabilirsek nasıl yapabiliriz? Teşekkürler şimdiden :)

    YanıtlaSil
  5. Yararlı bir eklenti teşekkürler.

    YanıtlaSil
  6. Şimdilik kullanmasam da gerçekten güzel bir bilgi.
    Teşekkürler

    YanıtlaSil
  7. Başarılı bir paylaşım olmuş teşekkürler..Hocam size reklam için mail attım ama dönüş olmadı baya zaman geçti 2 hafta kadar.

    YanıtlaSil
  8. Video bir tek benmi göremiyorum :S

    YanıtlaSil
  9. Video gözükmüyor bende yapamadım.

    YanıtlaSil
  10. Hocam ben yaptım ama bütün konular kaydı felan temayı komple bozdu.Bu işlemleri yaptıktan sonra çalışıyor kodlar fakat ana sayfadaki yazılar benim komple hepsi gözükür oldu tema bozuldu. Verdiğiniz kodları sildim düzelttim anca.

    YanıtlaSil
  11. Kişisel bloglar için pek uygun birşey olmasada faydalı bir yazı sonuçta ^_^ Bilmekte fayfa var ^_^

    YanıtlaSil
  12. Bu yorum yazar tarafından silindi.

    YanıtlaSil
  13. Hocam merhaba,(ben gönderiyi sayfalara ayırmak ile ilgili değil de) anasayfadaki gönderiler sıralanırken sayfaya ayrılıyor, bununla alakalı bir sorum olacak. İlk sayfadan sonraki sayfalara geçmeye çalıştığımda " http://i.hizliresim.com/BDQZvM.png " böyle oluyor. Bir yardımcı olabilir misiniz?

    Bu sıkıntıyı sadece kendi blogumda değil, bazı diğer bloglarda da görmüştüm.

    YanıtlaSil
  14. Gerçekten profesyonel bir görüntü sağlıyor paylaşım için teşekkür ederiz :)
    Ama ben tercih etmem açıkçası, böyle bir site olduğunda geçişlerden sıkılıp kapattığım çok oldu.

    YanıtlaSil
  15. Başarılı bir yazı olmuş elinize sağlık.Ayrıca kendi blog sitemede beklerim.
    http://ggunay.blogspot.com

    YanıtlaSil
  16. Faydalı olabilir tabi bazı bloglar için ama şahsen bu özellikten nefret ederim. Umarım ilerki zamanlarda bloglar 1 satır yazı verip 2. sayfaya geçmemizi bekleyen böylece hit kasan salak saçma haber siteleri gibi olmaz.

    YanıtlaSil
  17. Teşekkürler işime yaradı...

    YanıtlaSil
  18. sadece 3 buton mu var hocam daha fazla buton nasıl ekleyebiliriz.

    YanıtlaSil
  19. Merhaba, çok çok yeni bir blogger'ım ve katagorileri yapamıyorum. Yani http://kadininportresi.blogspot.com.tr adresinde mesela diyetleri tıklayamıyorum etiketleme işlemini de yaptım ama olmuyor. İnşallah anlatabilmişimdir ve umarım cevap alabilirim

    YanıtlaSil
    Yanıtlar
    1. Şablondan veya yerleşim kısmından etiketin url'sini eklemeniz gerek

      Sil
  20. Uzun yazılar için faydalı bir şey.

    YanıtlaSil
  21. Blogunuzdaki çalışmalardan fazlasıyla yararlanıyorum. Çok teşekkür ederim, emeğinize sağlık...

    YanıtlaSil
  22. bu kodların herhangi birini kendi dropbox hesabımıza yüklemeye gerek var mı? daha önce sitenizden aldığım bazı kodlarda bozulmalar oldu da onun için soruyorum. Eğer kendi dropbox hesabıma yüklersem sizin ya da kaynak kodların olduğu yerde bir sorun olursa eklentim bozulmaz. Bu kodlar da böyle bir durum var mı

    YanıtlaSil
  23. Serdar hocam 10 ya da 20 sayfa yapacaksak ne yapmamız lazım kodlarla aram çok iyi değil yardımcı olursanız sevinirim

    YanıtlaSil
  24. Hocam çok teşekkür ederim.

    YanıtlaSil
  25. Merhabalar,öncelikle yazılar iin teşekkürler :) Ancak her ne kadar ben bir tanesini uygulayabilmiş olsam da sayfa numarası ekleme ve yazıyı sayfalara ayırma işlemini ben yapamadım kendi bloğumda,en başta ekleme yapmak için verdiğiniz kodlar uymuyor. Yardımcı olmanız mümkün mü acaba?

    YanıtlaSil

Picardes

LİNKLER