Membuat paging dengan mudah pada blogspot

Untuk sebagian template blogspot ada yang sudah menyediakan paging dan ada yang belum, kalau untuk template yang saya pakai sekarang ini awalnya templatenya masih belum menyediakan fitur paging, ya udah saya beri paging saja deh, sekalian saya postingkan untuk teman-teman yang belum menggunakan paging.

Sebelumnya anda sudah tahu donk apa itu paging? Paging ini sebenarnya fungsinya untuk menampilkan halaman pada blog atau website untuk artikel-artikel yang lama (Kurang lebihnya sih gitu), jadi tidak mungkin donk semua artikel ditampilkan di halaman utama blog, itu malah akan jadi berat ketika pengunjung ke halaman utama blog anda maka di buatlah cara paging ini.

Bagaimana membuatnya? Langsung saja ikuti caranya dibawah ini:

Login ke akun blogger anda.
Klik rancangan.
Masuk pada Edit HTML.
Lalu cari kode berikut ]]></b:skin> untuk lebih cepatnya tekan Ctrl + F
Setelah ketemu copy paste kode berikut sebelum kode di atas.

.showpageArea {padding: 0 2px;margin-bottom:10px;margin-top:10px; }  .showpageArea a {border: 1px solid #505050; color: #000000;font-weight:normal; padding: 3px 6px !important; padding: 1px 4px ;margin:0px 4px; text-decoration: none; } .showpageArea a:hover { font-size:11px; border: 1px solid #333; color: #000000; background-color: #FFFFFF; }  .showpageNum a {border: 1px solid #505050; color: #000000;font-weight:normal; padding: 3px 6px !important; padding: 1px 4px ;margin:0px 4px; text-decoration: none;  } .showpageNum a:hover { font-size:11px; border: 1px solid #333; color: #000000; background-color: #FFFFFF;  } .showpagePoint {font-size:11px; padding: 2px 4px 2px 4px; margin: 2px; font-weight: bold; border: 1px solid #333; color: #fff; background-color: #000000;  }  .showpage a:hover {font-size:11px; border: 1px solid #333; color: #000000; background-color: #FFFFFF;  } .showpageNum a:link,.showpage a:link { font-size:11px; padding: 2px 4px 2px 4px; margin: 2px; text-decoration: none; border: 1px solid #0066cc; color: #0066cc; background-color: #FFFFFF;}  .showpageNum a:hover {font-size:11px; border: 1px solid #333; color: #000000; background-color: #FFFFFF; }

Lalu cari kode </b:section>.
Setelah ketemu copy paste kode berikut setelah kode di atas.

<script type='text/javascript'>

var home_page_url = location.href; 


var pageCount=10;
  var displayPageNum=6;
  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+'&amp;max-results='+pageCount;
  }
  }
  itemCount++;

  }

  for(var p =0;p&lt; htmlMap.length;p++){
  if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
  if(fFlag ==0 &amp;&amp; p == thisNum-2){
  if(thisNum==2){
  upPageHtml = '&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/span&gt;';
  }else{
  upPageHtml = '&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/span&gt;';
  }

  fFlag++;
  }

  if(p==(thisNum-1)){
  html += '&lt;span class=&quot;showpagePoint&quot;&gt;'+thisNum+'&lt;/span&gt;';
  }else{
  if(p==0){
  html += '&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/&quot;&gt;1&lt;/a&gt;&lt;/span&gt;';

 }else{
  html += '&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;'+ (p+1) +'&lt;/a&gt;&lt;/span&gt;';
  }
  }

  if(eFlag ==0 &amp;&amp; p == thisNum){
  downPageHtml = '&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;'+ downPageWord +'&lt;/a&gt;&lt;/span&gt;';
  eFlag++;
  }
  }
  }

  if(thisNum&gt;1){
  html = ''+upPageHtml+' '+html +' ';
  }

  html = '&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;COLOR: #000;&quot; class=&quot;showpageOf&quot;&gt; Pages ('+(postNum-1)+')&lt;/span&gt;'+html;

  if(thisNum&lt;(postNum-1)){
  html += downPageHtml; 
  }

  if(postNum==1) postNum++;
  html += '&lt;/div&gt;';


var pageArea = document.getElementsByName(&quot;pageArea&quot;);
  var blogPager = document.getElementById(&quot;blog-pager&quot;);

if(postNum &lt;= 2){
  html ='';
  }

for(var p =0;p&lt; pageArea.length;p++){
  pageArea[p].innerHTML = html;
  }

if(pageArea&amp;&amp;pageArea.length&gt;0){
  html ='';
  }

if(blogPager){
  blogPager.innerHTML = html;
  }


}


function showpageCount2(json) {

var thisUrl = home_page_url;
  var htmlMap = new Array();
  var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;
  var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.length) : &quot;&quot;;
  thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ? thisLable.substr(0,thisLable.indexOf(&quot;?&quot;)) : thisLable;
  var thisNum = 1;
  var postNum=1;
  var itemCount = 0;
  var fFlag = 0;
  var eFlag = 0;
  var html= '';
  var upPageHtml ='';
  var downPageHtml ='';

 

