Blogger yayınlarını farklı sayfalara bölme - Vektörel Çizim indir - Kişiye Özel Hediye

Güncel Yayınlar

Vektörel Çizim indir - Kişiye Özel Hediye

Vektörel Çizim indir - Kişiye Özel Hediye

Post Top Ad

25 Temmuz 2017 Salı

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

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.

Hiç yorum yok:

Yorum Gönder