Removing Blogger Newer Post, Home, And Older Post

Bloggers / Blogspot users are always seeking ways to customize their blog to express their personality more. Common template usage are to be avoided by advanced users, so are its common features, such as the links "newer posts, home, and older post". Removing them will make Blogger / Blogspot websites appear more uniquely customized.

Recently, I had removed these Blogger / Blogspot default links, which are usually located in the bottom section of all the pages, below comments. My only reason to remove them was because they “feels” too Blogger / Blogspot for me.

These three links does not always appear together, you know. They depend on which post you are currently viewing. If you are reading the newest post, of course you will not see any "newer post" link, since there is no newer one. The link "older post" works vice verse. The home link is likely to be similar in some cases, when you are currently visiting the "home" page, you definitely do not need the link "home", right? Blogger/ Blogspot programmers are not that dumb you know :D

In the middle of the process, an idea to keep the home link intact flashed inside my head. However, still I deleted it, since I did not have any home page yet, actually. The home page was only my latest post.

The removal technique itself requires a little bit of knowledge in HTML and CSS programming, since you will need to edit your template. However, this is very easy, so you don't need to worry even if you are a newbie.

To do it, access your template editing from layout section, then find these codes in "comments" region, which represent the setting of displaying the links of "newer post, home, and older post":

/* Comments
----------------------------------------------- */
#…
#…
#…

#blog-pager-newer-link {
float: $startSide;
}

#blog-pager-older-link {
float: $endSide;
}

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

In case you are not familiar with the template codes yet, "find" tool of your browser can help you handsomely, I often use Firefox' myself. Once you find the codes, you need to add some other codes not to display them, and here they are:

#...
display: none;
}

The next step, you will have to add the removal codes to each of them. It's very simple my friend, just like this:

/* Comments
----------------------------------------------- */
#…
#…
#…

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

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

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

Now, save the template, and it’s done! If you put the codes right, they should not be displayed any longer. To check, refresh your blog and pay some attention to the appearance. Now your blog shall taste less "Blogspot" :D

Note: To recover / show the links again, simply remove the added codes (removal codes).

Do you face any difficulties in applying the trick above? Feel free to share it on the comments section.