Blog Yazısını Sayfalara Ayırmak

  Blog yazısını sayfalara ayırmak gerektiğinde izlemeniz gereken adımları anlatacağım. Özellikle çok uzun yazılar olan sayfaların daha kullanışlı olması açısından önemlidir. Şimdi adım adım ilerleyelim.

  İlk önce şablonunuzun kodlarında jquery olması gerekiyor. Daha önce şablona jquery  eklenmemiş ise blogger kumanda panelinize giriş yaparak Şablon > HTML'yi Düzenle  yolunu takip ederek HTML kodlarını açın ve Ctrl + F tuş kombinasyonunun yardımıyla açabileceğiniz arama kutusuna /head yazarak bu satırı bulun.   
   

/head komutunun üzerine bu kodu ekleyin;

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

/head komutunun altına bu kodu ekleyin;

<!--sayfa bolmek start--> <<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> <!--sayfa bölmek end-->

ş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;}

Ş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>