Home » » Cara Membagi Postingan Jadi Beberapa Halaman Pada Blogger

Cara Membagi Postingan Jadi Beberapa Halaman Pada Blogger

Posted by Admin Posted on 09.55 with 2 comments
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.

1 2
Label:

2 komentar: