4 ways to hide "older" and "newer posts" on blogger

There are 4 ways to hide or remove "older posts" and "newer posts", aka blog pager, on blogger. They require either CSS edits or Expand Widget Templates enable-mode.

Technique #1. Using CSS [adding "display:none" property].

1. Go to EDIT HTML page.
2. Press CTRL + F, type in blog-pager on the search bar.
3. You'll see style declarations similar to this:

.blog-pager {
  background: $(paging.background);
}

.blog-pager-older-link, .home-link,
.blog-pager-newer-link {
  background-color: $(content.background.color);
  padding: 5px;
}

or this:

#blog-pager {
text-align: center;
}

#blog-pager-older-link {
float: right;
}

#blog-pager-newer-link {
float: left;
}

4. Add display:none; BEFORE each }. Thus, the new set of codes will be:

.blog-pager {
  background: $(paging.background);
display:none;
}

.blog-pager-older-link, .home-link,
.blog-pager-newer-link {
  background-color: $(content.background.color);
  padding: 5px;
display:none;
}

or this:

#blog-pager {
text-align: center;
display:none;
}

#blog-pager-older-link {
float: right;
display:none;
}

#blog-pager-newer-link {
float: left;
display:none;
}

What it means.
display:none - hides the element altogether.

5. SAVE TEMPLATE.

Technique #2. Using CSS [commenting out whole blog-pager block].

1. Follow Technique #1, steps 1-3.
2. Replace the old block to new block of css codes.

OLD BLOCK:

.blog-pager {
  background: $(paging.background);
}

.blog-pager-older-link, .home-link,
.blog-pager-newer-link {
  background-color: $(content.background.color);
  padding: 5px;
}

NEW BLOCK:

/*
.blog-pager {
  background: $(paging.background);
}

.blog-pager-older-link, .home-link,
.blog-pager-newer-link {
  background-color: $(content.background.color);
  padding: 5px;
}
*/

OLD BLOCK:

#blog-pager {
text-align: center;
}

#blog-pager-older-link {
float: right;
}

#blog-pager-newer-link {
float: left;
}

NEW BLOCK:

/*
#blog-pager {
text-align: center;
}

#blog-pager-older-link {
float: right;
}

#blog-pager-newer-link {
float: left;
}
*/

What we did.
We PLACED THE CODES INSIDE /* */, i.e. /* codes here */. This signifies that they are CSS comments thus completely ignored by the browser.

More info: CSS Comments

3. SAVE TEMPLATE.

Technique #3. Through Expand Widget Templates Mode [commenting out the include statement].

Backup your template!

1. Go to EDIT HTML page.
2. Tick EXPAND WIDGET TEMPLATES.
3. Press CTRL + F, type in <b:include name='nextprev'/> on the search bar.
4. You'll see a similar code like this:

<!-- navigation -->
  <b:if cond='data:mobile'>
    <b:include name='mobile-nextprev'/>
  <b:else/>
    <b:include name='nextprev'/>

REPLACE the above highlighted line with this:
<!-- <b:include name='nextprev'/> -->

Thus, the new codes will be:

<!-- navigation -->
  <b:if cond='data:mobile'>
    <b:include name='mobile-nextprev'/>
  <b:else/>
    <!--  <b:include name='nextprev'/>  -->

What we did.
We PLACED THE CODES INSIDE <!-- -->, i.e. <!-- codes here -->. This signifies that the tag is an HTML comment and like CSS comments, these are ignored by the browser; a.k.a. "ignore-me" code.

More info: Commented out - HTML

5. SAVE TEMPLATE.

Technique #4. Through Expand Widget Templates Mode [deleting include statement entirely].

1. Follow Technique #3, steps 1-3.
2. You'll see a similar code like this:

<!-- navigation -->
  <b:if cond='data:mobile'>
    <b:include name='mobile-nextprev'/>
  <b:else/>
    <b:include name='nextprev'/>

DELETE the highlighted line: <b:include name='nextprev'/>
3. SAVE TEMPLATE.

Other "Older Posts" and "Newer Posts" Tweaks.

2 ways to rename older and newer posts to post title on blogger
5 places to move older and newer posts on blogger