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.

5 places to move "older" and "newer posts" on blogger

View demo.


This is a continuation of rename "older posts" and "newer posts" to post titles on blogger. This time, let's move them to different sections of the post page.



move older and newer posts on blogger


How can we make "older post" and "newer post" appear on post page only?
Post Page, the landing page for each and every blogger post.

First, let's remove it from blogger homepage. Dont forget to 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'/>


DELETE the highlighted line: <b:include name='nextprev'/>.
5. SAVE TEMPLATE.

remove older and newer post from blogger homepage


THE CODE.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include name='nextprev'/>
</b:if>


what it means.
<b:if cond='data:blog.pageType == &quot;item&quot;'> if the page type is "item" page or also known as "post" page,
<b:include name='nextprev'/> show or "include" next and previous links


Where can we strategically place "previous post" and "next post" inside the post page?
-above title
-below title
-below post body
-on footer section
-above comments

places to move blog pager on blogger

Before we move them, make sure to:
1. Backup your template as always.
2. Go to EDIT HTML page.
3. Tick EXPAND WIDGET TEMPLATES.

enable expand widget templates mode

Let's get on with it. To move "older/previous posts" and "newer/next posts"..


.. ABOVE TITLE.
older posts and newer posts above the title

1. Press CTRL + F, search for <b:includable id='post' var='post'>
2. BELOW that line, add the code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include name='nextprev'/>
</b:if>


It will look something like this:

how to move older posts and newer posts above the post title

3. SAVE TEMPLATE.

older posts and newer posts above blogger post title


.. BELOW TITLE.
older posts and newer posts below the title
1. Press CTRL + F, search for <div class='post-header'>
2. ABOVE that line, add the code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include name='nextprev'/>
</b:if>


It will look something like this:

how to move older posts and newer posts below the post title

3. SAVE TEMPLATE.

older posts and newer posts below blogger post title



.. BELOW POST BODY.
older posts and newer posts below the post body
1. Press CTRL + F, search for <div class='post-footer'>
2. ABOVE that line, add the code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include name='nextprev'/>
</b:if>


It will look something like this:

how to move older posts and newer posts below the post body

3. SAVE TEMPLATE.

older posts and newer posts below blogger post


.. ON FOOTER SECTION.
older posts and newer posts on footer section

1. Press CTRL + F, search for <div class='post-footer'>
2. BELOW that line, add the code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include name='nextprev'/>
</b:if>


It will look something like this:

how to move older posts and newer posts to footer section


3. SAVE TEMPLATE.

older posts and newer posts on blogger footer section



.. ABOVE COMMENTS.
older posts and newer posts above comment form

1. Press CTRL + F, search for <b:includable id='comments' var='post'>
2. BELOW that line, add the code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include name='nextprev'/>
</b:if>


It will look something like this:

how to move older posts and newer posts above comment form

3. SAVE TEMPLATE.

older posts and newer posts above blogger comment form


Bugs, Errors, Glitches, Fixes when moving "older" and "newer" post links.
There are two of them.
Search for <b:include name='nextprev'/>. There should only be one.

It's missing. I can't find it.
Search for <b:include name='nextprev'/>. If there is none, make sure that the EXPAND WIDGET TEMPLATES is ticked. If it's still missing, choose from the above options where you'd like it to appear and follow the instructions.

I prefer my "older/previous post" on the left, "newer/next post" on the right.
You can switch their places easily by using Blogger's $startSide and $endSide. See Blogbulk's tutorial on this.


Other "Older Posts" and "Newer Posts" Tweaks.
4 ways to hide older posts and newer posts on blogger
2 ways to rename older and newer posts to post title on blogger


Related Blog and Discussion.
Customizing Blogger Post Navigation Script
"Home" "Older and "Newer" links
share. comment. subscribe. link.


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


<< 9 Shared Thoughts >>


czl
August 20, 2011 at 1:14 PM

Thanks! This was just what I needed. Appreciate the step-by-step!

ThatsBlog.com
August 23, 2011 at 12:35 AM

Hi, thanks for your submission to Blog Carnival: Blogging: Ninety Eighth edition. Your post is now published:

http://thatsblog.com/blog-carnival-blogging/blog-carnival-blogging-ninety-eighth-edition

-ThatsBlog.com

ria39
September 1, 2011 at 1:08 AM

dank ik ga het proberen

ria

Fernán
October 28, 2011 at 9:47 AM

thanks...i have a problem and i don't know how i got here. in my blog http://www.losojosdeella.com i've set the navigation buttons to appear only on 'item' types, but i recently changed the whole structure of my blog and i would like to display a "next posts" and "previous posts" also in index pages (for instance, i search 5 latest posts on a label and once i get the list with thumbnails and snippets i want to be able to navigate to next 5 ones)


but if i disable "" i get a next/previous button after each post of the 5 posts displayed when searching a label....


how can i do this???


million thanks!!!

Phone Guru
September 8, 2012 at 9:43 PM

Thanks a lot !!!

www.noncamerasmartphones.com

Kieran Pavel
November 12, 2012 at 2:20 AM
This comment has been removed by the author.
jess
December 20, 2012 at 5:12 PM

i am using arrow images for my previous and next links. any suggestions on how to move them to the left and right margins of the page?

Danish Daniel
February 2, 2016 at 2:41 AM

I don’t even know how I ended up here, but I thought this post was
great.

Ace Utilities Keygen

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.