Membuat Navigasi Halaman bernomor di Blogger

Sobat Blogger, pasti Anda sering melakukan yang namanya Googling bukan? mencari sesuatu yang menurut Anda penting di Google. Dan pastinya Anda pernah melihat halaman navigasinya yang terletak di bawah halaman. Itulah yang disebut dengan Numbered Page Navigation. berikut screenshot-nya :

Nah, jika Anda seorang Blogger yang memiliki artikel yang banyak, bisa dibilang memiliki artikel lebih dari 100 artikel yang sudah barang tentunya artikel yang banyak ini sudah lama Anda ketik dan berkumpul dan menjadi menumpuk. Untuk mengoptimalkan hal tersebut Ada baiknya Anda memasang Navigas halaman ini di blog Anda. Berikut adalah langkah-langkahnya :

L1 (Langkah Pertama)
Masuk ke Blogger in Draft, pilih Blog yang akan Anda "modifikasi".
Klik Template > pilih Backup / Restore Template > backup terlebih dahulu template Anda.
Klik Template > Lalu klik Edit Template

Jika sudah, cari tag ini :

]]></b:skin>

* gunakan Ctrl + F agar lebih cepat

Kode yang ada di dalam textarea di bawah ini adalah kode CSS, dimana kode inilah yang akan menghasilkan bentuk dari navigasi halaman bernomor.
Copy lalu Pastekan kode ini TEPAT di atas tag b:skin tadi :

.showpageArea a {<br /> 02.<br /> text-decoration:underline;<br /> 03.<br /> }<br /> 04.<br /> .showpageNum a {<br /> 05.<br /> text-decoration:none;<br /> 06.<br /> border: 1px solid #cccccc;<br /> 07.<br /> margin:0 3px;<br /> 08.<br /> padding:3px;<br /> 09.<br /> }<br /> 10.<br /> .showpageNum a:hover {<br /> 11.<br /> border: 1px solid #cccccc;<br /> 12.<br /> background-color:#cccccc;<br /> 13.<br /> }<br /> 14.<br /> .showpagePoint {<br /> 15.<br /> color:#333;<br /> 16.<br /> text-decoration:none;<br /> 17.<br /> border: 1px solid #cccccc;<br /> 18.<br /> background: #cccccc;<br /> 19.<br /> margin:0 3px;<br /> 20.<br /> padding:3px;<br /> 21.<br /> }<br /> 22.<br /> .showpageOf {<br /> 23.<br /> text-decoration:none;<br /> 24.<br /> padding:3px;<br /> 25.<br /> margin: 0 3px 0 0;<br /> 26.<br /> }<br /> 27.<br /> .showpage a {<br /> 28.<br /> text-decoration:none;<br /> 29.<br /> border: 1px solid #cccccc;<br /> 30.<br /> padding:3px;<br /> 31.<br /> }<br /> 32.<br /> .showpage a:hover {<br /> 33.<br /> text-decoration:none;<br /> 34.<br /> }<br /> 35.<br /> .showpageNum a:link,.showpage a:link {<br /> 36.<br /> text-decoration:none;<br /> 37.<br /> color:#333333;<br /> 38.<br /> }

L2 (Langkah Kedua)

Di langkah kedua, kita masih bergelut di halaman edit html. Cari tag ini :

</body>

Jika sudah ketemu, Copas kode ini tepat di atas tag body tadi :

<b:if cond='data:blog.pageType != &quot;item&quot;'><br /> 02.<br /> <script type='text/javascript'><br /> 03.<br /> var pageCount=5;<br /> 04.<br /> var displayPageNum=5;<br /> 05.<br /> var upPageWord =&#39;Previous&#39;;<br /> 06.<br /> var downPageWord =&#39;Next&#39;;<br /> 07.<br /> </script><br /> 08.<br /> <script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/><br /> 09.<br /> </b:if>

• Previous dan Next dapat Anda ganti sesuai keinginan Anda, contoh : "Sebelumnya - Selanjutnya", "Balik - Terus" dan lain-lain.
• Displaypagenum, adalah jumlah halaman yang ditampilkan, disini tercatat 5 yang berarti ada 6 halaman yang akan ditampilkan. kenapa 6? karena angkanya dimulai dari 0 dan bukan 1.
• pagecount, menunjukkan artikel yang ditampilkan dalam satu halaman.
• uppageword - downpageword, adalah navigasi previous dan next

Oke, jika sudah simpan template Anda

L3 (Langkah Ketiga)

Klik Expand Widget Templates

Kemudian cari kode ini :

'data:label.url'

Replace (timpa/ganti) kode tadi dengan kode ini :

'data:label.url + &amp;quot;?&amp;amp;max-results=5&amp;quot;'

Baris kode diatas dimaksudkan untuk mengganti tampilan standar blogger yang menampilkan 20 posting setiap halamannya, jadi max-results=5 tujuannya menyamakan jumlah kode sebelumnya yaitu PageCount = 5.

Simpan template, dan semoga Anda berhasil.
Berhubung Saya sendiri belum pernah mencoba cara ini, Anda dapat melihat contohnya pada gambar di bawah ini :

Artikel Terkait