Kemampuan untuk 'nomor pd halaman buku' blog Blogger telah menjadi fitur yang diminta panjang. Pagination memungkinkan kita untuk nomor halaman blog seperti buku, menawarkan pembaca kemampuan untuk menavigasi lebih dalam arsip dengan mudah bila dibandingkan dengan 'baru' dan 'lebih tua' link posting.

Setelah banyak usaha yang gagal, aku sudah hampir siap untuk mengakui kekalahan dengan fungsi sampai saya menemukan script ini sangat baik oleh Mohamed Aksesoris Blogger. Script ini menggantikan pager default blog (link ke yang lebih baru, yang lebih tua dan halaman rumah) dengan navigasi halaman bernomor. Selain itu, menawarkan kemampuan untuk menyesuaikan jumlah link halaman dan jumlah posting yang ditampilkan pada setiap halaman.

Kedua metode instalasi akan mencapai efek yang sama. Saya pribadi menemukan menambahkan kode secara langsung ke template membuatnya lebih mudah untuk menyesuaikan gaya pagination link, tetapi jika Anda merasa tidak nyaman mengedit template Anda, widget instalasi mungkin lebih mudah bagi Anda.

Berikut adalah cara instalasi selesai akan muncul dalam blog Anda:

Setelah terinstal, ini "nomor halaman" akan muncul di rumah Anda, arsip dan halaman label, memungkinkan pembaca Anda dengan mudah mengakses halaman dalam arsip Anda. Namun, nomor halaman tidak akan muncul pada halaman posting individu. Aku sudah melihat banyak blog yang menggunakan pagination seperti ini, dan di antara mereka tidak ditampilkan di bawah ini link halaman tiap posting.

Untuk mempelajari lebih lanjut tentang menggunakan script pagination bernomor untuk Blogger, mampir ke Aksesoris Blogger untuk membaca tutorial yang berguna Mohamed telah diposting.

Saya Sedikit Versi Modifikasi

Seperti Anda mungkin telah menyadari, saya menggunakan versi sedikit modifikasi dari script ini di sini di Blogger Buster. Ketika mengubah gaya Mohamed versi asli, saya melihat beberapa unsur yang saya lebih suka untuk mengubah preferensi sendiri, dan juga memodifikasi CSS untuk bagaimana link bernomor ditampilkan.

Jika Anda lebih memilih untuk menggunakan versi ini sedikit berbeda daripada, di sini adalah apa yang harus Anda lakukan.

Tambahkan kode CSS ke bagian gaya Anda

Pertama, salin semua kode di bawah ini dan paste tepat sebelum penutup ]]></b:skin>
di template:

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#ccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #ccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}

Ini harus mengubah warna teks dan link dalam pagination agar sesuai gaya yang sudah ada dalam template blog Anda. Jadi, jika teks default Anda adalah putih dengan latar belakang gelap, "Pages (#)" bagian script akan muncul dengan cara yang sama. Warna latar belakang dan efek hover dari nomor bisa diubah sesuai dengan preferensi Anda dengan mengedit hex nilai-nilai agar cocok dengan gaya dari template Anda sendiri.

Tambahkan kode JavaScript di bawah posting Anda

Bagian kedua dari instalasi ini adalah untuk menambahkan kode JavaScript di bawah posting Anda yang akan mencari dan mengganti "yang ada lebih baru / Posts lama" link. Untuk menambahkan script ini, pergi ke Layout> Edit HTML pada dashboard Blogger Anda, dan jangan centang widget "memperluas template" kotak (itu lebih mudah untuk menambahkan kode sementara widget yang dikontrak). Kemudian cari bagian kode (atau serupa) dalam template Anda:

<b:section class='main' id='main' showaddelement='yes'> <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/> </b:section>

Segera setelah menutup </b:section> tag, tambahkan bagian kode berikut:

<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==".com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

var pageCount = 5;
var displayPageNum = 5;
var upPageWord = 'Previous';
var downPageWord = 'Next';



var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;

}

if(postNum==1) postNum++;
html += '</div>';

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999"; type="text/javascript"></script>

Setelah Anda menambahkan kode ini, upaya untuk melihat template Anda untuk memastikan tidak ada kesalahan kode. Anda tidak akan dapat melihat script yang beraksi pada pratinjau, namun langkah ini memastikan tidak ada efek samping untuk tata letak Anda.

Pada kode diatas, Anda akan melihat bahwa saya telah menyoroti tiga bagian kode dalam merah tebal. Anda mungkin perlu untuk menyesuaikan bagian-bagian ini agar sesuai preferensi Anda:

Pada baris 5, Anda mungkin perlu mengubah "com". Untuk mencerminkan perpanjangan domain Anda jika Anda menggunakan domain kustom.

var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==&quot;.com/&quot;;

Instalasi default ini harus bekerja dengan baik bagi siapa pun di-host di Blog * Spot atau sebuah domain dot.com, tetapi Anda akan perlu mengubah bagian ini jika domain kustom Anda berakhir di co.uk atau.. Info misalnya.

Pada baris 19 dan 20, Anda dapat mengubah nilai-nilai ini untuk mengubah berapa banyak posting yang ditampilkan pada setiap halaman, dan berapa banyak link akan terlihat pada saat yang sama.

The var pageCount = 5; defiines bagian jumlah posting yang ditampilkan pada setiap halaman, sementara var
displayPageNum = 5; mendefinisikan jumlah link yang ditampilkan (misalnya: 1 - 2 - 3 - 4 - bagian bawah posting) 5.

Setelah Anda menambahkan kode JavaScript dan membuat perubahan apapun nescessary untuk kebutuhan anda, menyimpan template dan membuka blog Anda pada browser Anda. Sekarang Anda akan melihat link pagination muncul di bawah bagian posting utama Anda, dan juga pada Label dan halaman Arsip.

Anda?

Saya berharap posting ini telah membantu Anda belajar tentang cara nomor navigasi halaman dapat dicapai dalam blog powered Blogger menggunakan metode Mohamed asli atau naskah saya sedikit diubah.

Tolong beritahu saya apa yang Anda pikirkan dari metode ini, atau jika Anda mengalami masalah, dengan meninggalkan komentar Anda di bawah ini.