var labelHtml = '&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/search/label/'+thisLable+'?&amp;max-results='+pageCount+'&quot;&gt;';
  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&lt; htmlMap.length;p++){
  if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
  if(fFlag ==0 &amp;&amp; p == thisNum-2){
  if(thisNum==2){
  upPageHtml = labelHtml + upPageWord +'&lt;/a&gt;&lt;/span&gt;';
  }else{
  upPageHtml = '&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/span&gt;';
  }

  fFlag++;
  }

  if(p==(thisNum-1)){
  html += '&lt;span class=&quot;showpagePoint&quot;&gt;'+thisNum+'&lt;/span&gt;';
  }else{
  if(p==0){
  html = labelHtml+'1&lt;/a&gt;&lt;/span&gt;';
  }else{
  html += '&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;'+ (p+1) +'&lt;/a&gt;&lt;/span&gt;';
  }
  }

  if(eFlag ==0 &amp;&amp; p == thisNum){
  downPageHtml = '&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;'+ downPageWord +'&lt;/a&gt;&lt;/span&gt;';
  eFlag++;
  }
  }
  }

  if(thisNum&gt;1){
  if(!isLablePage){
  html = ''+upPageHtml+' '+html +' ';
  }else{
  html = ''+upPageHtml+' '+html +' ';
  }
  }

  html = '&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;COLOR: #000;&quot; class=&quot;showpageOf&quot;&gt; Pages ('+(postNum-1)+')&lt;/span&gt;'+html;

  if(thisNum&lt;(postNum-1)){
  html += downPageHtml; 
  }

  if(postNum==1) postNum++;
  html += '&lt;/div&gt;';

  var pageArea = document.getElementsByName(&quot;pageArea&quot;);
  var blogPager = document.getElementById(&quot;blog-pager&quot;);

if(postNum &lt;= 2){
  html ='';
  }

for(var p =0;p&lt; pageArea.length;p++){
  pageArea[p].innerHTML = html;
  }

if(pageArea&amp;&amp;pageArea.length&gt;0){
  html ='';
  }

if(blogPager){
  blogPager.innerHTML = html;
  }


}


</script>

<script type='text/javascript'>

 var thisUrl = home_page_url;
  if (thisUrl.indexOf(&quot;/search/label/&quot;)!=-1){
  if (thisUrl.indexOf(&quot;?updated-max&quot;)!=-1){
  var lblname1 = thisUrl.substring(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.indexOf(&quot;?updated-max&quot;));
  }else{
  var lblname1 = thisUrl.substring(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.indexOf(&quot;?&amp;max&quot;));
  }
  }

 var home_page = &quot;/&quot;;
  if (thisUrl.indexOf(&quot;?q=&quot;)==-1 &amp;&amp; thisUrl.indexOf(&quot;.html&quot;)==-1){ 
  if (thisUrl.indexOf(&quot;/search/label/&quot;)==-1){ 
  document.write('&lt;script src=&quot;'+home_page+'feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot; &gt;&lt;\/script&gt;')
  }else{document.write('&lt;script src=&quot;'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&amp;callback=showpageCount2&amp;max-results=99999&quot; &gt;&lt;\/script&gt;')
  }
  }
  </script>

Lalu simpan template anda

Gimana, mudah bukan?? Selamat mencoba.

{ 15 komentar... read them below or add one }

Anonim mengatakan...: banyak banget ne codenya gan,, ntar jam 2 malam ane tes gan..; 5 September 2011 pukul 07.59
herimbor mengatakan...: fungsi paging apa ya gan, ho o codingnya buanyak tenan; 5 September 2011 pukul 21.53
pylar mengatakan...: @Bangjal Dua Tiga: Iya gan emng bnyak,,!
@herimbor: Bisa liat di gambar itu gan,, bagian bawah (Page (3) 1 2 3 Next,, Agan bisa liat langsung tampilan dari home saya bagian bawah...:)itulah paging.,:)

Terimkasih telah berkunjung yah..:); 5 September 2011 pukul 22.23
arif mengatakan...: ada tutorial ngebuat template blogger gak gan ? ane rencananya mau ngerilis theme ane ke blogger juga..; 12 September 2011 pukul 07.55
pylar mengatakan...: Kalau untk mmbuatnya sih blm ada tutorialnya gan, karena keterbatasan ilmu,,hehehe,,, Tapi ada tool yg namnya artisteer untk mmbuat template seperti untuk template blogspot sama wordpress,, Syangnya nggak free,, cba cri2 di google deh...:); 12 September 2011 pukul 11.01
optimasi seo mengatakan...: wow this article is very nice. It's a new inspiration for me. i like it. thank you my friend. Please visit my blog too.; 3 Januari 2012 pukul 06.44
ibnoe.info mengatakan...: gan kalau paging untuk postingan bog ge mana gan.....???; 21 April 2012 pukul 19.46
fajar mengatakan...: kok nnga bs ya gan pnya ane?; 18 Mei 2012 pukul 18.50
Unknown mengatakan...: gan, di template ane ada 2 nih... pilih yg pertama atau yg kedua? (lagi puyeng neh, males mikir.. hehe :p); 22 Juli 2012 pukul 09.04
belajar blog mengatakan...: klo buatnya paginasi untuk halaman yang terlalu panjang artikelnya gimana gan..; 21 September 2012 pukul 08.52
dityasta mengatakan...: gan, di template ku ada 4 buah , patokannya gimana ni buat nentuin yg benernya?; 16 Oktober 2012 pukul 18.15
90animax mengatakan...: panjang bener; 2 November 2012 pukul 04.05
selaludiam mengatakan...: var pageCount=10;
var displayPageNum=6;
var upPageWord ='Previous';
var downPageWord ='Next';

pagecount buat apa gan?apa nampilin berapa post gitu?; 29 November 2012 pukul 05.28
Trik Seo Blog mengatakan...: mantap gan; 12 Februari 2015 pukul 22.00
Pamela Safitri mengatakan...: Gak bisa gan di template ane; 13 April 2015 pukul 01.54

Membuat paging dengan mudah pada blogspot

{ 15 komentar... read them below or add one }

Posting Komentar

About

10 ARTIKEL TERBARU

7 ARTIKEL TERPOPULER

KOMENTAR TERBARU