Cara Membuat Halaman Paginasi Di Blogger - 2020

Cara Membuat Halaman Paginasi Di Blogger - 2020 - Paginasi luar biasa ini akan membantu dalam membuat blog yang terlihat profesional dalam hitungan menit. Memiliki halaman paginasi di blogger adalah wajib dalam hal fungsionalitas dan pkenyamanan bagi pengguna. Halaman Paginasi Ini  mengatur posting blog dengan cara yang paling profesional. Berdasarkan skrip sederhana, widget ini cepat dan andal. Memasang widget ini sangat mudah dan dapat dilakukan dengan cara yang sederhana.

Mari melangkah lebih jauh dan lihat Cara Menambahkan Halaman Paginasi Di Blogger - 2020.

Jika kamu tetap menggunakan format default blogger, yaitu tombol halaman yang lebih baru dan lebih lama maka itu membuat fungsionalitas blog terbatas, pada saat yang sama membuat pengalaman pengguna blog menurun, karena pengguna tidak dapat menavigasi blog dengan mudah, dan mereka harus mencari melalui setiap halaman, di mana widget pagination ini memudahkan pembaca agar dapat memeriksa halaman mana saja yang mereka inginkan, melalui berbagai posting akan menjadi mudah, tidak hanya fungsional tetapi juga akan memberikan sentuhan profesional pada blog Kamu.

Langkah-1 (Menambahkan CSS)

Sebelum Mengedit, disarankan untuk membuat cadangan template kamu, sehingga jika ada yang tidak beres, desain blog tetap aman.



Hal pertama yang perlu kamu lakukan adalah login ke akun Blogger dan pergi ke >> Template >> Edit HTML dan cari akhiran ]]> </ b: skin> tag dan tepat di atasnya tempel kode berikut

.

/* ######## Pagination Widget by SoraBloggingTips ######################### */
#blog-pager{
    clear:both;
    text-align:center;
    margin:0
}
 #blog-pager-newer-link a,#blog-pager-older-link a{
    display:block;
    float:left;
    margin-right:6px;
    padding:0 13px;
    border:1px solid #010101;
    text-transform:uppercase;
    line-height:32px;
    font-weight:700;
    color:#010101
}
 #blog-pager-newer-link a:hover,#blog-pager-older-link a:hover{
    background-color:#010101;
    color:#fff!important
}
 .showpageNum a,.showpage a,.showpagePoint{
    display:block;
    float:left;
    margin-right:6px;
    padding:0 12px;
    border:1px solid #010101;
    text-transform:uppercase;
    line-height:32px;
    font-weight:700;
    color:#010101
}
 .showpageNum a:hover,.showpage a:hover{
    background-color:#010101;
    color:#fff!important
}
 .showpageNum a i,.showpage a i{
    transition:all .0s ease;
    -webkit-transition:all .0s ease;
    -moz-transition:all .0s ease;
    -o-transition:all .0s ease
}
 .showpagePoint{
    background-color:#010101;
    color:#FFF
}
 .showpageOf{
    display:none!important
}

Langkah-2 (Menambahkan SCRIPT) - Paling Penting !!

Sekarang ini adalah bagian paling penting dari tutorial dan lakukan dengan sangat hati-hati. Di template, cari tag </body> dan tepat di atasnya tempel kode HTML berikut.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
    var postperpage=7;
