Cara Membuat Navigasi Halaman Dengan Nomor di Blogger


Kali ini saya akan membahas tentag Navigasi. Navigasi berfungsi untuk menuju ke postingan lama yang sudah di publikasi terlebih dahulu. Dari blogger sendiri sudah menyediakan Navigasi, namun bentuk / tampilanya masih setandar sehingga tidak bisa langsung ke artikel / postingan yang lama.

Hal ini sangat menyita waktu untuk menuju ke postingan yang lama / sudah terposting terlebih dahulu. Agar tampilan navigasi berbentuk angka kita hanya menambahkan sedikit code script yang akan mempercantik tampilan navigasi blog.

Cara membuat page navigation Blogger bernomor

Dengan adanya navigasi bernomor kita bisa langung menuju kepostingan yang sudah lama dengan cepat dan sampai ke akhir postingan sangat cepat dengan navigasi bernomor ini.


Contoh : Navigasi Halaman Dengan Nomor di Blogger

Cara membuat page navigation Blogger bernomor :

Tambahkan script di bawah ini "SEBELUM / DI ATAS" </body>
<b:if cond='data:view.isMultipleItems'>
<script> //<![CDATA[
/* Page Navigation with Number */
var postperpage = 7; // Jumlah halaman yang tampil
var numshowpage = 3; // Jumlah angka / nomor di menu navigasi
var upPageWord = 'Prev'; // Kata untuk navigasi halaman sebelumnya
var downPageWord = 'Next'; // Kata untuk navigasi halaman berikutnya
var urlactivepage = location.href;
var home_page= '/';
//]]></script>
<script src='https://cdn.rawgit.com/igniel/blogger/96670462/pagination.js'/>
</b:if>

Lalu tambahkan kode CSS "SEBELUM / DI ATAS" </style>.
/* Page Navigation with Number */
#blog-pager {clear:both; width:auto; line-height:17px; position:relative; display:block; text-align:left; overflow:visible; margin:0px; padding:0px}
.showpage a, .showpageNum a, .showpagePoint {position:relative; background:#2f303f; display:inline-block; font-size:13px; color:#fff; margin:0 4px 0 0;padding:7px 13px; text-decoration:none; border-radius:3px; transition:all .3s}
.showpageOf {float:right; color:#666; display:inline-block; font-size:13px; margin:0; padding:7px 0;}
.showpageNum a:before{ content:''; position:absolute; top:0; bottom:0; left:0; right:0; box-shadow:inset 0 -2px 2px rgba(0,0,0,0.02); transition:box-shadow 0.5s}
.showpage a:hover, .showpageNum a:hover {background:#008c5f; color:#fff; position:relative}
.showpagePoint, .showpagePoint:hover {background:#008c5f; color:#fff}
span.label-info a.label-block:nth-child(n+2) {display:none}
Setelah kalian meletakan kedua kode script di atas pada posisinya selanjutnya kalian menyimpannya, lalu coba kamu live demo pada blog kalian dan lihat ke navigasinya maka akan berubah dengan navigasi angka yang sangat responsive dan cantik enak di pandang.

Semoga trik / cara yang saya buat ini bisa bermanfaat dalam membuat Navigasi Halaman Dengan Nomor di Blogger, semoga bermanfaat dan sukses selalu kawan.
Post a Comment (0)
Previous Post Next Post