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

Bloger Sayfa İçi Sayfalar Oluşturma Kodu

Blogger yapılarda uzun yazılar yada çoklu resim gösteriminde tek bir sayfa içinde kullanılabilecek pagenavi ye ihtiyaç olmaktadır. Blog yazısının içeriğini sayfalara ayırmak ve daha işlevsel bir sunum yapma ihtiyacı oluşabilir.

Kısaca bir sayfa içerisinde alt sayfalar oluşturup yazı içi numaralandırmak için size şöyle bir kod düzenledim.



Yazılarımızı yazdığımız panelde HTML düzenine geçerek yazılarımızı veya resimlerimizi eklemek

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


Meraklısına .js kodu :




http://www.webkenti.net/


HTML / JAVASCRIPT EKLEMEK

Widget (gadget) olarak eklemek için :
Blogger > Yerleşim > Gadget ekle > HTML/JavaScript yolunu izleyerek istediğiniz yere ekleyebilirsiniz

Sayfa içinde kullanmak için :
Blogger > Yeni yayın oluştur > HTML yolunu izleyerek istediğiniz yere ekleyebilirsiniz.



* Canlı Demo için :
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
Kod Editörünü kullanabilirsiniz.

0 yorum: