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.
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.
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/
.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/
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/
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/
Related Posts
- Cara Menciptakan Progress Scrollbar Dengan Warna Gradasi Di BlogAda beberapa situs yang menambahkan pengaruh progress (kemajuan) di pecahan atas website atau blog saat halaman tersebut di scroll ke bawah. Akan mu ...
- Cara Menciptakan Web Push Notifications Di BloggerWeb push notifications merupakan pesan atau notifikasi pop-up yang muncul pada layar desktop maupun smartphone Anda dikala membuka halaman website at ...
- Cara Mempercepat Loading Blog Memakai Lazy Load - Untuk teman-teman yang memakai blog anda sebagai salah satu sumber pendapatan, mereka tentu dekat dengan Google AdSense. Ya, Google AdSense ialah ...
- Cara Menciptakan Pengaruh Animasi Hujan Salju Pure Css Dan Javascript Di BlogMenambahkan imbas hujan salju pada blog sanggup mempercantik tampilan blog Anda, apalagi bulan desember ini selalu identik dengan animo salju di nega ...
- Cara Menciptakan Blog Yang Ringan, Valid Html5, Dan Seo Friendly Blog yang baik itu blog yang menyerupai apa sih? Sobat Blogger, salah satu cara yang cukup efektif untuk mendatangkan pengunjung ke blog kita yaitu ...
- Cara Memasang Gambar Background Random Di Blogger Membuat tampilan blog semakin menarik itu penting, semoga pengunjung situs setia Anda tidak bosan ketika sedang membaca artikel Anda. Banyak seka ...
