Wednesday, November 2, 2016

Cara Membagi Postingan Menjadi 2 Halaman di Blogspot

1. Langkah awal adalah membuka blogger.com dan masuk ke akun anda.
2. Buat postingan baru, namun kali ini kita membuatnya dengan HTML bukan Compose!!!.
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>




Selesai...


Selamat Mencoba

No comments:

Post a Comment

Welcome In Creating Website

Contoh Sliding Login Dengan JQuery

Disamping ini adalah contoh Sliding Login menggunakan JQuery. Login Form Disamping hanya Contoh dan tidak dapat digunakan layaknya Login Form FB, Karena Blog ini terbuka untuk umum tanpa perlu mendaftar menjadi Member

Tutorial Blog

Untuk membuatnya Silahkan : Pencet Sini

Member Login

Lost your password?

Not a member yet? Sign Up!