Cara membuat page number valid html 5

Page Number pada suatu halaman situs sangat berguna dimana para pengunjung lebih mengetahui halaman yang ada dalam tubuh suatu situs web ataupun blog. Page Number navigasi sangat membantu para pengunjung untuk lebih leluasa melihat suatu halaman yang terkandung artikel yang telah kita posting. Ini lah sebagai alasan pentingnya suatu page number pada suatu halaman blog ataupun web.

 

Fungsi Script 

 

Kegunaan dari script Page Number Navigasi ini adalah untuk menampilkan jumlah halaman dan tombol link suatu halaman yang akan dipergunakan untuk menampilkan postingan pada blog ataupun web. Pemasangan script page number ini pada tubuh blog pada khususnya sangatlah mudah, hanya dipasang dibagian widget pada blogspot secara otomatis akan menjadi ataupun menggantikan page number yang telah ada ( devault ), walaupun widget tersebut diletakkan sembarangan. Script ini akan membantu anda dalam menangani counter halaman blog ataupun web anda. Setiap pengunjung blog / web anda dapat dengan mudah melihat jumlah halaman pada situs anda dan sekali klik postingan dari artikel yang pernah anda buat akan tampil.

Dalam tutorial kali ini saya membuat script ini, atas permintaan sobat saya. Saya sengaja mempermudah untuk pemasangan script ini pada halaman web khususnya blog. Tapi untuk menjadikan script ini valid HTML 5 script CSS ditempatkan di bagian ( Skin ) dan script dapat ditempatkan di widget kalo untuk blogspot. Bila mana template anda belum valit HTML 5 silahkan gabungkan semua code CSS dan script bersamaan didalam widget pada blogspot. 

Fitur

• Jumlah Halaman
• Navigasi selanjutnya ( Berikut )
• Navigasi Kembali
• Aktive page CSS
• Hover page CSS
• Box page number

Install Program CSS 

 

• Login ke dashboard anda
• Masuk ke "TEMPLATE" lalu klik " Edit HTML "
• Cari code ]]></b:skin> 
• Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi

.blog-pager,#blog-pager{
font-family:Arial, Helvetica, sans-serif;
font-weight:normal;
font-size:12px;
width:550px;
padding:10px;
color: #000000;
text-align: left;
margin-top: -15px;
}
.showpageNum a,.showpage a {
color:#000000;
margin-right:0.6em;
text-decoration:none;
font-size:15px;
font-weight:bold;
line-height:0;
text-align:center;
padding:7px 10px 7px;
background-color: #FFFFFF;
border: solid #999999 1px ;
}
.showpageNum a:hover,.showpage a:hover {
color:#FF0000;
margin-right:0.6em;
text-decoration:none;
font-size:15px;
font-weight:bold;
line-height:0;
text-align:center;
padding:7px 10px 7px;
border-radius:15px;
background-color: #E2E2E2;
border: solid #999999 1px ;
}
.showpageOf{
margin:0 8px 0 0;
font-family:Arial, Helvetica, sans-serif;
text-decoration:none;
font-size:15px;
font-weight:bold;
color: #FFFFFF;
padding:7px 10px 7px;
border-radius:5px;
background-color: #000000;
margin-left: -5px;
}
.showpagePoint {
font-family: Verdana, Arial, Helvetica, sans-serif;
color:#FFF;
margin-right:0.6em;
text-decoration:none;
font-size:15px;
font-style:italic;
line-height:0;
text-align:center;
padding:7px 10px 7px;
border-radius:5px;
background-color: #000000;
border: solid #999999 1px ;
}

 

Install Program Script 

 

• Login ke dashboard anda
• Masuk ke "Tata letak "
• lalu klik "Add Gadget " 
• Pilih HTML/JavaScript
• Capy code dibawah kemudian pastekan di widget.

<script>
var home_page_url = location.href;
var pageCount=10;
var displayPageNum=2;
var upPageWord ='Kembali';
var downPageWord ='Berikutnya';
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+'&amp;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"><blink>'+(postNum-1)+'</blink> Halaman</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+'?&amp;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+'&amp;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"> page('+(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>
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("?&amp;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&amp;callback=showpageCount&amp;max-results=99999" ><\/script>')
}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&amp;callback=showpageCount2&amp;max-results=99999" ><\/script>')
}}
</script>

Keterangan Code

• Untuk mengedit jumlah tampilan , counter page dll silahkan ganti angka dengan tulisan var = 0
• Untuk membuat script ini valit HTML 5 silahkan simpan CSS diatas code ]]></b:skin>
• Template anda tidak valid HTML 5 Silahkan gabungkan kedua kode CSS dan SCRIPT pada widget blog anda

Semoga postingan ini bermanfaat bagi anda, bila ada kekurangan dari penulisan script maupun Css mohon dimaklumi dan silahkan konsultasikan dengan saya langsung.

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 6:07 PM