Cara Membagi Postingan Jadi Beberapa Halaman Pada Blogger
Sering kita melihat pada blog – blog terkenal, sebuah artikel yang panjang dibagi menjadi beberapa halaman. Meskipun artikelnya panjang, kita yang membacanya tidak merasa jenuh.
Hal ini dikarenakan disamping tulisan dan topik yang dibahas dan cara penyajian yang baik ada satu komponen penting yang ikut menunjang hal tersebut, yaitu tampilan susunan artikel tersebut yang dibagi jadi beberapa halaman sehingga pembaca pun tidak terasa berat dan bosan membacanya.
Kenapa Sebuah Artikel Harus Dibagi Jadi Beberapa Halaman
Seperti yang telah disebutkan diatas, hal ini bertujuan untuk meningkatkan ketertarikan pembaca, karena jika sebuah postingan terlalu panjang, akan ada kemungkinan timbul rasa bosan pada pembaca. Yang kedua adalah karena hal ini sangat bagus untuk search engines, karena memudahkan search engine menjelajahi postngan tersebut.
Oleh karena itu, jika sebuah artikel yang kita posting pada blog terlalu panjang, akan lebih baik postingan tersebut dibagi menjadi beberapa halaman. Dan bagaiman cara membagi sebuah postingan menjadi beberapa halaman akan coba kita bahas pada postingan ini.
Cara Membagi Postingan Jadi 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 :
1. Memeriksa script jquery pada template
Sebagai langkah pertama, buka dashboard blogger >> Template >> Edit HTML. Setelah tampilan script HTML ditampilkan, carilah script jquery. Tujuannya adalah memastikan apakah template yang sedang kamu gunakan untuk themes blog sudah dilengkapi dengan script jquery. Bila telah dilengkapi dengan script jquery, maka script tersebut akan seperti script dibawah ini :
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
Angka 2.0.0 yang diberi warna merah merupakan versi jquery, bisa saja dari hasil pencarian script jquery pada template kamu, versinya adalah 1.8.0 atau yang lain. Perbedaan tersebut tidak jadi masalah.
Tapi bila template yang sedang kamu gunakan pada blog tidak ditemukan script jquery, silahkan copy script jquery diatas, dan tambahkan tepat diatas script </head>
2. Menambahkan program button dengan jquery
Masih pada tampilan HTML, cari tag dengan tulisan </head>, copy sript program button jquerry dibawah dan tambahkan tepat diatas tag </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>
Penjelasan program :
Pada script diatas kita menggunakan jquery, sehingga terjawab kenapa kita perlu memastikan templates yang digunakan sudah menyediakan fitur jquery.
Dari script diatas, function jquery dibagi atas tiga , yaitu button 1, button 2 dan button 3 (button = tombol ), sesuai dengan warna biru, ungu dan hijau.
Perhatikan kelompok script berwarna biru, ketika button 1 dipilih (click), yang terjadi kemudian adalah :
jQuery('.button_1').click(function() = button 1 di pilih (click)
{
jQuery('.content_1').fadeIn('slow'); = artikel untuk halaman 1 muncul
jQuery('.content_2').fadeOut('fast'); = artikel untuk halaman 2 hilang
jQuery('.content_3').fadeOut('fast'); = artikel untuk halaman 3 hilang
jQuery(this).css('background','#F4655F'); = button 1 aktif, background warna merah
jQuery(this).css('color','#fff'); = button 1 aktif, nomor berwarna putih
jQuery('.button_2').css('background','#fff'); = button 2 tidak aktif, backgorund putih
jQuery('.button_2').css('color','#F4655F'); = button 2 tidak aktif, nomor merah
jQuery('.button_3').css('background','#fff'); = button 3 tidak aktif, warna putih
jQuery('.button_3').css('color','#F4655F'); = button 3 tidak aktif, warna merah
return false;
Pada kelompok button 2 dan button 3 penjelsananya sama dengan button 1, yang membedakannya adalah button mana yang aktif dan artikel mana yang dipanggil.
Pada script untuk kelompok button 2, tombol yang aktif adalah button 2 , button 1 dan button 3 tidak aktif, dan artikel yang muncul adalah artikel untuk halaman 2.
Begitu pula untuk script kelompok button 3, tombol yang aktif adalah button 3 , button 1 dan button 2 tidak aktif, dan artikel yang muncul adalah artikel untuk halaman 3.
Untuk pilihan warna latar (background) ketika tombol aktif adalah merah (#F4655F) dengan warna nomor halaman adalah putih (#FFF). Dan untuk tombol tidak aktif adalah kebalikannya, background berwarna putih (#FFF) dengan warna nomor halaman berwarna merah (#F4655F).
Kamu dapat menyesuaikan warna tersebut dengan warna pada template masing – masing.
Oh ya, karena ada 3 button, berarti artikelnya dibagi jadi 3 halaman. Kalau mau dua tinggal disesuaikan saja dengan programnya, yaitu menghapus semua perintah untuk button 3 . Begitu pula kalau mau menjadikannya 4 atau 5 atau lebih, tinggal menambahkan button.
3. Mengatur style tombol halaman (button 1, button 2 dan button 3)
Pada langkah no. 2 kita telah mengatur urutan kerja dari masing-msing button yang nantinya akan memunculkan artikel sesuai dengan nomor button yang dipilih ( click ) oleh pembaca.
Pada langkah ketiga ini, kita akan mengkreasikan bentuk button (tombal) yang akan dimunculkan pada setiap halaman.
Lansung saja, masih pada tampilan HTML, cari teks dengan tulisan ]]></b:skin>
, kemudian Copy program dibawah ini, dan tambahkan tepat diatas script ]]></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;
}
Program diatas adalah untuk mengatur tebalnya tombol (button), jenis huruf, tebalnya garis , warna dan lain lain agar tombol yang ditampilkan lebih menarik.
Silahkan berkesperimen untuk mendapatkan tampilan button ( tombol )s esuai selera.
Oh ya, setelah selesai menambahkan script pada langkah 1, 2 dan 3 jangan lupa di save.
4. Menampilkan page break pada artikel
Langkah terakhir adalah menerapkannya pada artikel postingan. Pilih salah satu artikel yagn akan dibagi menjadi beberapa halaman, ( dalam contoh diatas menjadi 3 halaman ) atau bisa juga menerapkannya pada artikel postingan baru. Pada tampilan HTML di postingan , tambahkan script berikut :
<div class="content_1">
Artikel untuk halaman pertama
</div>
<div class="content_2" style="display: none;">
Artikel untuk halaman kedua
</div>
<div class="content_3" style="display: none;">
Artikel untuk halaman ketiga
</div>
<div class="post-pagination">
<a class="button_1" href="https://www.blogger.com/blogger.g?blogID=4273453835169366958#">1</a>
<a class="button_2" href="https://www.blogger.com/blogger.g?blogID=4273453835169366958#">2</a>
<a class="button_3" href="https://www.blogger.com/blogger.g?blogID=4273453835169366958#">3</a>
</div>
Pada script diatas, artikel diisikan pada masing - masing bagian dengan maksimum halaman yang dibentuk sebanyak 3, sesuai dengan jumlah button yang kita tambhaan pada program HTMl pada langkah 2 dan 3.
Bila ingin membaginya lebih dari 3 maka pada langkah 2 , 3 dan 4 mesti ditambahkan scriptnya. Gampang kok, tinggal mengikuti contoh script yang sudah ada sebelumnya.
Sedangkan untuk membuat halaman menjadi 2, tidak perlu dimodifikasi script yang sudah kita tambahkan pada langkah 2 dan 3. Yang kita lakukan hanya cukup menghapus class conten no 3 dan button no 3 pada script langkah no. 4 menjadi seperti berikut :
<div class="content_1">
Artikel untuk halaman pertama
</div>
<div class="content_2" style="display: none;">
Artikel untuk halaman kedua
</div>
<div class="post-pagination">
<a class="button_1" href="https://www.blogger.com/blogger.g?blogID=4273453835169366958#">1</a>
<a class="button_2" href="https://www.blogger.com/blogger.g?blogID=4273453835169366958#">2</a>
</div>
Sebagai contoh penerapan script ini, postingan ini sudah dibagi menjadi 2 halaman berdasarkan script diatas.
Tombol ( button ) dan perpindahan halamannya dapat kamu lihat pada postingan ini. Selamat mencoba…
