All Tutorials

Your One-Stop Destination for Learning and Growth

How to Modify Blog Pager on Homepage in Blogger (Kompi Ajaib Style)

Blogging is an effective way to share your thoughts, ideas, and experiences with the world. One of the most popular blogging platforms is Google's Blogger. However, sometimes you might want to customize the look and feel of your blog to make it unique and attractive to your readers. In this tutorial, we will learn how to modify the blog pager on the homepage of a Blogger-style blog, similar to Kompi Ajaib.

Prerequisites

Before we begin, ensure that you have the following:

  1. Basic knowledge of HTML and CSS.
  2. Access to your Blogger account and the Blog Post Editor.
  3. An active blog with at least a few posts.

Step 1: Create a Custom Page Element

The first step is to create a custom page element for the pager. Go to Layout > Add a gadget. Select HTML/JavaScript, and paste the following code into the content box:

<b:section name="custom">
  <b:if cond="data:blog.pageType != 'item'">
    <style>
      .pager { text-align: center; margin-top: 50px; }
      .pager a { padding: 6px 12px 6px 12px; background-color: #ddd; border: 1px solid #ccc; text-decoration: none; color: #333; margin: 0 4px; }
      .pager a:hover { background-color: #f1f1f1; }
    </style>
  </b:if>
</b:section>

This code sets up the basic structure and styling for our custom pager. Save and add the gadget to your blog.

Step 2: Modify Template XML

Next, we need to modify the template XML to include the custom page element in the blog pager. Go to Settings > Other. In the Edit HTML tab, find the following line:

<b:include name='quick_edit'/>

Before this line, add the following code:

<b:if cond='data:blog.pageType == "index"'>
  <b:section name="custom">
    <b:include name="pager"/>
  </b:section>
</b:if>

This code checks if the current page is the homepage and, if so, includes our custom pager gadget. Save your changes.

Step 3: Create a Custom Pager Gadget

Now, let's create a custom pager gadget. Go to Layout > Add a gadget. Select HTML/JavaScript, and paste the following code into the content box:

<b:if cond='data:blog.pageType != "item"'>
  <style>
    .pager { text-align: center; margin-top: 50px; }
    .pager a { padding: 6px 12px 6px 12px; background-color: #ddd; border: 1px solid #ccc; text-decoration: none; color: #333; margin: 0 4px; }
    .pager a:hover { background-color: #f1f1f1; }
  </style>

  <b:if cond='data:blog.pageType == "index"'>
    <div class="pager">
      <b:if cond='size:blog.pages.totalPages > 1'>
        <b:if cond='data:blog.pageNumber != 1'>
          <a href='<$Blog.url$>/'>< Previous</a>
        </b:if>

        <b:loop values='blog.pages' var='page'>
          <b:if cond='page.currentPage != true'>
            <b:if cond='page.title == data:view.pageTitle'>
              <span style='font-weight:bold;'><$= page.title $></span>
            </b:if>
            <a href='<$= page.url $>'><$= page.title $></a>
          </b:if>
        </b:loop>

        <b:if cond='size:blog.pages.totalPages > data:blog.pageNumber + 1'>
          <a href='<$Blog.url$>/<$view.pageName$>?page=<$data:blog.pageNumber+1$>'>Next &gt;</a>
        </b:if>
      </b:if>
    </div>
  </b:if>
</b:if>

This code creates a pager gadget that displays the previous and next page links for your blog. Save and add the gadget to your blog.

Conclusion

Now you've learned how to modify the blog pager on the homepage of your Blogger-style blog, similar to Kompi Ajaib. This custom pager adds a clean and attractive look to your blog while making it easy for your readers to navigate through your posts. Happy blogging!

Published August, 2017