Cara Membuat Page Number Keren

www.azid45.web.id - Cara Membuat Page Number Keren. Assalamualaikum, Wr.Wb. Mungkin pada bulan ini saya akan share pengalaman saya terkait redign template sejuta umat "Viomagz". Jika kemaren saya sudah pernah share mengganti breadcrumb microdata menjad LD-JSON maka kali ini saya akan mengubah tampilan page number yang ada pada template viomagz agar lebih menarik.

Sejatinya page number yang ada pada viomagz sendiri sudah bagus akan tetapi mungkin bagi beberapa pelanggan Viomgaz bisa jadi ingin tampilan yang berbeda dengan yang lainnya akhirnya mereka mendesain ulang tampilannya "redisgn template" sesuai dengan keinginan mereka.

Namun dari beberapa pengguna template bisa jadi akan mencari tutorial yang pas dengan keinginan hati mereka. Dari hal tersebut, saya akan menyajikan sebuah tutorial kepada anda untuk mengubah tampilan viomagz menjadi lebih menarik dari pada yang lain dari segi page number.

Baiklah, biar tidak terlalu bertele-tele anda bisa simak tutorialnya berikut ini:

Pertama, anda bisa masuk blogger terlebih dahulu kemudian menuju menu tema atau tampilan. Jika sudah klik edit HTML kemudian cari kode </head> dan letakkan kode berikut ini tepat diatas kode tersebut.

<style>
#blog-pager {
    float: left;
    width: 100%;
    overflow: hidden;
    clear: both;
    margin: 0 0 40px
}

.blog-pager a,
.blog-pager span {
    float: left;
    display: block;
    background-color: #f2f2f2;
    color: #000000;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    box-sizing: border-box;
    padding: 8px 12px;
    margin: 0 5px 0 0;
    transition: all .17s ease;
    text-transform: uppercase
}

.blog-pager span.page-dots {
    float: left;
    display: block;
    background-color: #f2f2f2;
    color: #000000;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    box-sizing: border-box;
    padding: 8px 12px;
    margin: 0 5px 0 0;
    transition: all .17s ease;
    text-transform: uppercase
}

.blog-pager .page-of {
    width: auto;
    float: left;
    margin: 0 5px 0 0
}

.blog-pager .page-active,
.blog-pager a:hover {
    background-color: #FF5722;
    color: #fff;
    border-color: #FF5722
}

.blog-pager .page-next:before,
.blog-pager .page-prev:before {
    font-family: FontAwesome;
    font-size: 10px;
    font-weight: 400
}

.blog-pager .page-prev:before {
    content: '\f053'
}

.blog-pager .page-next:before {
    content: '\f054'
}

.blog-pager .blog-pager-newer-link,
.blog-pager .blog-pager-older-link {
    float: left;
    display: inline-block;
    width: auto;
    margin: 0
}

.blog-pager .blog-pager-older-link {
    float: right
}

.archive #blog-pager,
.home .blog-pager .blog-pager-newer-link,
.home .blog-pager .blog-pager-older-link {
    display: none
}
</style>

<script>
var numberedPagination = true;
</script>

Kedua, untuk anda yang memakai template Viomagz anda tinggal klik Simpan maka secara otomatis tampilan page number akan sudah berubah. Hal ini dikarenakan efek dari fungsi kode CSS yaitu mempercantik tampilan. Akan tetapi jika anda tidak menggunakan template viomagz anda bisa menambahkan script berikut ini dan letakkan script tersebut di atas kode </body>

