HOW TO: CUSTOMIZE THE "NEWER + OLDER POSTS" ON BLOGGER

How To: Customize the Newer + Older Posts Links in Blogger, blog tutorials, coding tutorial, customize blogger, blog design

Fifteen days. Fifteen days without blogging. I can't believe I did it, but sometimes you just need to take a step back and breathe, right? To kick off my return from my blogcation. Making up words again. I'm sharing a really simple coding tutorial for my blogging friends that like to take designing into their own hands!

If you're brave enough to scroll on down to the bottom of this blog you'll see a little button that says "previous posts" ( there's a picture below instead because I love you guys and don't want you scrolling your life away! ). It's a small link, but the font is the same as other important links on the blog. Little details like that are important to the aesthetic of your blog. The default in Blogger for these links is "Newer /Home/ Older posts". With just a few coding adjustments, you can customize those links to say and look like whatever you want!

| REMEMBER TO BACKUP YOUR TEMPLATE BEFORE ALTERING THE HTML/CSS

The first thing to do is find the code that you want to alter. Login into Blogger + Template + Jump To Widget + Blog 1. You're going to look for <b:includable id='nextprev'>...</b:includable>. Click the black arrow to the left to expand. The code that you need to change will become visible. It looks like this..

|Replacing the Links with Images.

Replacing the links with images allows you to really be creative, because you can design the images/buttons any way that you would like. It gives you a lot of freedom. A simple code replacement that contains the direct image url to your image is all you need! Just replace <data:olderPageTitle/>, <data:newerPageTitle/>, and <data:homeMsg/> with this <img src="IMAGE URL"/>. You can see in the image above, on line 1520 and 1527, an example of this within the HTML.

<b:includable id='nextprev'>

<b:if cond='data:newerPageUrl'>

</a>

</span>

</b:if>

<b:if cond='data:olderPageUrl'>

</a>

</span>

</b:if>

</a>

| Changing the Text of the Links.

If you simply want to alter what the text of the links say, rather than replacing with an image, just change the text that is shown for newer posts, older posts, and the home link ( the blue text below ). You can change the text to anything that you would like "previous posts" " go back" "next page". Really anything.

<b:includable id='nextprev'>

<b:if cond='data:newerPageUrl'>

<data:olderPageTitle/>

</a>

</span>

</b:if>

<b:if cond='data:olderPageUrl'>

<data:newerPageTitle/>

</a>

</span>

</b:if>

<data:homeMsg/>

</a>

There you go! You're one step closer to being a blog designer! Messing around with code can seem daunting when you're unfamiliar, but it really isn't so hard once you get the hang of it. So have fun and happy coding!