Cara Membuat Pagination (Navigasi Nomor Halaman) di Homepage Blog - Jika Anda pemilik blog ber-platform Blogger, coba perhatikan halaman homepage Anda.
Pada halaman utama (homepage) blog platform Blogger akan ditampilkan sejumlah postingan terbaru yang di-publish oleh pemilik blog. Untuk melihat posting lebih lama, sanggup dilakukan dengan mengklik Older Post. Untuk melihat posting lebih gres dengan mengklik Newer Post. Dan untuk kembali ke homepage sanggup mengklik Home atau Beranda.
Nah, pada kesempatan kali ini blog akan menyebarkan tutorial bagaimana mengubah navigasi posting pada homepage tersebut dengan navigasi nomor halaman (page number). Tampilannya kurang lebih sama menyerupai yang saya gunakan di blog ini.
Simpel dan elegan, bukan? Baca juga Cara Memasang Emoticon di Kotak Komentar Blog.
1. Pada dashboard Blogger, pilih Template, masuk ke Edit HTML.
2. Cari aba-aba ]]></b:skin> dengan fitur pencarian (Ctrl+F) semoga lebih mudah.
3. Tambahkan CSS berikut di atas aba-aba ]]></b:skin>. CSS ini mengatur tampilan navigasi, jadi kalau Anda ingin mengatur tampilan sanggup Anda lakukan di sini.
4. Berikutnya cari aba-aba </body> dengan fitur search kembali.
5. Paste-kan javascript di bawah ini sebelum aba-aba </body>
Perhatikan aba-aba berwarna merah.
6. Save Template.
7. Masuk ke Settings, pilih Posts, comments and sharing. Samakan maksimal posting yang akan ditampilkan menyerupai yang diatur pada javascript. Kemudian Save Settings.
Selesai. Coba cek homepage blog Anda, kalau berhasil seharusnya akan muncul navigasi page number.
Sekian tutorial Membuat Pagination (Navigasi Page Number) di Blog. Jika menemui kesulitan silahkan sampaikan di kotak komentar di bawah. Sumber https://duarupa.blogspot.com/
Pada halaman utama (homepage) blog platform Blogger akan ditampilkan sejumlah postingan terbaru yang di-publish oleh pemilik blog. Untuk melihat posting lebih lama, sanggup dilakukan dengan mengklik Older Post. Untuk melihat posting lebih gres dengan mengklik Newer Post. Dan untuk kembali ke homepage sanggup mengklik Home atau Beranda.
Nah, pada kesempatan kali ini blog akan menyebarkan tutorial bagaimana mengubah navigasi posting pada homepage tersebut dengan navigasi nomor halaman (page number). Tampilannya kurang lebih sama menyerupai yang saya gunakan di blog ini.
Simpel dan elegan, bukan? Baca juga Cara Memasang Emoticon di Kotak Komentar Blog.
Cara Membuat Pagination (Navigasi Page Number) di Blog
1. Pada dashboard Blogger, pilih Template, masuk ke Edit HTML.
2. Cari aba-aba ]]></b:skin> dengan fitur pencarian (Ctrl+F) semoga lebih mudah.
3. Tambahkan CSS berikut di atas aba-aba ]]></b:skin>. CSS ini mengatur tampilan navigasi, jadi kalau Anda ingin mengatur tampilan sanggup Anda lakukan di sini.
.showpageNum a, .showpage a {
text-decoration: none;
margin: 0 0 0 1px;
padding: 7px 11px;
background: #333;
color: #fff;
}
.showpageOf {
display:none;
}
.showpageNum a:hover, .showpage a:hover {
background:rgba(112,166,0,1);
color: #fff;
text-decoration: none;
}
.showpagePoint {
color:#fff;
padding: 7px 11px;
background:rgba(112,166,0,1);
text-decoration: none;
}
text-decoration: none;
margin: 0 0 0 1px;
padding: 7px 11px;
background: #333;
color: #fff;
}
.showpageOf {
display:none;
}
.showpageNum a:hover, .showpage a:hover {
background:rgba(112,166,0,1);
color: #fff;
text-decoration: none;
}
.showpagePoint {
color:#fff;
padding: 7px 11px;
background:rgba(112,166,0,1);
text-decoration: none;
}
4. Berikutnya cari aba-aba </body> dengan fitur search kembali.
5. Paste-kan javascript di bawah ini sebelum aba-aba </body>
<!--Navigasi Nomor Starts-->
<script type='text/javascript'>
var postperpage=4;
var numshowpage=2;
var upPageWord = 'Prev';
var downPageWord = 'Next';
var urlactivepage=location.href;
var home_page="/";
</script>
<script style="text/javascript" src="https://cdn.rawgit.com/mowdot/mysitemap/master/pagination_duarupa_blogspot_com.js"></script>
<!--Page Navigation Ends -->
<script type='text/javascript'>
var postperpage=4;
var numshowpage=2;
var upPageWord = 'Prev';
var downPageWord = 'Next';
var urlactivepage=location.href;
var home_page="/";
</script>
<script style="text/javascript" src="https://cdn.rawgit.com/mowdot/mysitemap/master/pagination_duarupa_blogspot_com.js"></script>
<!--Page Navigation Ends -->
Perhatikan aba-aba berwarna merah.
- var postperpage=4; artinya jumlah posting maksimal dalam satu halaman (homepage) sebanyak 4 posting
- var numshowpage=2; artinya kotak nomor yang ditampilkan sebanyak 2, halaman aktif tidak termasuk
- var upPageWord = 'Prev'; mengatakan kata yang dipakai untuk kembali ke halaman sebelumnya
- var downPageWord = 'Next'; mengatakan kata yang dipakai untuk ke halaman berikutnya
6. Save Template.
7. Masuk ke Settings, pilih Posts, comments and sharing. Samakan maksimal posting yang akan ditampilkan menyerupai yang diatur pada javascript. Kemudian Save Settings.
Selesai. Coba cek homepage blog Anda, kalau berhasil seharusnya akan muncul navigasi page number.
Sekian tutorial Membuat Pagination (Navigasi Page Number) di Blog. Jika menemui kesulitan silahkan sampaikan di kotak komentar di bawah. Sumber https://duarupa.blogspot.com/