Replacing Next and Previous with Article Post Titles

byNiaDzgn -

 


By God NiaDzgn

Changing or replacing the Next and Previous posts or Older Posts and Newer Posts with the title on the blogger, he said, so that our blog is more SEO Friendly. There's some truth to that too. The reason is that, if only those posts are displayed on the buttons, namely the Newer Post and Older Post, the reader will not know what they will see next on the two buttons.


This replacement is indeed suitable to be one On-page SEO optimization. Article titles written on Next and Previous are more likely to invite clicks when compared to just Next Prev or Newer Post and Older Post only. Readers never know what is contained in the outgoing link from the next and prev posts. Visitors will be lazy to click if they are not provoked by a good title.


If your blog post contains two posts, namely Next and Prev, then rest assured that the post will very rarely get clicks. So to make it more SEO, changing the link to the title of the next and previous post is better and easier for your blog visitors to understand.


If you are interested in changing it, then you can immediately put it into practice in the tutorial below.


How to Change Next Prev to Blog Article Post Title

Some important things that must be considered so that this newer post and older post change can be successful, you must follow the steps correctly.


1. Make sure your template already has Jquery

Try to use the latest jquery which is an example like this.


If not, please enter this Jquery code before </head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" async="async"/>

2. Find the code

  <b:includable id='nav-post'> 


Please search for the code. Use CTRL + F to make searching easier. If you have found it, delete it and replace everything with the code below

<b:includable id='nav-post'>
  <b:if cond='data:view.isPost'>
    <div class='blog-pager' id='blog-pager'>
      <b:if cond='data:newerPageUrl'>
        <span id='blog-pager-newer-link'>
          <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'>Newer</a>
        </span>
      </b:if>
      <b:if cond='data:olderPageUrl'>
        <span id='blog-pager-older-link'>
          <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>Older</a>
        </span>
      </b:if>
      <a class='home-link' expr:href='data:blog.homepageUrl'> Home</a>
      <b:if cond='data:mobileLinkUrl'>
        <div class='blog-mobile-link'>
          <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
        </div>
      </b:if>
    </div>
    <div class='clear'/>
  </b:if>
</b:includable>


If there is no search for this code <b:includable id='postPagination'>

and replace it with this

<b:includable id='postPagination'>
  <b:if cond='data:view.isPost'>
    <div class='blog-pager' id='blog-pager'>
      <b:if cond='data:newerPageUrl'>
        <span id='blog-pager-newer-link'>
          <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'>Newer</a>
        </span>
      </b:if>
      <b:if cond='data:olderPageUrl'>
        <span id='blog-pager-older-link'>
          <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>Older</a>
        </span>
      </b:if>
      <a class='home-link' expr:href='data:blog.homepageUrl'> Home</a>
      <b:if cond='data:mobileLinkUrl'>
        <div class='blog-mobile-link'>
          <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
        </div>
      </b:if>
    </div>
    <div class='clear'/>
  </b:if>
</b:includable>


For Viomagz templates and the like. Please search for this code   <b:includable id='mobile-nextprev'>. Delete the code then replace it with the code below



<b:includable id='mobile-nextprev'>
 <b:if cond='data:view.isPost'>
    <div class='blog-pager' id='blog-pager'>
      <b:if cond='data:newerPageUrl'>
        <span id='blog-pager-newer-link'>
          <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'>Newer</a>
        </span>
      </b:if>
      <b:if cond='data:olderPageUrl'>
        <span id='blog-pager-older-link'>
          <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>Older</a>
        </span>
      </b:if>
      <a class='home-link' expr:href='data:blog.homepageUrl'> Home</a>
      <b:if cond='data:mobileLinkUrl'>
        <div class='blog-mobile-link'>
          <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
        </div>
      </b:if>
    </div>
    <div class='clear'/>
  </b:if>
</b:includable>


3. Find this code This

  <b:includable id='postFooter' var='post'>

code is usually in the blog1 widget. If you find the code, then add this code to it  <b:include cond='data:view.isPost' name='postPagination'/>

so that the result is like this

<b:includable id='postFooter' var='post'>
  <div class='post-bottom'>
    <div class='post-footer float-container'>
      <b:include name='footerBylines'/>
      <b:include cond='data:view.isPost' name='postPagination'/>
      <b:include cond='data:widget.type == "Blog"' data='post' name='postFooterAuthorProfile'/>
    </div>
    <b:if cond='data:view.isSingleItem'>
        <b:include data='{ shareButtonClass: "post-share-buttons-bottom invisible", overridden: true }' name='maybeAddShareButtons'/>
    <b:else/>
      <b:include data='post' name='postFooterJumpLink'/>
    </b:if>
  </div>
