Membagi Artikel Blog Dalam Beberapa Halaman
Berikut akan kita bahas langkah – langkah membagi postingan menjadi beberapa halaman pada postingan blogger. Akan ada beberapa tambahan script untuk hal tersebut seperti sebagai berikut :- Pastikan ada kode ini di template blog Anda.
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
- Simpan di atas kode ]]></b:skin>
.post-pagination {margin: 40px auto;text-align: center;width: 100%;float:left;}
.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;}
- Simpan di atas kode </head>
<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>
- Save your template.
- Saat menulis postingan yang akan dipilih menjadi beberapa halaman, klik mode HTML.
- Post > New post > HTML
- Copy dan Paste kode berikut ini:
<div class="content_1">
Posting Bagian Pertama di Sini
</div>
<div class="content_2" style="display: none;">
Posting Bagian Kedua di Sini
</div>
<div class="content_3" style="display: none;">
Posting Bagian Ketiga 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>
Demikian informasi tentang Membagi Artikel Blog Dalam Beberapa Halaman. Maaf jika ada kekurangan, silahkan tambahkan beberapa kekurangan pada artikel di kolom komentar. Saya harap informasi ini bermanfaat.
0 Comments