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>
<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>
<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; }
.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.
add a comment
0
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 == "Blog"' data='{ shareButtonClass: "post-share-buttons-bottom", overridden: true }' name='maybeAddShareButtons'/>
<b:include cond='data:view.isMultipleItems or data:widget.type == "PopularPosts"' 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 == "Blog"' data='{ shareButtonClass: "post-share-buttons-bottom", overridden: true }' name='maybeAddShareButtons'/>
<b:include cond='data:view.isMultipleItems or data:widget.type == "PopularPosts"' 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.
Add the CSS to style your Newer, Home and Older post navigation links.
The above tutorials was tested and working and can be viewed here.
Hope it helps!
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
Een reactie posten