</b:includable>

4. Install this CSS to make it look more attractive

/* Navigation Next Prev Blogger with Title by NiaDzgn.com */
#blog-pager a.home-link {display:none}
#blog-pager {margin:20px 0px; display:inline-block; width:100%;}
#blog-pager a.blog-pager-newer-link, #blog-pager a.blog-pager-older-link {font-weight:600; font-size:16px; padding:0px; overflow:hidden; line-height:initial; display:block; width:100%; border:0px; background:transparent;}
#blog-pager a.blog-pager-newer-link {padding-right:5px;}
#blog-pager a.blog-pager-older-link {padding-left:5px;}
.blog-pager-newer-link span:first-child, .blog-pager-older-link span:first-child {font-size:20px; color:#000; text-transform:uppercase;}
.blog-pager-newer-link span:last-child, .blog-pager-older-link span:last-child{display:block; line-height:24px; font-weight:400; text-transform:none;}
#blog-pager a.blog-pager-newer-link:hover, #blog-pager a.blog-pager-older-link:hover{color:#ff5722; background:transparent;}
#blog-pager-newer-link {float:left; text-align:left; width:50%;}
#blog-pager-older-link {float:right; text-align:right; width:50%;}
#blog-pager-older-link span:first-child::after {margin-right:-10px; width:35px; height:35px; vertical-align:-10px; display:inline-block; transition:all .3s ease; background:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='%231d2129'/></svg>") no-repeat; content:''}
#blog-pager-newer-link span:first-child:before {margin-left:-10px; width:35px; height:35px; vertical-align:-10px; display:inline-block; transition:all .3s ease; background: url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z' fill='%231d2129'/></svg>") no-repeat; content:''}
@media only screen and (max-width:640px){
  #blog-pager {display:block;}
  #blog-pager-newer-link, #blog-pager-older-link {float: none; width: 100%; display: block; text-align: center;}
  #blog-pager-older-link {margin-top:20px;}
}


5. Finally, add this script before

  </body>

<b:if cond='data:view.isPost'>
  <script> //<![CDATA[
      !function() {
      var next = 'Next';
      var prev = 'Previous';
      eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('C c=["\\g\\s\\B\\i\\u\\n\\j\\k\\g\\n\\e\\h\\j\\f\\e\\H\\e\\h\\j\\i\\m\\f\\z","\\g\\s\\B\\i\\u\\n\\j\\k\\g\\n\\e\\h\\j\\u\\i\\A\\e\\h\\j\\i\\m\\f\\z","\\x\\h\\e\\t","\\g\\d\\d\\h","\\p\\l\\k\\g\\f\\o","\\p\\v\\l\\k\\g\\f\\o\\J\\p\\l\\k\\g\\f\\o","\\d\\e\\I\\d","\\t\\m\\h\\l\\d","\\s\\e\\f\\d\\h\\E\\j\\d\\m\\d\\i\\e","\\t\\m\\f\\A","\\p\\v\\l\\k\\g\\f\\o","\\x\\d\\G\\i","\\n\\e\\d"];C a=$(c[0]),b=$(c[1]);$[c[y]](a[c[3]](c[2]),w(r){a[c[q]](c[4]+F+c[5]+$(r)[c[9]](c[8])[c[7]]()[c[6]]()+c[D])},c[q]);$[c[y]](b[c[3]](c[2]),w(r){b[c[q]](c[4]+K+c[5]+$(r)[c[9]](c[8])[c[7]]()[c[6]]()+c[D])},c[q])',47,47,'||||||||||||_0x9c5e|x74|x65|x6E|x61|x72|x6C|x2D|x70|x73|x69|x67|x3E|x3C|11|_0x42fcx3|x2E|x66|x6F|x2F|function|x68|12|x6B|x64|x62|var|10|x79|next|x6D|x77|x78|x20|prev'.split('|'),0,{}));
    }();
  //]]> </script>
</b:if>


VariableInformation
var nextDefaults: Next.
Posts to navigate to the next article.
was prevDefaults: Previous.
Posts to navigate to the previous article.


Thus the blogging tutorial this time about How to Replace Next Previous with the Title of Blogger Posts so that the blog becomes more SEO Friendly. May be useful. Thanks


Source code:https://www.igniel.com/2018/11/navigasi-next-prev-pakai-judul.html


Tags:

NiaDzgn

Don't wait to be perfect to dare to start, because we have procrastinated too much just for fear of failure.

You might like

View all
Previous Post Next Post
Share to other apps
Copy Post Link