Membuat Navigasi Penomoran Halaman Blog Cara 2

gambar halaman navigasi

Kita telah bahas membuat Navigasi Penomoran Halaman Blog cara 1 ternyata lebih ribet, maka saya coba merepost cara dua yang lebih simpel. Yuk kita mulai.

Pada blog dengan format wordpress navigasi halaman dengan nomor sudah dimungkinkan. Lantas bagaimana dengan format blog dari blogger.

Kalo kamu punya blog dari blogger dan malas mengganti templates design alias menggunakan templates design bawaan yang disediakan pihak blogger, maka ikuti tip's membuat penomoran halaman navigasi sebagai berikut :

Biar gampang pertama gunakan dan install wigdet di bawah ini



Setelah install widget silahkan lanjutkan dengan langkah berikut :

• Login ke Blogger Dashboard dan arahkan ke Layout > Edit Html
• Jangan centang checkbox ‘Expand Widget Templates’
• Untuk mencari kode silahkan tekan F3 atau Ctrl F
• Sekarang temukan kode  ]]></b:skin>

Ganti dengan Kode di bawah ini :

.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;
}
]]></b:skin>

 Berikutnya cari kode :

</body>

Ganti juga dengan Kode di bawah ini :

<!--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://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>
</b:if>
<!--Page Navigation Ends -->
</body>

• Simpan atau save template

Penjelasan kode di atas :

var pageCount=5;
Kode ini akan membuat banyaknya nomor post yang akan terlihat per halaman.

var displayPageNum=5;
Kode ini akan membuat banyaknya halaman post yang akan terlihat per halaman.

var upPageWord ='Previous';

var downPageWord ='Next';
Dua baris ini akan membuat teks yang terlihat sebelum dan sesudah halaman.

Label Fix

Pada Templates tertentu ada sedikit tambahan atau replace kode yaitu :

'data:label.url'

Ganti dengan kode

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

termasuk dengan tanda kutip dan sesuaikan angka 5 dengan displayPageNum

Selesai dan lihat hasilnya.