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

1. Jumlah Halaman
2. Navigasi selanjutnya ( Berikut )
3. Navigasi Kembali
4. Aktive page CSS
5. Hover page CSS
6. Box page number

Install Program CSS

• Login ke dashboard anda
• Masuk ke "TEMPLATE" lalu klik " Edit HTML "
• Cari code
  
  Code:

  ]]></b:skin>
  

• Copy Code script CSS dibawah ini, pastekan diatas code
  
  Code:

  ]]></b:skin>
  

  tadi

Spoiler

Code:

.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.

Spoiler

Code:

<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+'&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">[url=/]'+ upPageWord +'[/url]</span>';
}else{
 upPageHtml = '<span class="showpage">[url='+htmlMap[p]+']'+ upPageWord +'[/url]</span>';
}
fFlag++;
}
if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
  html += '<span class="showpageNum">[url=/]1[/url]</span>';

}else{
 html += '<span class="showpageNum">[url='+htmlMap[p]+']'+ (p+1) +'[/url]</span>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> [url='+htmlMap[p]+']'+ downPageWord +'[/url]</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">[url=/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 +'[/url]</span>';
}else{
 upPageHtml = '<span class="showpage">[url='+htmlMap[p]+']'+ upPageWord +'[/url]</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">[url='+htmlMap[p]+']'+ (p+1) +'[/url]</span>';
}}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> [url='+htmlMap[p]+']'+ downPageWord +'[/url]</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("?&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>

Keterangan Code

1. Untuk mengedit jumlah tampilan , counter page dll silahkan ganti angka dengan tulisan
   
   Code:

   var = 0
   

2. Untuk membuat script ini valit HTML 5 silahkan simpan CSS diatas code
   
   Code:

   ]]></b:skin>
   

3. 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.

Sumber : http://rivai-silaban.blogspot.com/2013/06/cara-membuat-page-number-valid-html-5.html

 

Mantab nih tutorialnya

Mantab nih, nanti saya coba praktekan di blog yang sudah lama ga disentuh.
Terimakasih tutorialnya... salam kenal.

 

Keren nih , tinggal dicoba

Keren nih , tinggal dicoba

Thanks *

 

ebaharu wrote:

Makasih atas pendapatnya bang @ebaharu salam kenal juga..

 

Andre wrote:

sama sama bang...

 

perlu di coba nih

perlu di coba nih
terima kasih tutorialnya

 

budiw92 wrote:

sama sama bang @budiw92

 

mas rivai mantap bener, kasih

mas rivai mantap bener, kasih banyak ilmu di bersosial.com ini..

 

ebaharu wrote:

Kemana ajaaa bang??

 

ayahnyanadia wrote:

Makasih atas pendapatnya bang @ayahnyanadia

 

royger wrote:

Mungkin banyak bisnis offline nya jadi sibuk mungkin abang itu...

 

gamedewa3 wrote:

makasih atas pertanyaannya bang@gamedewa3 saya rasa rata rata pegination itu bikin lag soalnya di dalam Framework tersedia library “Pagination“ misalnya, yang mana dalam class tersebut terdapat fungsi yang memberikan nilai balik(return) link ke halaman berikutnya,

 

bikin lemes kalo main kode

bikin lemes kalo main kode kodean gan *biggrin*

 

Mondebutter wrote:

hehehhe iya yah sayajuga terkadang gitu gan....