Navigasi halaman pada Blogger

Navigasi halaman pada blogger adalah suatu hal yang sangat di tunggu - tunggu. Hal ini karena bisanya navigasi halaman hanya ada pada wordpress. Navigasi halaman membuat tampilan blog menjadi lebih menarik. Sebelumnya tidak ada yang berfikir kalau hal ini akan bisa di terapkan di blogger.

Untuk meletakkannya di blog anda berikut langkah - langkahnya :

1. Masuk ke Dashboard > Lay out > Edit HTML
2. Jangan tick kotak "Expand Widget Tempalate"
3. Lalu temukan

]]></b:skin>

4. Dan gantikan dengan

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

5. Sekarang bagian Java Script nya. Temukan

</body>

6. Gantikan dengan

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&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>
<!--Page Navigation Ends-�>
</body>

Ada beberapa hal yang bisa anda rubah menurut kebutuhan anda.

var pageCount=5; 

Kode ini menerangkan jumlah postingan per halaman, anda bisa merubahnya.

var displayPageNum=5; 

Kode ini menerangkan tambahan jumlah navigasi halaman yang akan di tampilkan pada halaman blog.

Nah secara default blogger akan menampilkan 20 posting per halaman, kita harus merubahnya agar sesuai. Dan untuk melakukannya kita harus edit template blog kita. Bagaimana caranya?
Silahkan masuk ke 'Edit HTML' dan tick kotak "Expand Widget Template"

Lalu temukan setiap kode berikut :

'data:label.url'

Dan gantikan setiap kode tersebut dengan :

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

Angka "5" di atas menunjukkan jumlah postingan per halaman.

Jika anda menggunakan widget label cloud dari phydeaux3 lalu temukan :


a.href = &#39;/search/label/&#39;+encodeURIComponent(t);

Dan gantikan dengan :

a.href = &#39;/search/label/&#39;+encodeURIComponent(t)+&#39;?&amp;max-results=5&#39;; 

Jangan lupa save setelah itu. Dan sekarang anda akan mendapatkan navigasi halaman yang cantik seperti gambar ini :

 

Tutorial ini saya dapatkan dari Bloggerplugins dan Kode berdasarkan kode dari Abu Farhan dan Muhammad Rias.

Silahkan mencoba....

 

Related Posts