Cara Membuat Page Navigation Pada Blogger

Navigasi halaman adalah fitur ditunggu benar-benar mengagumkan dan panjang. Anda mungkin telah melihat nomor navigasi halaman pada blog wordpress banyak (wp-pagenavi oleh Lester Chan). Rias Muhammad dari Techie Blogger telah mengembangkan sistem navigasi untuk halaman blogger.It benar-benar trik yang mengagumkan yang dibuat pada saat tak seorang pun bisa memikirkan pelaksanaan pada blogger.It memiliki beberapa minor bug dan sekarang Abu Farhan telah menyempurnakannya dan dia sekarang telah memberi kita halaman yang sempurna navigasi solution.Here adalah screenshot sedikit apa ini adalah semua tentang.
 

Bila Anda menggunakan hack ini, Anda akan melihat jenis navigasi di halaman rumah blog Anda dan halaman Label (kebutuhan kustomisasi sedikit).

Implementation of Blogger Page Navigation

Those who are bad at HTML modifications can use my one click installer :)

 
After installing this widget proceed to the label fix.

The Complex Method. :P

If you installed the widget you shouldn’t be here.. Scroll down to the label fix.
1.Login to Blogger Dashboard and navigate to Layout > Edit Html
2.Don’t click the checkbox which says ‘Expand Widget Templates’
3.Now find

]]></b:skin>

and replace it with

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

This is the CSS part which defines the look and feel of the page navigation.You can modify it according to your need
4.Next is the JavaScript part. Find

</body>

and replace it with

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

As you can see,there are some customizable parameters in this code

var pageCount=5;

This code determines the number of posts that would be displayed per page.

var displayPageNum=5;

This code determines the number of additional page navigation numbers that will be displayed on the page.

var upPageWord ='Previous';
var downPageWord ='Next';

These two lines determine the text that would be shown for the previous page and next page respectively.

Label Fix

Sekarang kita memiliki standar problem.By, label halaman blogger akan menampilkan 20 posts.We harus memotong ini ke nilai yang kami berikan untuk pageCount variabel (atau posting per halaman). Untuk ini kita harus mengedit kami Template

How to Edit the template to cut short the posts per page?

Go to the Edit HTML page and expand the Widget Templates
Now find each occurrence of

'data:label.url'

(including the quotes) and replace each of it with

'data:label.url + "?&max-results=5"'

Here 5 is the number of posts to be displayed per page.
Now if you are using the label cloud widget by phydeaux3,then find

a.href = '/search/label/'+encodeURIComponent(t);

and replace it with

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

Here also 5 is the number of posts to be displayed per page.

Now you should have the Blogger Page Navigation working perfectly on your blog. :)




MAAF KLO BAHASANYA KURANG JELAS...KARENA SAYA PAKAI GOOGLE TRANLITE 


Sumber :

Tweet

Jangan sampai ketinggalan postingan-postingan terbaik dari Belajar Computer Dunia Maya. Berlangganan melalui email sekarang juga:

Atau sobat juga bisa follow Belajar Computer Dunia Maya dengan mengklik tombol di bawah ini:

Artikel keren lainnya:

Ditulis oleh MuN4 pada tanggal Sunday, 4 December 2011