var numshowpage=3;
var upPageWord ='<< Prev';
var downPageWord ='Next >>';
var urlactivepage=location.href;
var home_page="/";
</script>
<script type='text/javascript'>
//<![CDATA[
var nopage;var jenis;var nomerhal;var lblname1;halamanblogger();function loophalaman(banyakdata){var html='';nomerkiri=parseInt(numshowpage/2);if(nomerkiri==numshowpage-nomerkiri){numshowpage=nomerkiri*2+1}mulai=nomerhal-nomerkiri;if(mulai<1)mulai=1;maksimal=parseInt(banyakdata/postperpage)+1;if(maksimal-1==banyakdata/postperpage)maksimal=maksimal-1;akhir=mulai+numshowpage-1;if(akhir>maksimal)akhir=maksimal;html+="<span class='showpageOf'>Page "+nomerhal+' of '+maksimal+"</span>";var prevnomer=parseInt(nomerhal)-1;if(nomerhal>1){if(nomerhal==2){if(jenis=="page"){html+='<span class="showpage"><a href="'+home_page+'">'+upPageWord+'</a></span>'}else{html+='<span class="showpageNum"><a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">'+upPageWord+'</a></span>'}}else{if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+prevnomer+');return false">'+upPageWord+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+prevnomer+');return false">'+upPageWord+'</a></span>'}}}if(mulai>1){if(jenis=="page"){html+='<span class="showpageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="showpageNum"><a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">1</a></span>'}}if(mulai>2){html+='  '}for(var jj=mulai;jj<=akhir;jj++){if(nomerhal==jj){html+='<span class="showpagePoint">'+jj+'</span>'}else if(jj==1){if(jenis=="page"){html+='<span class="showpageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="showpageNum"><a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">1</a></span>'}}else{if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+jj+');return false">'+jj+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+jj+');return false">'+jj+'</a></span>'}}}if(akhir<maksimal-1){html+=''}if(akhir<maksimal){if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+maksimal+');return false">'+maksimal+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+maksimal+');return false">'+maksimal+'</a></span>'}}var nextnomer=parseInt(nomerhal)+1;if(nomerhal<maksimal){if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+nextnomer+');return false">'+downPageWord+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+nextnomer+');return false">'+downPageWord+'</a></span>'}}var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function hitungtotaldata(root){var feed=root.feed;var totaldata=parseInt(feed.openSearch$totalResults.$t,10);loophalaman(totaldata)}function halamanblogger(){var thisUrl=urlactivepage;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){jenis="page";if(urlactivepage.indexOf("#PageNo=")!=-1){nomerhal=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{nomerhal=1}document.write("<script src=\""+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=hitungtotaldata\"><\/script>")}else{jenis="label";if(thisUrl.indexOf("&max-results=")==-1){postperpage=20}if(urlactivepage.indexOf("#PageNo=")!=-1){nomerhal=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{nomerhal=1}document.write('<script src="'+home_page+'feeds/posts/summary/-/'+lblname1+'?alt=json-in-script&callback=hitungtotaldata&max-results=1" ><\/script>')}}}function redirectpage(numberpage){jsonstart=(numberpage-1)*postperpage;nopage=numberpage;var nBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nBody.appendChild(newInclude)}function redirectlabel(numberpage){jsonstart=(numberpage-1)*postperpage;nopage=numberpage;var nBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary/-/"+lblname1+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nBody.appendChild(newInclude)}function finddatepost(root){post=root.feed.entry[0];var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);var timestamp=encodeURIComponent(timestamp1);if(jenis=="page"){var alamat="/search?updated-max="+timestamp+"&max-results="+postperpage+"#PageNo="+nopage}else{var alamat="/search/label/"+lblname1+"?updated-max="+timestamp+"&max-results="+postperpage+"#PageNo="+nopage}location.href=alamat}
//]]>
</script>
</b:if>
</b:if>

Catatan: - Jika Kamu ingin menampilkan lebih banyak posting maka ubah nilai yang ditandai merah dari kode di atas. Jika Anda ingin menambah angka di widget maka ganti nilai biru.



Jika Kamu menggunakan widget ini dan beberapa posting dilewati, Ingat satu hal harus menjaga jumlah posting tetap sama di pengaturan blog dan widget pagination. Ada batasan 1mb dari sisi blogger, hanya 1mb gambar atau teks yang dapat Kamu tampilkan di halaman beranda dan jika melebihi batas, maka sisa posting masuk ke halaman berikutnya,  tetapi Kamu dapat mencoba jeda halaman setelah paragraf pertama di setiap posting, semoga ini bisa membantu.

Kesimpulan

Selamat !! Kamu telah berhasil. Cara Menambahkan Halaman Paginasi Di Blogger - 2020. Kunjungi blog kamu dan periksa widget keren langsung beraksi, semoga Kamu menyukai tutorial ini