vorige/bolgende knoppen


I would like to have links for the next and previous post in the end of each blog text. I'm using Emporio. I couldn't find any setting / gadget to get the links. Do I need to change html-code?

Hi, welcome to the Blogger forum,




Step 1 :

Open the XML editor and locate the Blog1 widget
.

Step 2 :

In the "postPagination" inclusion, add the red codes

<b:includable id='postPagination'>
  <div class='blog-pager container' id='blog-pager'>
    <b:include cond='data:newerPageUrl' name='super.previousPageLink'/>
    <b:include cond='data:olderPageUrl' name='super.nextPageLink'/>
    <b:include cond='data:view.url != data:blog.homepageUrl' name='super.homePageLink'/>
  </div>
</b:includable>


Step 3 :

In the "main" inclusion, add the red codes :

<b:includable id='main'>
          <b:include name='noContentPlaceholder'/>
          <b:include name='super.main'/>
          <b:include cond='data:view.isPost' name='postPagination'/>
</b:includable>



Step 4 :

And in the CSS editor, add these styles :


.blog-pager-newer-link { float: left; }
.blog-pager-older-link { float: right; }


Zie ook: https://productforums.google.com/forum/#!topic/blogger/G7W2cR1t04g



Stackoverflow geeft nog deze suggestie:
https://stackoverflow.com/questions/50440539/blogger-notable-template-next-article-and-previous-article-buttons-missing

In one of the newer Google blogger templates, Notable, when you're viewing a blog post the Next Article and Previous Article buttons are not present.
This post explained how to add pagination buttons onto the blog homepage to view the next listing of articles and the previous listing of articles but didn't get into adding similar buttons on a blog post to view the next and previous article.
Any idea how to add this functionality? I'm just looking to add 'Previous Article' and 'Next Article' buttons to individual blog posts.
EDIT Updated images for hopefully more clarity.


I believe I've found the answer. Just needed to add
        <b:if cond='data:blog.pageType == "item"'>
          <b:include cond='data:newerPageUrl' name='previousPageLink'/>
          <b:include cond='data:olderPageUrl' name='nextPageLink'/>
        </b:if>
Within this code
      <div class='post-bottom'>
        <div class='post-footer'>
          <!-- Footer bylines -->
          <b:include name='footerBylines'/>
        </div>
          <b:include cond='data:view.isSingleItem and data:widget.type == &quot;Blog&quot;' data='{ shareButtonClass: &quot;post-share-buttons-bottom&quot;, overridden: true }' name='maybeAddShareButtons'/>
          <b:include cond='data:view.isMultipleItems or data:widget.type == &quot;PopularPosts&quot;' data='post' name='postJumpLink'/>
      </div>
Like so
      <div class='post-bottom'>
        <div class='post-footer'>
          <!-- Footer bylines -->
          <b:include name='footerBylines'/>
        </div>
          <b:include cond='data:view.isSingleItem and data:widget.type == &quot;Blog&quot;' data='{ shareButtonClass: &quot;post-share-buttons-bottom&quot;, overridden: true }' name='maybeAddShareButtons'/>
          <b:include cond='data:view.isMultipleItems or data:widget.type == &quot;PopularPosts&quot;' data='post' name='postJumpLink'/>
          <b:if cond='data:blog.pageType == "item"'>
            <b:include cond='data:newerPageUrl' name='previousPageLink'/>
            <b:include cond='data:olderPageUrl' name='nextPageLink'/>
          </b:if>
      </div>

Nog een mogelijke oplossing: 


https://blog.irsah.com/2018/02/soho-theme-add-newer-next-home-and.html


By default for the new responsive Blogger themes ie Soho, Contempo, Notable & Emporio do not provide a Newer or Home or Older links to navigate in Post pages.

In this article we will show you how to add Newer/Next , Home and Older/Previous navigation links in post pages for Soho responsive Blogger Theme.

Earlier we have discussed on how to add post snippet or your entire blog post text for homepage or index pages for Soho theme. The full working tutorial to add Soho theme post snippets is available here.


Before proceeding, Backup your current theme to your computer using the Backup/Restore button.

  • Go to Theme > Edit HTML
  • Click Jump to Widget
  • Select Blog1 widget
  • Expand <b:includable id='main'>...</b:includable> by clicking the small black triangle
  • Find below..

    .... {{ codes }} ...
    <b:include name='super.main'/>
  </b:with>
</b:with>

  • Add highlighted green like so..

    .... {{ codes }} ...
    <b:include name='super.main'/>
  </b:with>
</b:with>
<b:if cond='data:view.isPost'>
  <b:include name='postPagination'/>
</b:if>

  • click Save Theme


Add the CSS to style your Newer, Home and Older post navigation links.

  • Go to Theme > Customize
  • Select Advanced
  • Find & select Add CSS
  • Add below...

.blog-pager .blog-pager-newer-link,
.blog-pager .blog-pager-older-link, 
.blog-pager .home-link {
  display: inline-block;
}

.blog-pager .blog-pager-newer-link {
  float: left;
}

.blog-pager .blog-pager-older-link {
  float:right;
}

.blog-pager {
  text-align:center;
  overflow:hidden;
}

  • click Apply to Blog.
  • Refresh your post pages to view the changes.

The above tutorials was tested and working and can be viewed here.

Hope it helps!

Reacties

Populaire posts van deze blog

gadgets in footer and sidebar in mobile version

Reisverslagen en camperverhalen

Volgende en Vorige aan het einde van blogpost