blog.si.log. \'blòg-së-lòg\

BLOG-ger. SI-nangag (fried rice). it-LOG (fried egg).
CUSTOMIZE YOUR BLOGGER BLOG.
All the tricks, hacks and treats while enjoying your breakfast.




Blogger 101. How-to's, tutorials, all the basics you need to learn about Blogger (dot) com.
Blogger Tweaks. Style and dare to tweak your blog. Make it custom. Make it different.
Blogger Fixes. Encountered errors, glitches while blogging? Check here for possible solutions.
Blogger Conditional Tags. If, Else then WHAT? Learn the secret behind most of the tweaks on blogger.

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.



how to hide older posts and newer posts on blogger


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
share. comment. subscribe. link.


Share.This.Post.
Share.Your.Thoughts.
Subscribe.To.The.Comments.
Subscribe.To.Websilog.
Create.A.Link.


<< 11 Shared Thoughts >>


Kanwaljeet Singh
February 9, 2013 at 5:04 AM

Amazing work... thanks for this very helpful material.
I have one more problem. Since I have removed the "older-home-new" link form website. But now if I want to add new, my own designed code under my posts in home page.... what should I do now.

DP
February 24, 2013 at 12:39 PM

This post helped me very much - thanks a lot, Annie!
Have a nice week!

orelie
February 25, 2013 at 5:25 AM

i want to swap the place
between older post et newer post

but i can't find the way to do that.
Can you explain me how?

thank you very much

pinksheep
August 11, 2013 at 2:38 AM

This code helps to hide old posts on the homepage right?
Is there a code that works for custom blog html or only for Blogger default skins?

SMT
December 20, 2013 at 9:59 AM

Incredible... Although I haven't tried anyone of them, but it seems, will work.
Thanks for sharing
www.smtutorial.com

Unknown
September 24, 2014 at 2:18 AM

Thanks, I went through a million sites looking for this information...they were all of date!.
Only your site was correct.
Thank You

Eliseu Carvalho
July 20, 2015 at 6:46 AM

Is there any way to hide the "newer - home - older" links at the blog's home page, but show them when the reader clicks on specific links - in example, post tags?

Unknown
February 2, 2016 at 2:45 AM
This comment has been removed by the author.
Unknown
February 2, 2016 at 2:45 AM

hide older and newer posts on blogger html thanks for sharing great site

Ace Utilities Keygen

haseeb
March 25, 2022 at 11:54 AM

Is this a paid topic or do you change it yourself?
However, stopping by with great quality writing, it's hard to see any good blog today.
https://licensedinfo.com/
Ace Utilities
Secret Disk Pro

Share.Your.Thoughts.

Copy below HTML link to quickly create a link to this post.



back to share



about web.silog
Curabitur sodales leo et quam venenatis eu faucibus quam placerat. Aliquam metus diam, pretium nec commodo at, tristique nec mauris. Vestibulum urna massa, convallis vel laoreet in, ultrices eu nisl. Nulla facilisi. Nam tristique mollis semper. Mauris ac vestibulum lorem. Mauris erat libero, lobortis nec faucibus non, tempor in leo.

Nulla facilisi.
Nulla facilisi.
Nulla facilisi.


about the blogger
My Photo
In hac habitasse platea dictumst. Aenean congue, lacus in sagittis tempus, dui risus pretium nunc, semper bibendum arcu libero sollicitudin diam. Pellentesque lectus lectus, consectetur at sodales sit amet, sollicitudin eu augue.