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

Blogger Sayfa İçini Bölümlere Ayırmak

Blog içeriklerinde uzun yazılar yada çoklu resim gösteriminde sayfa uzunluğu normalden çok daha uzun olabilmektedir. Bu gibi durumlarda tek bir sayfa içinde kullanılabilecek sayfa içi bölümler oluşturabilirsiniz. Sayfa içini alt sayfalara ayırarak bazen sayfa hızını artırmak, bazen de ziyaretçinin sayfa içinde daha rahat okumasını sağlamak için kullanabilirsiniz. 

Blogger Yayın İçi Sayfalar Oluşturma Kodu

Blogger de yazılarımızı yazdığımız panelde HTML görünümü düzenine geçerek yazılarımızı veya resimlerimizi eklemek için aşağıda vermiş olduğumuz kodu kullanabilirsiniz.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script><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">
İLGİLİ İÇERİK 1
</div>
<div class="content_2" style="display: none;">
İLGİLİ İÇERİK 2
</div>
<div class="content_3" style="display: none;">
İLGİLİ İÇERİK 3
</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>

İLGİLİ İÇERİK : Eklenecek resim, metin vb. içeriği giriniz.

Kayıt ettikten sonra tek bir sayfa içerisinde istediğiniz kadar alt sayfa olacaktır. Umarız içeriklerimizin sizlere faydası olmuştur. Zaman ayırdığınız için teşekkür ederiz. https://www.webkenti.net/

Daha iyi bloglar için...

Zaman ayırdığınız için teşekkürler, umarız faydası olmuştur.