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" alasannya yaitu 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 ibarat 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 arahan atribut HTML, CSS, dan JavaScript (Js) komplemen biar fitur ini dapat berfungsi.

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

Simpan arahan di bawah ini, di template blogger yang kau gunakan:

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

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

Simpan arahan CSS yang mengatur tata letak tampilan tombol (Button) untuk Post Pagination di bawah ini, di atas arahan ]]></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 arahan JavaScript (Js) di bawah ini, di atas arahan </head>

<script type="text/j4vascript"> 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 arahan CSS dan JavaScript (Js) ini dengan menekan tombol Save Template.

2. Langkah Terakhir: Atribut HTML yang Diperlukan

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

Selesaikan terlebih dahulu postingan kau hingga tuntas (termasuk gambar dan video apabila ada ditambahkan)

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

Kode HTML yang dibutuhkan yaitu arahan 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 kau ingin membagikannya lebih dari 3 halaman, silakan modifikasi dan tambahkan beberapa arahan di atas.

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

Source: How to Break your Post into Multiple Pages in Blogger - candysweet-aina.blogspot.com/search?q=how-to-break-your-post-into-multiple
Sumber http://addbloggerthemes.blogspot.com

Share this post