Remove Blogger Links: 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

Have you successfully apply it? Do you face any difficulties?

Enter your email address:

Delivered by FeedBurner

Basic Blog Code:

Since
I can't show you a sample of the code here (because this is not
a blog), you'll have to trust me on this... and the TOUGH part
of that is it's probably going to be hard to do. Why? Most ready-made
blog templates are done in CSS and are very complex to somebody
like myself who is an HTML gal. To make matters even stickier,
if you paste the code in the wrong place, it won't work. But the
basic, bare bones code for use with an empty template is below...
plus one or two options if you don't care for what you have.

Basic
Blog Body/Post Code:

The
code needed to generate a blog post (what you would need to put
in the BODY area-- where your posts go--) is below:

<blogger>

<p> <blogdateheader><a name="<$BlogItemNumber$>"></a><b><$BlogDateHeaderDate$></b><br>


</blogdateheader>

<p><$BlogItemBody$> <br>

<a href="mailto:type_your_email_here"><$BlogItemAuthor$></a>
at <a href="<$BlogItemArchiveFileName$>#<$BlogItemNumber$>"
onMouseOver="window.status='permanant link '; return true"
onMouseOut="window.status=''; return true"><$BlogItemDateTime$></a>
</p> </blogger>

Basic
"Previous" Posts Code:

You
may want a list of "recent articles" or posts rather than
the standard archive. If you want to show a list of recent posts
(usually in the sidebar) the basic code looks like this:

<BloggerPreviousItems>

<a href="<$BlogItemPermalinkURL$>">

<$BlogPreviousItemTitle$>


</a><br />

</BloggerPreviousItems>

Basic
Archives (Monthly) Code:

Prefer
to see a monthly archive? The standard archive code, which will
list links by month, is below:

<BloggerArchives>

<a href='<$BlogArchiveURL$>'><$BlogArchiveName$></a>


</BloggerArchives>

Log-In
Form:

I
have gotten BUCKETS of requests from users who've spotted the "ADMIN"
login form on my blogs. It's a simple form that you can copy and
paste anywhere (sidebar works best, or anywhere you'd put links,
ads, etc) for a quick way to log in to your blogger account. THE
PASSWORD IS NOT IN THE SCRIPT, so it's safe. Only your UserName
is included, and most of us use the same username and blogtitle.
You need to edit the font if you desire, Give it a name (I have
used "Log-In" here, and change the place where it says
YOUR_USERNAME_GOES_HERE to your username. Paste this into your blog
and you'll see a form with a login window. Type in your password
and click-- VOILA!-- you're at the dashboard.

<form
action="http://www.blogger.com/login.do" method="post"name="login"
target="_parent">

<p align="center"><font color="#ffffff"
face="Geneva, Arial, Helvetica, san-serif" size="3"><b><font
color="#000000">Log-In:</font></b></font><font
face="Geneva, Arial, Helvetica, san-serif" size="2"><br>


<input type="hidden" name="destination" value="/home">

<input type="hidden" name="username" value="YOUR_USERNAME_GOES_HERE"tabindex="1"
id="username" class="text">

<input type="password" name="password" tabindex="2"size="10"
maxlength="50" id="passwrd"class="text">

<br>

<input type="submit" class="siteprimary"value="Log-In"
tabindex="4" name="submit">

</font></p>


</form>

Blogger
Tags Comprehensive List:

<$BlogOwnerFirstName$>

<$BlogOwnerLastName$>

<$BlogOwnerEmail$>

<$BlogOwnerFullName$>


<$BlogOwnerPhotoUrl$>

<$BlogOwnerNickname$>

<$BlogOwnerLocation$>

<$BlogOwnerAboutMe$>

<$BlogOwnerProfileURL$>

<Blogger>


<BlogDateHeader>

<$BlogDateHeaderDate$>

</BlogDateHeader>

<BlogItemTitle>

<BlogItemURL>

<a href="<$BlogItemURL$>">


</BlogItemURL>

<$BlogItemTitle$></a>

</BlogItemTitle>

<BlogItemTitle>

<$BlogItemTitle$>


</BlogItemTitle>

<$BlogItemBody$>

<$BlogItemAuthor$>

<$BlogItemAuthorNickname$>

<$BlogItemAuthorEmail$>

<$BlogItemAuthorURL$>


<$BlogItemDateTime$>

<$BlogItemNumber$>

<$BlogItemArchiveFileName$>

<$BlogItemPermalinkURL$>

<$BlogItemControl$>

<BlogDateFooter>


</BlogDateFooter>

</Blogger>

<BloggerArchives>

<a href='<$BlogArchiveURL$>'><$BlogArchiveName$></a>

</BloggerArchives>

<MainPage></MainPage>

<ArchivePage></ArchivePage>

<ItemPage></ItemPage>

<MainOrArchivePage></MainOrArchivePage>

<BloggerPreviousItems>


<a href="<$BlogItemPermalinkURL$>">

<$BlogPreviousItemTitle$>

</a><br />

</BloggerPreviousItems>

<BlogItemCommentsEnabled>


<$BlogItemCommentCount$>

<$BlogItemCommentCreate$>

<$BlogItemCommentFormOnClick$>

<BlogItemComments>

<a name="<$BlogCommentNumber$>"></a>


<$BlogCommentBody$>

<$BlogCommentPermalinkURL$>

<$BlogCommentAuthor$>

<$BlogCommentDateTime$>

<$BlogCommentDeleteIcon$>

<$BlogItemCreate$>


</BlogItemComments>

</BlogItemCommentsEnabled>