Labels

Adding or Customizing Newer, Home, and Older Links in Soho Template

The Soho template is a nice, clean, minimalist; but I completely understand the frustration. When I first switched to the Soho template, I was a bit disappointed to find that those handy "Newer," "Home," and "Older" post links were missing in action. Adding these links not only improves your blog's user experience but can also give your page speed a little boost. Imagine your readers effortlessly gliding through your content, finding their way back to your homepage with a single click, or discovering your latest masterpiece without any hassle. 
Adding or Customizing Newer, Home, and Older Links in Soho Template
In this post, I'll show you how to add Newer/Next , Home and Older/Previous navigation links in post pages for Soho responsive Blogger Theme. Before proceeding, please backup your current theme to your computer using the Backup/Restore button.

Backing Up Your Blog: A Safety Net

Before we dive into the code, let's create a safety net for your blog. Head over to your Blogger dashboard, go to Theme -> Edit HTML, and click on Backup/Restore. Save a copy of your template for peace of mind.

Finding the Right Spot: A Treasure Hunt

Next, we'll need to find the perfect place to insert our new navigation links. Go to Theme -> Edit HTML. Use the "Ctrl+F" (or "Command+F" on Mac) shortcut to search for <data:postContent/>. This is where your post content ends. We'll insert our navigation code right after this line.

Building Your Navigation: Bricks and Mortar

Here's the code you'll need to paste right after the <data:postContent/> line:

<div class="post-navigation">
  <a href="<data:newerPageUrl/>" class="newer-posts">Newer Post</a>
  <a href="<data:blogUrl/>" class="home-link">Home</a>
  <a href="<data:olderPageUrl/>" class="older-posts">Older Post</a>
</div>

This code creates a new division with the class "post-navigation" to hold our links. Each link is styled 
with classes for easier customization.

Adding Some Style: The Finishing Touches

To make your navigation look stunning, let's add some CSS. In the same HTML editor, find the <head> section and paste the following:

.post-navigation {
text-align: center;
margin: 20px 0;
}

.post-navigation a {
display: inline-block;
padding: 10px 20px;
background-color: #f0f0f0;
border: 1px solid #ccc;
text-decoration: none;
color: #333;
}

This CSS will center the navigation, style the links as buttons, and give them a basic look. Feel free to experiment with different colors, fonts, and spacing to match your blog's style.Once you've made these changes, click "Save template." 

That's it! You've successfully added and styled your "Newer," "Home," and "Older" post links. Drop your blog link in the comment below once you succeed okay? ;)

Email Post

Comments

Post a Comment