Membuat paging dengan mudah pada blogspot

Diposting oleh pylar on 05 September 2011

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:
  1. Login ke akun blogger anda.
  2. Klik rancangan.
  3. Masuk pada Edit HTML.
  4. Lalu cari kode berikut ]]></b:skin> untuk lebih cepatnya tekan Ctrl + F
  5. Setelah ketemu copy paste kode berikut sebelum kode di atas.
  6. .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; }
  7. Lalu cari kode </b:section>.
  8. Setelah ketemu copy paste kode berikut setelah kode di atas.
  9. <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>
  10. Lalu simpan template anda

Gimana, mudah bukan?? Selamat mencoba.

Related Posts Plugin for WordPress, Blogger...

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

Bangjal Dua Tiga mengatakan...

banyak banget ne codenya gan,, ntar jam 2 malam ane tes gan..

herimbor mengatakan...

fungsi paging apa ya gan, ho o codingnya buanyak tenan

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

arif mengatakan...

ada tutorial ngebuat template blogger gak gan ? ane rencananya mau ngerilis theme ane ke blogger juga..

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

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.

ibnoe.info mengatakan...

gan kalau paging untuk postingan bog ge mana gan.....???

fajar mengatakan...

kok nnga bs ya gan pnya ane?

Cheppz Adza mengatakan...

gan, di template ane ada 2 nih... pilih yg pertama atau yg kedua? (lagi puyeng neh, males mikir.. hehe :p)

belajar blog mengatakan...

klo buatnya paginasi untuk halaman yang terlalu panjang artikelnya gimana gan..

dityasta mengatakan...

gan, di template ku ada 4 buah , patokannya gimana ni buat nentuin yg benernya?

90animax mengatakan...

panjang bener

selaludiam mengatakan...

var pageCount=10;
var displayPageNum=6;
var upPageWord ='Previous';
var downPageWord ='Next';

pagecount buat apa gan?apa nampilin berapa post gitu?

Trik Seo Blog mengatakan...

mantap gan

Pamela Safitri mengatakan...

Gak bisa gan di template ane

Posting Komentar