Cara membuat Halaman Navigasi Bernomor Untuk Blogger

Kemampuan untuk 'nomor pd halaman buku' Blogger blog telah menjadi fitur lama yang diminta. Pagination memungkinkan kita untuk halaman blog jumlah seperti yang buku, menawarkan pembaca kemampuan untuk menavigasi lebih dalam arsip dengan mudah bila dibandingkan dengan 'baru' dan 'tua' posting link. Setelah banyak usaha yang gagal, saya hampir siap untuk mengakui kekalahan dengan fungsi ini sampai saya menemukan script ini sangat baik oleh Mohamed Blogger Accessories. Script ini menggantikan pager blog default (link ke yang lebih baru, lebih tua dan halaman rumah) dengan bernomor navigasi halaman. Selanjutnya, ia menawarkan kemampuan untuk menyesuaikan jumlah link halaman dan jumlah posting yang ditampilkan di setiap halaman.
Blogger pagination naskah Mohamed dapat diinstal dengan menggunakan dua metode yang berbeda:

• Menyesuaikan kode template
• Menambahkan sebagai widget HTML / JavaScript (gadget) di bawah bagian tulisan utama

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

Berikut adalah cara instalasi selesai akan muncul di blog Anda:

Setelah diinstal, ini "nomor halaman" akan muncul di rumah Anda, arsip dan label halaman, yang memungkinkan pembaca untuk dengan mudah mengakses halaman dalam arsip Anda. Namun, nomor halaman tidak akan muncul di halaman posting individu. Saya telah melihat banyak blog yang menggunakan pagination seperti ini, dan di antara mereka tidak ditampilkan link ini halaman bawah setiap posting.

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

Versi saya Sedikit Modifikasi

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

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

Tambahkan kode CSS untuk bagian gaya Anda

Pertama, salin semua kode di bawah ini dan paste tepat sebelum menutup </b:skin> tag pada template Anda:

  .showpageArea a {
 text-decoration: underline;
 }
 .showpageNum a {
 text-decoration: none;
 border: 1px # ccc padat;
 margin: 0 3px;
 padding: 3px;
 }
 .showpageNum a: hover {
 border: 1px # ccc padat;
 background-color: # ccc;
 }
 .showpagePoint {
 color: # 333;
 text-decoration: none;
 border: 1px # ccc padat;
 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 # ccc padat;
 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 di pagination untuk mencocokkan gaya yang sudah ada dalam template blog Anda. Jadi jika teks default adalah putih dengan latar belakang gelap, "Pages (#)" dari script akan muncul dengan cara yang sama. Warna untuk latar belakang dan melayang-layang efek dari nomor dapat diubah sesuai dengan preferensi Anda dengan mengedit nilai hex untuk mencocokkan gaya template Anda sendiri.

Tambahkan kode JavaScript di bawah posting Anda

Bagian kedua dari instalasi adalah dengan menambahkan kode JavaScript di bawah posting Anda yang akan mencari dan mengganti "Lebih Baru Posting Lama /" link yang ada. Untuk menambahkan script ini, pergi ke Layout> Edit HTML di dashboard Blogger Anda, dan jangan centang kotak "expand widget template" (itu jauh lebih mudah untuk menambahkan kode sementara widget dikontrak). Kemudian menemukan 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 penutupan </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 telah menambahkan kode ini, mencoba untuk melihat template Anda untuk memastikan tidak ada kesalahan kode. Anda tidak akan dapat melihat script beraksi pada preview, tapi langkah ini memastikan tidak ada efek samping untuk tata letak Anda.

Dalam kode di atas, Anda akan melihat bahwa saya telah menyoroti tiga bagian kode merah tebal. Anda mungkin perlu untuk menyesuaikan bagian ini agar lebih sesuai dengan 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 saja host di Blog * Spot atau domain dot.com, tetapi Anda akan perlu untuk mengubah bagian ini jika domain kustom Anda berakhir di .co.uk atau .info misalnya.

Dalam garis 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 waktu yang sama.

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

Setelah Anda telah menambahkan kode JavaScript ini dan membuat perubahan nescessary untuk kebutuhan Anda, simpan template Anda dan membuka blog Anda di browser Anda. Sekarang Anda akan melihat link pagination muncul di bawah bagian tulisan utama Anda, dan juga pada Label dan Arsip halaman. Source: bloggerbuster.com