<!-- JAVASCRIPT NAVIGASI HALAMAN BERNOMOR -->
<script>
var perPage=6;
var numPages=6;
var firstText =&#39;<b:switch var='data:blog.locale'><b:case value='id'/>Pertama<b:default/>First</b:switch>&#39;;
var lastText =&#39;<b:switch var='data:blog.locale'><b:case value='id'/>Terakhir<b:default/>Last</b:switch>&#39;;
var prevText =&#39;&#8250; <b:switch var='data:blog.locale'><b:case value='id'/>Sebelumnya<b:default/>Prev</b:switch>&#39;;
var nextText =&#39;<b:switch var='data:blog.locale'><b:case value='id'/>Selanjutnya<b:default/>Next</b:switch> &#8250;&#39;;
var urlactivepage=location.href;
var home_page=&quot;/&quot;;
</script>
<script>
//<![CDATA[
if(numberedPagination==1){
if(typeof firstText=="undefined")firstText="First";if(typeof lastText=="undefined")lastText="Last";var noPage;var currentPage;var currentPageNo;var postLabel;pagecurrentg();function looppagecurrentg(pageInfo){var html='';pageNumber=parseInt(numPages/2);if(pageNumber==numPages-pageNumber){numPages=pageNumber*2+1}pageStart=currentPageNo-pageNumber;if(pageStart<1)pageStart=1;lastPageNo=parseInt(pageInfo/perPage)+1;if(lastPageNo-1==pageInfo/perPage)lastPageNo=lastPageNo-1;pageEnd=pageStart+numPages-1;if(pageEnd>lastPageNo)pageEnd=lastPageNo;html+="<span class='showpageOf'>Page "+currentPageNo+' of '+lastPageNo+"</span>";var prevNumber=parseInt(currentPageNo)-1;if(currentPageNo>1){if(currentPage=="page"){html+='<span class="showpage firstpage"><a href="'+home_page+'">'+firstText+'</a></span>'}else{html+='<span class="displaypageNum firstpage"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+firstText+'</a></span>'}}if(currentPageNo>2){if(currentPageNo==3){if(currentPage=="page"){html+='<span class="showpage"><a href="'+home_page+'">'+prevText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+prevText+'</a></span>'}}else{if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+prevNumber+');return false">'+prevText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+prevNumber+');return false">'+prevText+'</a></span>'}}}if(pageStart>1){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'}}if(pageStart>2){html+=' ... '}for(var jj=pageStart;jj<=pageEnd;jj++){if(currentPageNo==jj){html+='<span class="pagecurrent">'+jj+'</span>'}else if(jj==1){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'}}else{if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+jj+');return false">'+jj+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+jj+');return false">'+jj+'</a></span>'}}}if(pageEnd<lastPageNo-1){html+='...'}if(pageEnd<lastPageNo){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastPageNo+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastPageNo+'</a></span>'}}var nextnumber=parseInt(currentPageNo)+1;if(currentPageNo<(lastPageNo-1)){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+nextnumber+');return false">'+nextText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+nextnumber+');return false">'+nextText+'</a></span>'}}if(currentPageNo<lastPageNo){if(currentPage=="page"){html+='<span class="displaypageNum lastpage"><a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastText+'</a></span>'}else{html+='<span class="displaypageNum lastpage"><a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastText+'</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 totalcountdata(root){var feed=root.feed;var totaldata=parseInt(feed.openSearch$totalResults.$t,10);looppagecurrentg(totaldata)}function pagecurrentg(){var thisUrl=urlactivepage;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{postLabel=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){currentPage="page";if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1}document.write("<script src=\""+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=totalcountdata\"><\/script>")}else{currentPage="label";if(thisUrl.indexOf("&max-results=")==-1){perPage=20}if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1}document.write('<script src="'+home_page+'feeds/posts/summary/-/'+postLabel+'?alt=json-in-script&callback=totalcountdata&max-results=1" ><\/script>')}}}function redirectpage(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=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");nameBody.appendChild(newInclude)}function redirectlabel(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary/-/"+postLabel+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.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(currentPage=="page"){var pAddress="/search?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}else{var pAddress="/search/label/"+postLabel+"?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}location.href=pAddress}
};
//]]>
</script>
</b:if>
</b:if>
</b:if>

Ketiga, Save template anda dan lihat hasilnya.

Demikianlah artikel tentang membuat page number keren semoga artikel ini bermanfaat. Amin.