Tuesday, December 11, 2018
Blogger

Cara Membuat Page Navigation Untuk Blogspot

Di blogger, kita harus menambahkan option page navigation (pagination), kenapa ?, karena page navigation membuat blog kamu lebih menarik, selain page navigation memiliki beberapa design yang menarik dia juga berfungsi untuk memenej postingan kamu supaya lebih tertata rapi, sekarang coba anda masuk ke blog dan kemudian pilih Setting menu => Post and Comment => Show at Most ? posts, disini adalah bagian menu yang bisa kita gunakan untuk menentukan berapa postingan yang boleh ditampilkan pada halaman utama kita, contoh di show at most kita menentukan hanya 6 postingan, maka hanya muncul 6 postingan di halaman utama.

Tapi yang jadi permasalahan adalah bagaimana caranya ?, kalau kita tentukan limitnya hanya 6 postingan saja sudah pasti yang lain tidak akan muncul pada halaman utama, baik itu postingan lama atau baru, nah, saya akan memberikan solusi buat kamu yang membutuhkannya yaitu dengan membuat page navigation, ditutorial kali ini cara membuat page navigation menggunakan javascript di blogger/blogspot blog. kamu bisa memilih salah satu dari ketujuh design style (CSS) yang berbeda dibawah ini.

Membuat page navigation untuk blogspot

Hanya ada dua perintah code yang perlu kamu tambahkan

1. Tambahkan CSS, dan

2. Tambahkan Script

Sekarang ayo perhatikan bagaimana membuat page navigaton

A. Tambahkan code css

Langkah 1 : Login ke Blogger Dashboard => Pilih Template => Kemudian klik tombol Edit HTML

Langkah 2 : Klik dimana saja didalam area code kemudian tekan Ctrl + F maka akan muncul textbox pencarian Blogger

Masukkan kata kunci code dibawah ini didalam textbox tersebut dan tekan enter

]]></b:skin>

Langkah 3 : Sekarang, pilih salah satu style css dibawah ini, kemudian diatas code ]]></b:skin> tambahkan code css

Style 1

Style 2

Style 3

Style 4

Style 5

Style 6

Style 7

Note : Jika kamu ingin tombol First dan Last tidak muncul tinggal tambahkan code dibawah ini pada code style css yang sudah kamu pilih diatas

.firstpage, .lastpage {display: none;}

B. Tambahkan Script

Langkah 4 : Sekarang temukan (CTRL + F) tag ini :

</body>

Langkah 5 : Tambahkan script dibawah ini diatas code tersebut

Penyesuaian

Setelah diinstal, mungkin kamu ingin mengubah setingan defaultnya :

perPage: 7,

numPages: 6,

var firstText =’First‘;

var lastText =’Last‘;

var prevText =’« Previous‘;

var nextText =’Next »‘;

}

1)perPage : Berapa postingan yang kamu ingin tampilkan perhalamannya, nilai perPage itu sama dengan nilai pada halaman utama, maka dari itu sebelum kamu implementasikan silahkan dipastikan dulu Setting menu => Post and Comment => Show at Most-Nya itu sama nilainya dengan perPage setelah itu klik simpan.

2)numPages berapa halaman muncul pada page navigationnya

3)Ganti First, Last, « Previous, Next », text sesuka hatimu.

Labels :

Defaultnya, Blogger akan memunculkan posts perlabelnya 20, namun kita akan sesuaikan nilainya dengan variabel perPage.

Temukan masing-masing code dibawah ini :

expr:href=’data:label.url’

gantikan code expr:href=’data:label.url’ dengan code dibawah ini :

expr:href=’data:label.url + “?&max-results=7“‘

Maksud dari angka 7 ialah jumlah posts yang akan muncul perhalamannnya.

Langkah 8 : klik save template dan selamat mencoba 🙂

Nurul Arifin
the authorNurul Arifin
Writer
Who always Love learning about something new that important for me and other.