Cara Membuat Navigasi Nomor Halaman di Blog

Untuk memudahkan pengunjung menjelajah isi blog kita, memang dibutuhkan navigasi. Salah satunya adalah navigasi berbentuk nomor halaman. Kalau tidak tau, apa itu? Lihat saja di homepagehttp://baradatublog.blogspot.com/ terus lihat ke bawah. Ada tulisan next, prev, dan pages. Itulah yang namanya Navigasi Nomor Halaman.
Kalau dalam bahasa inggrisnya "numbered page navigation". Maka dari itu, mari kita mulai tutorial cara membuat navigasi nomor halaman di blog blogger atau blogspot. Istilah amburadulnya yaitu, cara membuat page navigation di blog. Caranya cukup mudah, tapi agak sulit, makanya silakan ikuti petunjuk satu-persatu dan jika ada kebingungan, jangan ragu untuk bertanya melalui komentar.

1. Login ke Blogger Anda
2. Masuk ke Menu Template
3. Pilih Edit HTML.
4. Lalu cari kode ]]></b:skin> (untuk mempermudah pencarian gunakan CTRL+F)
5. Silahkan Anda copy kode CSS Page Navigation di bawah ini dulu, kemudian paste tepat di atas kode ]]></b:skin>
   

   .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;
   }

6. Jika sudah, cari lagi kode </body>. Lalu masukkan script berikut tepat di atas </body>.
   

   <b:if cond='data:blog.pageType != &quot;error_page&quot;'>
   <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=3;
   var upPageWord =&#39;Prev&#39;;
   var downPageWord =&#39;Next&#39;;
   </script>
   <script src='http://pitik.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>
   </b:if></b:if>
   </b:if>

   Lihat var pageCount=5; angka 5 menunjukkan jumlah posting yang ditampilkan dalam laman utama. Sesuai yang sama dengan Menu - Setelan - Pos & Komentar
   Kemudian jika var displayPageNum=3; menunjukkan banyak nomor halaman yang ditampilkan
7. Simpan, dan lihat hasilnya! :D

Mudah sekali kan? Ya memang begitulah cara membuat navigasi nomor halaman di blog blogger atau blogspot. Semoga bermanfaat, dan kalau ada bingung2, jangan ragu untuk tanya-tanya melalui kolom komentar di bawah :p

Author : solehbrdt89

Share this

Related Posts