High Quality Blogger Pagination

In this post, we provide a tutorial for blogger pagination, as a replacement from auto pagination of blogger. Blogger pagination in here is very support with the properties of blogger.com. We make this, original works of threelas.

Background

One of the requirements from blogs that support the SEO is to have ease of navigation facilities. One of them is the provision paginated on blogger. A paginated said to have good quality is to produce the right page with autopagination blogger. This means, each paginated must follow the properties of the blogger. If not, then it might work, but less accurate. Then we tried to find a tutorial on setting up the pagination on the blogger. However, we were not satisfied, because the above conditions are not met properly. For example, suppose your own blog using Jakarta time zone (GMT +07:00). You want to open a page that lists the post as many as five pieces. List of posts should have an update until the 18th of November 2011, and until 12:00 (Jakarta time). So blogger will display the page with the address http://www.threelas.com/search?updated-max=2011-11-18T12:00:00%2B07:00&max-results=5 and not with the address http://www .threelas.com/search?updated-max=2011-11-18T12%3A00%3A00%2B07%3A00&max-results=5.

It is very important to set the time zone on the blogger. This time zone can be met through the Settings -> Formatting, of course, after you enter into your blogger account. Because, json will read time publish based on the time zone settings. And several tutorials do not notice it. Of course, pagination will not work if not properly set the time zone.

Autopagination of blogger is divided into several zones:

1. homepage zone

2. labelpage zone

3. postpage zone

4. archivespage zone

5. staticpage zone

In addition, one of the pagination said to be good is to have a high level of navigation. So users can easily surf on your site. Then, we saw, autopagination of google search engine (yahoo, bing, and others) have a very good level of pagination. In addition, autopagination bloggers have a random pattern to labelpage. Basically, blogger will display a list of posts on labelpage to 20 posts. But unique, autopagination of bloggers do not always display the list of posts up to 20 pieces on the main page of labelpage. Therefore, a number of tutorials already anticipate by adding? Max-results on the main page of labelpage. Of course, this is different. Suppose, a user simply write the address labelpage without? Max-results then pagination is no longer accurate.

And it makes us look for a way out of the above issues. So, we have created a high quality blogger pagination. However, we are sorry, currently we only create one for time zone GMT+, whereas for the GMT- we have not had time to make, due threelas must continue to update. What happens when the user writes a different address? Then the program that we have created will point to the last page. We know that, but we do not improve it, because we think it is a good thing to promote your posting in the distant past. So we think it is not weakness, but a profit.

Tutorial

Tutorials that we provide very simple, really, very simple. What you must do is click on Settings -> Formatting. Then in Timestamp Format you must choose the type of 09:25 (if you do not find the exact same numbers, then seek the same format hour: minute). After that, at the Time Zone, you must select the format GMT+, forgive us we do not currently provide a tutorial for GMT-. Once you do this, then the next step click Design -> Edit HTML, give the checklist on the Expand Widget Templates, and then look for

<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>

  </div>
  <div class='clear'/>
</b:includable>

then replace it with

<b:includable id='nextprev'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "archive"'>
<script src='http://for-threelas-site.googlecode.com/files/threelasforpagination.js' type='text/javascript'></script>
<script src='/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=showpagenumber' type='text/javascript'></script>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>

  </div>
  <div class='clear'/>
</b:if>
<b:if cond='data:blog.pageType == "archive"'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>

  </div>
  <div class='clear'/>
</b:if>

</b:includable>

and for css, please search for ]]></ b: skin> and place the following code

ul.threelaspagination {
list-style-type: none;
margin:10px;
}
ul.threelaspagination li {
display:inline;
border-top:none;
font-weight:bold;
color:black;
margin:3px;
}
ul.threelaspagination li a {
text-decoration:none;
font-weight:normal;
color:blue;
}
ul.threelaspagination li a:hover {
text-decoration:underline;
font-weight:normal;
color:blue;
}

you can change the style of the css, through css tutorials that have been provided by threelas. One thing you should to know, that every tutorial for blogger in here, are support with each others. So please make sure you are following all tutorials from threelas. Only that, if you are satisfied and willing to help us to better, please make donations to us. Because each of your donation, we use for the time that we use in providing the best tutorials.

