Merubah Link Navigasi Default Blogger dengan Angka

Cerita posting ini berawal ketika saya hendak merapihkan template Blog Billix Multimedia v.2 ini yang awalnya masih dirasa kurang. Pengunjung tidak akan tahu jumlah posting yang ada di Blog ini dan bingung postingan ini ada pada halaman ke berapa.

Secara umum, navigasi untuk pindah halaman di blogspot biasanya menggunakan Link dengan teks “Older Posts” ( Posting Lama ) dan “Newer Posts” ( Posting Baru ). Berbeda dengan Wordpress yang navigasinya bisa berbentuk angka sehingga bisa memudahkan untuk loncat beberapa halaman ke postingan yang lama maupun baru.

Dalam posting saya kali ini saya akan memberikan Tips dan Trik menjelaskan bagaimana cara mengganti Link “Older Posts” ( Posting Lama ) dan “Newer Posts” ( Posting Baru ) menjadi angka seperti gambar di bawah ini :


  1. Langkah awal tentu saja harus menuju ke desain template anda kemudian ke "Edit HTML"
  2. Setelah itu cari kode ini ]]></b:skin> kalo sudah ketemu taruh script dibawah ini sebelum kode tersebut
  3. .showpageArea a { text-decoration:underline; } .showpageNum a { text-decoration:none; border: 1px solid #cccccc; margin:0 3px; padding:3px; } .showpageNum a:hover { border: 1px solid #cccccc; background-color:#cccccc; } .showpagePoint { color:#333; text-decoration:none; border: 1px solid #cccccc; background: #cccccc; margin:0 3px; padding:3px; } .showpageOf { text-decoration:none; padding:3px; margin: 0 3px 0 0; } .showpage a { text-decoration:none; border: 1px solid #cccccc; padding:3px; } .showpage a:hover { text-decoration:none; } .showpageNum a:link,.showpage a:link { text-decoration:none; color:#333333; }
  4. Setelah itu cari kode ini </body> kemudian taruh script dibawah ini sebelum kode tersebut.
  5. <!--Page Navigation Starts--> <b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <script type='text/javascript'> var pageCount=5; var displayPageNum=5; var upPageWord =&#39;Previous&#39;; var downPageWord =&#39;Next&#39;; </script> <script src='http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/> </b:if> </b:if> <!--Page Navigation Ends -->

Bagi yang tidak menemukan </body> , kode tersebut ada pada bagian paling bawah sekali biasanga. Setelah kode </body> biasanya ada </html> pada Template HTML nya.

Semoga Bermanfaat,

Sumber Rujukan : Tips Trik Blogger

Kata Kunci untuk mencari artikel ini :
Merubah Link Navigasi Default Older Posts dan Newer Posts dengan Angka pada Blogspot
Merubah Link Navigasi Default Older Posts dan Newer Posts dengan Angka pada Blogger
Merubah Link Navigasi Default Older Posts dan Newer Posts dengan Pages Number




Jika Merasa Arikel dan Bacaan di Billix Multimedia v.2 Bermanfaat,
Jangan Lupa Share ke Teman-teman melalui Tombol Share di bawah posting ini
Like on Billix Multimedia v.2 Facebook . Follow atau Berlangganan Via Email.
Terimakasih



Yang Copas, Jangan Lupa Mencantumkan Sumbernya Yah!






Share Yuk!

1 komentar :

Saya coba terapkan gan, trims ya. Ditunggu kunjungannya...