Blogger yayınlarını farklı sayfalara bölme

25 Temmuz, 2017

Blogger yayınlarını farklı sayfalara bölme
Blogger yayınlarını farklı sayfalara bölme
Blogger (blogspot) bloglarında yayın sayfalarını birden fazla sayfaya nasıl bölebiliriz? Blogger post sayfalarını farklı sayfalara bölme...

Merhaba dostlarım, Blogger ile ilgili nadir rastlanabilecek bir konudan daha bahsetmek istedim bu yazımda, Blogger yayınlarını farklı sayfalara nasıl bölebiliriz?

Bir önceki yazımı bu konuya canlı örnek olsun diye paylaşmıştım. Eğer canlı olarak sayfaların nasıl bölündüğünü incelemek isterseniz "Aksiyon severler için 3 film önerisi!" başlıklı yazımı inceleyebilirsiniz.
Blogger yayınlarını farklı sayfalara bölme
Yukarıda yer alan resimde gördüğünüz gibi bu kod sayesinde bir yayın sayfasını kendi içinde 3 sayfaya bölebilirsiniz.

Daha önce hiç dikkatinizi çekti mi bilmiyorum ama buna benzer yöntemler genelde haber sitelerinde kullanılır, özellikle görsel içerikler paylaşırken. Tabi o sitelerde daha kapsamlı kodlar yer alıyor.

Gelelim şimdi bunu blogumuza eklemeye!

Yapacaklarımız oldukça basit. İlk olarak Blogger kullanıcı panelinden sol tarafta yer alan sekmelerden Tema daha sonra HTML Düzenle seçeneklerini seçiyoruz. Kodların yer aldığı sayfada Ctrl F yarımıyla aşağıdaki kodu buluyoruz.
<head>
Bulduğumuz bu kodun hemen altına aşağıdaki kodları ekliyoruz.
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
Daha sonra temamızı kaydedip çıkıyoruz. İkinci aşamada ise hangi yayını sayfalara bölmek istiyorsak eğer, o yayının düzenleme sayfasında hemen sol üst köşede olan HTML bölümüne tıklayıp aşağıdaki kodları ekliyoruz.
Blogger post HTML
Kodlar:
<style>
.post-pagination {
    margin: 20px auto;
    text-align: center;
    width: 100%;
}
.button_1, .button_2, .button_3 {
    border: 2px solid #f4655f;
    font-weight: 900;
    padding: 6px 36px;
    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;
}
</style>
<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>
<div class="content_1">
1.Sayfada görünecek olan içerikler bu kısma
</div>
<div class="content_2" style="display: none;">
2.Sayfada görünecek olan içerikler bu kısma
</div>
<div class="content_3" style="display: none;">
3.Sayfada görünecek olan içerikler bu kısma
</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>
Eklediğimiz bu kodların içinde kırmızı renkle yer alan 3 kısmın her biri yayın içerisinde ki bir sayfanın alanı. Bu üç alana içeriklerinizi ekleyip yayını paylaşabilirsiniz.

Sonlar...

Bu işlemi yaparken ilk olarak içeriğinizi hazırlamak daha iyi olur aslında. Örneğin ben bir önceki paylaştığım içeriği normal bir yayın gibi hazırladım. Daha sonra yukarıda yer alan kodları aralara ekleyerek yayınımı paylaştım. Oldukça hoşuma giden bir konuydu bu. Umarım sizin de hoşunuza gider. Konuyla ilgili sorularınız olursa yorum yaparak bana bildirebilirsiniz.

8 yorum:

  1. O yazını okudum. Diğer iki film nerde diye yazının sonuna bakıyorum bende. Baktım, bölmüşsün. Blog Tecrübem yine yapmış yapacağını dedim 😀

    YanıtlaSil
  2. Öğrenmek güzel şey, ilk defa gördüm. Hoşuma gitti. Çok uzun bir yazı yazarsam kullanmak için kodları "note pad" dosyası olarak kaydettim. :) Yararlı, kullanışlı bir paylaşım olmuş teşekkürler.

    YanıtlaSil
    Yanıtlar
    1. Rica ederim, tabi uzun yazılar için kullanışlı olacaktır...

      Sil
  3. O yayını gördüm ve bekledim :) sonunda yeni bir öğreti geldi. Eline sağlık.

    YanıtlaSil
  4. Hocam emeğinizesağlık bir önceki yayında da gördüm kullanışlı olarak bunu uyguayabilirim.
    Nuri Özkan -Kişisel Blog
    nuriozzkan.com

    YanıtlaSil

Yorum yaparken:
1. İçerik konusuyla alakalı olmasına özen gösterin.
2. Aktif link bırakmayın. (Hemen silinir!)
3. Yazım ve dil bilgisi kurallarına uymaya çalışın lütfen. Konu ile ilgili olmayan sorularınız için ise Blogger Yardım veya İletişim sayfalarını kullanınız.

Copyright © 2017 Blog Tecrübem - Kişisel Blog Her hakkı sakldır.
I Blogger!