Cara Membagi Artikel Menjadi Beberapa Halaman dalam 2 Langkah Mudah

Tutorial: Tips & Trik Cara Membuat dan Membagi Artikel (Posting) Blog Menjadi Beberapa Halaman

Pernah melihat, mengunjungi, atau membuka situs web TribunNews atau BolaNET; dan membaca-baca artikel yang ada di situs web tersebut? Bagaimana rasanya? Ngeselin, kan?

Dikategorikan "Ngeselin" karena artikelnya terbagi dalam beberapa halaman postingan blog, -- padahal artikel tersebut masih dalam SATU JUDUL postingan blog.

Pic: My Blogger Lab 

Pertanyaannya, bagaimana cara membagi artikel menjadi beberapa halaman di dalam postingan blog seperti TribunNews atau BolaNet?

Cara Membagi Artikel Menjadi Beberapa Halaman dalam 2 Langkah Mudah

Untuk WordPress sendiri, ada plugin WP tersendiri yang menyetel pembagian halaman ini; sedangkan untuk Blogger/Blogspot, dibutuhkan kode atribut HTML, CSS, dan JavaScript (Js) tambahan agar fitur ini bisa berfungsi.

1. Langkah Awal: Menyimpan Kode CSS dan JavaScript (Js)

Simpan kode di bawah ini, di template blogger yang kamu gunakan:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

Catatan: Apabila kode Googleapis di atas sudah ada, tidak perlu ditambahkan. Jangan sampai kode di atas duplikat (double) di dalam blogger theme yang digunakan.

Simpan kode CSS yang mengatur tata letak tampilan tombol (Button) untuk Post Pagination di bawah ini, 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;
}

Selanjutnya simpan kode JavaScript (Js) di bawah ini, 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>

Akhiri sesi penyimpan kode CSS dan JavaScript (Js) ini dengan menekan tombol Save Template.

2. Langkah Terakhir: Atribut HTML yang Diperlukan

Setelah memasang beberapa kode CSS dan Js sebagaimana tutorial langkah pertama (No. 1) di atas, saatnya kamu mengimplementasikannya di dalam artikel (postingan) blog.

Selesaikan terlebih dahulu postingan kamu sampai tuntas (termasuk gambar dan video apabila ada ditambahkan)

• Masih di dalam Post/Content
• Beralih gaya tulisan dari mode Compose ke mode HTML
• Simpan kode HTML di bawah ini
• Selanjutnya publikasikan (Publish) artikel tersebut

Kode HTML yang diperlukan adalah kode di bawah ini:

<div class="content_1">

Postingan (Artikel) Bagian Pertama Silakan Copas di Sini

</div>

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

Postingan (Artikel) Bagian Kedua Silakan Copas di Sini

</div>

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

Postingan (Artikel) Bagian Ketiga Silakan Copas 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>

Tutorial di atas apabila diimplementasikan, terbagi dalam 3 halaman. Jika kamu ingin membagikannya lebih dari 3 halaman, silakan modifikasi dan tambahkan beberapa kode di atas.

Itulah tutorial tips dan trik bagaimana cara membuat dan membagi artikel blog menjadi beberapa halaman di postingan Blogger/Blogspot.

Source: How to Break your Post into Multiple Pages in Blogger - https://www.mybloggerlab.com/2015/07/how-to-break-your-post-into-multiple.html

Labels: Tutorial Blogger

Thanks for reading Cara Membagi Artikel Menjadi Beberapa Halaman dalam 2 Langkah Mudah. Please share this article.

Share this post