Cara Memasang Navigasi Halaman Dengan Angka Di Blogger - BBT: Tutorial lengkap ! Cara memasang navigasi halaman dengan angka di blogger dengan mudah dan cepat serta tanpa risiko template error, buktikan sendiri.

Cara Memasang Navigasi Halaman Dengan Angka Di Blogger

Navigasi Halaman
Sobat pernah melihat sebuah blog yang memiliki navigasi halaman dengan angka kurang lebih seperti ini : 1, 2, 3... Next

Nah kali ini saya akan menuliskan tutorial bagaimana cara memasang navigasi halaman dengan nomor di blogger.

Widget navigasi halaman dengan angka ini tidak bersifat wajib, namun bisa membuat blog sobat terlihat lebih keren :-)

Oke sobat, saya rasa tidak perlu panjang lebar ya, dan mari langsung kita mulai.

Cara Membuat Nomor Navigasi Halaman Di Blogger Dengan Mudah

Di sini saya hanya akan menuliskan cara ter-mudah dan ter-cepat untuk membuat navigasi halaman dengan angka di blogger.

Berikut caranya :
  1. Masuk ke dasbor blogger
  2. Buka halaman Tata Letak
  3. Klik Tambahkan Gadget
  4. Pilih gadget HTML/JavaScript
  5. Masukkan script navigasi halaman pada bagian Konten
  6. Simpan
Tata Letak Blogger
Ya ... hanya itu saja yang harus sobat lakukan untuk membuat nomor navigasi halaman di blogger.

Sangat mudah bukan....

Adapun script yang harus sobat pasang pada bagian Konten gadget HTML/JavaScript adalah ini

<script type='text/javascript'>
var home_page_url = location.href;
var pageCount=8;
var displayPageNum=3;
var upPageWord ='Previous';
var downPageWord ='Next';
function showpageCount(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);
var title = post.title.$t;
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+'&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){
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){
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++;
}}}
if(thisNum>1){
html = ''+upPageHtml+' '+html +' ';
}
html = '<div class="showpageArea"><span  class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
}
if(postNum==1) postNum++;
html += '</div>';
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;
}}
function showpageCount2(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var isLablePage = thisUrl.indexOf("/search/label/")!=-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 labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
var thisUrl = home_page_url;
for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);
var title = post.title.$t;
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&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){
upPageHtml = labelHtml + 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){
html = labelHtml+'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++;
}}}
if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}}
html = '<div class="showpageArea"><span  class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
}
if(postNum==1) postNum++;
html += '</div>';
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 type='text/javascript'>
var thisUrl = home_page_url;
if (thisUrl.indexOf("/search/label/")!=-1){
if (thisUrl.indexOf("?updated-max")!=-1){
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"));
}else{
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"));
}}
var home_page = "/";
if (thisUrl.indexOf("?q=")==-1){
if (thisUrl.indexOf("/search/label/")==-1){
document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')
}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')
}}
</script>
<style type="text/css">
.blog-pager,#blog-pager{text-align:center;font-size:100%}
.showpageNum a,.showpage a {background:#00ACED;color:#FFF; margin-right:.3em;text-decoration:none;font-weight:bold;line-height:0;text-align:center;padding:.3em .5em;border-bottom:3px solid rgba(225,225,225,0.5)}
.showpageNum a:hover,.showpage a:hover {background:#DD4B39; color:#fff; margin-right:.3em;text-decoration:none;font-weight:bold;line-height:0;text-align:center;border-bottom:3px solid rgba(225,225,225,0.5)}
.showpageOf{margin:0 8px 0 0;font-family:'Coming Soon', cursive;text-decoration:none;}
.showpagePoint {background:#DD4B39; color:#FFF; margin-right:.3em;font-weight:bold;text-decoration:none;line-height:0;text-align:center;padding:.3em .5em;border-bottom:3px solid rgba(225,225,225,0.5)}
</style>
Keterangan :
  • var pageCount=8; → Ganti angka 8 dengan jumlah artikel yang akan ditampilkan pada halaman selanjutnya
  • var displayPageNum=3; → Ganti angka 3 dengan jumlah angka yang ingin di tampilkan pada navigasi halaman, angka 3 berarti angka yang akan ditampilkan angka 1-4, jika diganti dengan 5 maka angka yang ditampilkan angka 1-6.
  • var upPageWord ='Previous'; → Ganti tulisan Previous jika menginginkannya, misalnya dengan tulisan Sebelumnya.
  • var downPageWord ='Next'; → Ganti tulisan Next jika menginginkannya, misalnya dengan tulisan Selanjutnya.
  • Untuk modifikasi tampilan silakan edit kode css yang berada di antara kode <style type="text/css"> dan </style>
Nah itulah cara ter-mudah memasang navigasi halaman dengan angka di blogger beserta script yang digunakan.

Semoga bermanfaat.
loading...
Lihat / Tinggalkan Komentar
- All Rights Reserved. Powered by Blogger. Membuat Blog

Terimakasih telah membaca , semoga artikel tentang Cara Memasang Navigasi Halaman Dengan Angka Di Blogger yang ada di blog ini bermanfaat buat sobat