banner gambar

MEMBAGI POSTINGAN MENJADI BEBERAPA HALAMAN PART2

Blogspot - 1. Langkah awal adalah membuka blogger.com dan masuk ke akun anda.
2. Buat postingan baru, namun kali ini kita membuatnya dengan HTML .
Lihat di atas sebelah kiri Judul waktu pertama kali anda akan membuat postingan di blogger.

3. Kemudian pastekan kode dibawah ini.


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

Tulisan Bagian 1 di Sini!

</div>

<div class="content_2" style="display: none;">

Tulisan Bagian 2 di Sini!

</div>

<div class="content_3" style="display: none;">

Tulisan Bagian 3 di Sini!

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

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



3. Tuliskan postingan anda di kode warna merah.
4. Kalau sudah selesai silakan "Publish" postingan anda.

Keterangan :
Kode diatas adalah untuk membuat postingan menjadi 3 halaman. Untuk 2 halaman posting silakan hapus kode

<div class="content_3" style="display: none;">

Tulisan Bagian 3 di Sini!

</div>


dan juga kode

<a class="button_3" href="#">3</a>

sumber : http://agungjakanugraha.blogspot.co.id/2014/12/cara-membagi-tulisan-panjang-menjadi.html

No comments:

Post a Comment