How to add Previous/Next buttons to SharePoint blogs posts?

Question

How to add Previous/Next buttons to SharePoint blogs posts so I can navigate to previous or next post ?

Answer 1

http://sprecipe.com/2016/04/02/pimp-my-sharepoint-episode-3-enhance-your-sharepoint-blogs-with-previousnext-buttons/

1. Disable Minimal Download Strategy Feature for blog site
2. Edit Posts.aspx page
3. Add a script editor webpart to this page
4. Paste the following script into the script editor and save the page.

Remarks:

• you should upload jQuery to your portal and change the reference in the script

• you have to change the name of the 'Posts' list in the script if your SharePoint is not in english

• There is another script on the blog where it displays the preview of titles in the buttons instead of just 'Previous/Next'

• Read the article for more details

  <!-- Jquery is required, upload it on your portal and replace following reference -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">        </script>
  
  <style>
      /* Styling buttons 
     I used a copy of SharePoint buttons default style, you may want to change it or directly inherit OOB buttons style. 
     Of course you can put style definition in an external file and import it here. */
  
  .CustomButton
  {
      width: 60px;
      padding:7px 10px;
      border:1px solid #ababab;
      background-color:#fdfdfd;
      background-color:#fdfdfd;
      font-family:"Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-serif;
      font-size:11px;
      color:#444;
      text-align:center;
  }
  
  .CustomButton:hover
  {
      border-color:#92c0e0;
      background-color:#e6f2fa;
      text-decoration:none;
  }
  
  .CustomButton:active
  {
      border-color:#2a8dd4;
      background-color:#92c0e0;
  }
  
  .CustomButton:visited
  {
      color:#444;
  }
  
  .CustomButtonPrevious
  {
      float:left;
  }
  
  .CustomButtonNext
  {
      float:right;
  }
  
  
  </style>
  
  
  <script type='text/javascript'>
  
  // Replace "Posts" by the name of Posts list in your language. (For my japanese friends:投稿) 
  POST_LIST_DISPLAY_NAME = 'Posts';
  
  // Query items to generate buttons
  function generatePaging() 
  { 
      // Retrieving context
      var clientContext = new SP.ClientContext.get_current();
  
      // Retrieving current item's parent list
      var list = clientContext.get_web().get_lists().getByTitle(POST_LIST_DISPLAY_NAME);
  
      // Retrieving current item's ID from URI
      var currentItemID = getParameterByName('ID');
  
      // For blogs, posts are ordered by PublishedDate (Descending) by default
      var camlQueryString = '<View><Query><OrderBy><FieldRef Name="PublishedDate" Ascending="TRUE" /></OrderBy></Query><ViewFields><FieldRef Name="ID" /><FieldRef Name="PublishedDate" /></ViewFields></View>';
  
      // Creating CamlQuery
      var camlQuery = new SP.CamlQuery();
      camlQuery.set_viewXml(camlQueryString);
  
      this.collListItem = list.getItems(camlQuery);       
      clientContext.load(this.collListItem);
  
      clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
  }
  
  // On success generate buttons from results
  function onQuerySucceeded(sender, args) 
  {
      var listItemInfo = '';
      var listItemEnumerator = collListItem.getEnumerator();
  
      // Retrieving current item's ID from URL
      var currentID = getParameterByName('ID');
  
      var previousID, nextID;
      var currentIsNext = false;
      var currentItemPublishedDate;
  
      while (listItemEnumerator.moveNext()) 
      {
          // Retrieving current item
          var listItem = listItemEnumerator.get_current();
  
          if (currentIsNext)
          {
              var nextItemPublishedDate = listItem.get_item('PublishedDate');
              var currentDate = new Date();
  
              if (nextItemPublishedDate < currentDate || nextItemPublishedDate.getTime() === currentDate.getTime())
                  nextID = listItem.get_item('ID');
  
              break;
          }
          else
          {
              if(listItem.get_item('ID') == currentID)
              {
                  currentItemPublishedDate = listItem.get_item('PublishedDate');
                  currentIsNext = true;
          }
          else
          {
              previousID = listItem.get_item('ID');
          }
      }
  }
  
  // Setting the location of paging area, you can choose another place on the page
  $("td.ms-blog-LeftColumn").append("<div id='CustomPaging' />");
  
  // if ID of previous item is found, create button
  if (previousID)
  {   
      // Add redirection link regarding current URL format
      if(document.URL.indexOf("?ID=") > -1)
          $("#CustomPaging").append("<a href='" + document.URL.replace("?ID=" + currentID, "?ID=" + previousID) + "' class='CustomButton CustomButtonPrevious'><< Previous</a>");
      else
          if(document.URL.indexOf("&ID=") > -1)
              $("#CustomPaging").append("<a href='" + document.URL.replace("&ID=" + currentID, "&ID=" + previousID) + "' class='CustomButton CustomButtonPrevious'><< Previous</a>");
  }
  
      // if ID of next item is found, create button
      if (nextID)
      {
          // Add redirection link regarding current URL format
          if(document.URL.indexOf("?ID=") > -1)
              $("#CustomPaging").append("<a href='" + document.URL.replace("?ID=" + currentID, "?ID=" + nextID) + "' class='CustomButton CustomButtonNext'>Next >></a>");
          else
              if(document.URL.indexOf("&ID=") > -1)
                  $("#CustomPaging").append("<a href='" + document.URL.replace("&ID=" + currentID, "&ID=" + nextID) + "' class='CustomButton CustomButtonNext'>Next >></a>");
      }
  }
  
  function onQueryFailed(sender, args) 
  {
      // In case where items cannot be retrieved
      //alert('Request failed. ' + args.get_message() + '\n' +     args.get_stackTrace());
  }
  
  // Function to retrieve parameter from URI
  function getParameterByName(name) {
  name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
  var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
  results = regex.exec(location.search);
  return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
  }
  
  // Register generatePaging function
   $(document).ready(function () {
      // Do not show buttons in dialog mode
      if(document.URL.indexOf("&IsDlg=1") == -1)
          SP.SOD.executeFunc('sp.js', 'SP.ClientContext', generatePaging);
  });
  
  </script>