High Quality Blogger Pagination ~ ilmu

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.

ilmu

High Quality Blogger Pagination

Background

Tutorial

0 komentar:

Posting Komentar

Archives

Pengikut