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.
 |
| source : azid45.web.id |
Baiklah, biar tidak terlalu bertele-tele anda bisa simak tutorialnya berikut ini:
Cara Membuat Page Number Terbaru Di Blogger
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.
<!-- JAVASCRIPT NAVIGASI HALAMAN BERNOMOR -->
<script>
var perPage=6;
var numPages=6;
var firstText ='<b:switch var='data:blog.locale'><b:case value='id'/>Pertama<b:default/>First</b:switch>';
var lastText ='<b:switch var='data:blog.locale'><b:case value='id'/>Terakhir<b:default/>Last</b:switch>';
var prevText ='› <b:switch var='data:blog.locale'><b:case value='id'/>Sebelumnya<b:default/>Prev</b:switch>';
var nextText ='<b:switch var='data:blog.locale'><b:case value='id'/>Selanjutnya<b:default/>Next</b:switch> ›';
var urlactivepage=location.href;
var home_page="/";
</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.
Demikian Tutorial Blogger Cara Membuat Page Number Terbaru Yang Bisa Sampaikan , Dan Artikel Ini Saya Dapat Dari Seorang Blogger senior Mas Azid Zainuri, S.Pd, Semoga Bisa Bermanfaat.
Sumber Inspirasi » » »
