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>
Selesai...
Selamat Mencoba
No comments:
Post a Comment