Update: March 13, 2012
May be for some other peoples have ability with xhtml or related, they will not have meet problems to put this code in their blog. But some other peoples with no experience with xhtml or related, they really need help. So, if you meet error template when put this code in your blog, so actually this is not error. Just change <script src='/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=showpagenumber' type='text/javascript'></script> with <script src='/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=showpagenumber' type='text/javascript'></script> So, have a nice day friends.

Beny ArdiputraNovember 29, 2011 at 2:05 PM
saya sudah mencoba tutorial yang mbak berikan diatas namun saya mengalami template error, mohon pencerahannya ya mbak, terima kasih.
UnknownNovember 29, 2011 at 3:29 PM
Unuk Mas Beny

Saya telah melihat blog anda, dan anda menganut sistem satu posting dengan banyak label. Sedangkan threelas menganut sistem satu posting satu label. Kami sangat peduli dengan apa yang pengguna pikirkan. Pengguna akan lebih memahami maksud dari suatu posting bila hanya mengandung satu label. Cobalah anda ubah menjadi satu posting satu label bila ingin menerapkan tutorial ini.

Kami sangat mohon maaf, saat ini kami tidak menyediakan pagination untuk satu posting dengan banyak label. Dan setiap tutorial yang kami berikan selalu berkaitan satu dengan lainnya. Saya harap Mas Beny dapat mengerti
Beny ArdiputraNovember 29, 2011 at 9:33 PM
hem begitu ya mbak, menurut mbak putri sistem satu posting dengan banyak label seperti yang saya terapkan efektif atau tidak ? apa kelebihan dan kekurangannya ?
UnknownNovember 30, 2011 at 12:22 AM
Untuk Mas Beny:
Efektif atau tidaknya sebuah blog dengan sistem satu posting banyak label sangat tergantung keterkaitan antar label. Bila kaitan antar posting itu tepat, maka hasilnya juga tepat. Namun, dari semua yang telah kami survey, pengguna lebih bisa memahami bila satu posting satu label. Logikanya, bila satu posting memiliki banyak label, maka pengguna akan bertanya, apakah sesungguhnya topik yang dibicarakan.

Mari kita ambil contoh sederhana: dmoz.org, yahoo directory, directory pihak ketiga. Mereka selalu menginginkan satu situs satu topik. Begitupun pada blogger, hendaknya satu posting satu label.

Sekali lagi, tidak berarti sistem banyak label tidak bagus, semua tergantung anda.
masnurNovember 30, 2011 at 6:00 AM
Saya masih blm paham pagination, mohon sedikit penjelasan disini atau denngan screen shoot...
UnknownNovember 30, 2011 at 12:59 PM
Untuk Mas akhnurhadi

Pagination adalah pemberian nomor pada halaman web / blog. Silahkan lihat gambar yang ada diposting ini, kami memberikan lingkaran merah disekitar pagination
Beny ArdiputraDecember 1, 2011 at 2:29 AM
Terima kasih banyak atas saran dan informasinya mbak
UnknownDecember 1, 2011 at 9:50 AM
Untuk Mas Beny: sama-sama
queenphotoshopJanuary 3, 2012 at 5:18 PM
pengen banget belajar utak atik template,
tapi saat dicoba malah bingung. jawabannya sering ada kata kata kode tidak ditutup dg benar, atau parsing error. :(
UnknownJanuary 3, 2012 at 9:47 PM
Itu dikarenakan ada tag yang tidak ditutup dengan benar. Saya yakin semakin sering berlatih pasti akan membaik. Dahulu saya juga tidak paham apa-apa.
UnknownMarch 12, 2012 at 11:27 AM
mbak, gimana cara lihat ada tag yg tdk ditutup dgn benar, karena saya dah edit HTMLnya, ada peringatan
"Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: The reference to entity "alt" must end with the ';' delimiter."
mohon pencerahannya
ZakiiAydiaJuly 27, 2013 at 2:32 AM
Makasih mas tutorialnya :)
skhatzey.blogspot.com
Putri ArisnawatiAugust 13, 2013 at 8:41 PM
sama-sama

Get Latest Update Basic Setting Bootstrap on Blogger

Contributors

Threelas

High Quality Blogger Pagination

Background

Tutorial

Sponsor

All Comments

Labels

Join Us On Facebook

Blog Archive