'Next Article' with Blog Post

Not yet. I have a few ideas in my head but I haven't had a chance to try any out yet. If I figure anything out I will post it here.

I finally found a solution that works. It does require some HTML/javascript knowledge but I will post the example I am using with code commented. There may be better ways to do this but this is the best I came up with.

First we need to create a blank page that will list all of the blog post and the data we want. On this page you insert this code:

<ul class="blog-post-list">

    {module_blogpostlist,12345,1000, template="/settings/blog-list.tpl"}

</ul>

The above module could be broken down like so:

{module_blogpostlist, BLOG ID,NUMBER OF POST, PATH TO CUSTOM TEMPLATE}

In other words we use the blogpostlist module for a certain blog (BLOG ID) then we list all the post of the blog. I set it at a very high number as I want all blog post on one page. Then I define a custom template for the layout vs the default layout.

Note: Be sure in your head of this page you have:

<meta name="robots" content="noindex, nofollow" />

This is so this page doesn't show up in search results.

Now that we have the page setup lets define the custom template that we will use to list the info we need. Open a code editor, add the following code, then save as a .tpl file.

<li class="post-info" data-blog-post-ID="{tag_blogpostid}">

  <span class="link">{tag_itemurl_nolink}</span>

  <span class="title">{tag_blogposttitle_nolink}</span>

</li>

Lets break down each line:

Line 1: This is the Blog Post Id of each blog post.

Line 2: This is the URL of the blog post.

Line 3: This is the Blog Post Title without a link.

Once the files above are created and uploaded it is time to add code to the blog post itself.

Open up the Blog Post Details Layout:

• Admin Console: Site Manager > Module Templates > Blog Layouts
• SFTP & Develop Mode:  /Layouts/Blog/post.html

First we need to insert where we want the next and previous buttons to appear. I am adding the following code:

<div class="left next"></div>

 

<div class="right prev"></div>

 

<br class="clear">

Basically I am floating each div to the left or right then clearing the float with a break. All of this is in my CSS. The important part is the class of next and prev which will be used to insert the button which will link to the respective post.

Now to the Javascript. I add this below everything else in the Blog Post Details Layout. I commented each line of the javascript so you can see what I am doing. This method assumes you are using jQuery This has been tested using jQuery version 2.1.1.

<script>

$(function() {

    var blogID = "{tag_blogpostid}"; //Current Blog Post ID

    $.get( "/blog-data.html", function(data) { //Load Data from HTML Page of Blog Post - /blog-data.html is the path to the page we created earlier.

        var blogData = $(data), //Data from HTML

            blogCurrent = blogData.find("[data-blog-post-ID='" + blogID + "']"), //Find Data Attribute of Current Blog Post

            next = blogCurrent.prev(".post-info"), //Find Next (Newest) Blog Post Relative to Current Post

            prev =  blogCurrent.next(".post-info"), //Find Previous (Older) Blog Post Relative to Current Post

            nextLink = next.find( ".link" ).text(), //Pull Blog Post Link from next post

            nextTitle = next.find( ".title" ).text(), //Pull Blog Post Title from next post

            nextLength = nextTitle.length, //Testing for Next Title Length (See Below)

            prevLink = prev.find( ".link" ).text(), //Pull Blog Post Link from previous post

            prevTitle = prev.find( ".title" ).text(); //Pull Blog Post Title from previous post

            prevLength = prevTitle.length; //Testing for Previous Title Length (See Below)

          

            if (nextLength > 0){ //If statement is so we don't show a "Next Post" button when there is not a next post.

                //Insert HTML for the Next Post. Can be changed to match the code for your site.

                $( ".next" ).html( '<h4>Next Post</h4><a class="button radius black tiny" href="' + nextLink + '"><i class="fa fa-arrow-left"></i> ' +nextTitle+ '</a>' );

            }

            if (prevLength > 0){ //If statement is so we don't show a "Previous Post" button when there is not a previous post.

                //Insert HTML for Previous Post.  Can be changed to match the code for your site.

                $( ".prev" ).html( '<h4 class="text-right">Previous Post</h4><a class="button radius black tiny" href="' + prevLink + '">' +prevTitle+ ' <i class="fa fa-arrow-right"></i></a>' );

            }

    });

});

</script>

Now you have a Next and Previous Post buttons.

Hope this helps others.

-Lynda