Cara Menambah Navigasi Next dan Previos di Blogspot

menamhakan tombol next previos di blog, tutorial blogspot, cara merubah tampilan menu next di dalam artikel blogspot

 


Cara Menambah Navigasi Next dan Previos di Blogspot - Navigasi next dan previos berfungsi untuk menampilkan artikel sebelum dan selanjutnya di artikel. Di tutorial kali ini admin akan memberikan dua cara mengganti next dan previos tersebut.

Sebelum memasang tombol next dan previos, pertama perhatikan terlebih dahulu apakah blog kamu sudah terpasang jQuery, Fungsinya agar code yang kita tambahkan tersebut dapat berjalan dengan baik. Apa bila code tersebut belum terpasang, kamu dapat memasangnya tepat di atas </head>

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

Selanjutnya tambah code ini tepat sesudah <b:includeable id='main'> 
<b:includable id='nav-post'>
    <div class='nav-post'>
        <div class='pagination-left'>
            <b:if cond='data:newerPageUrl'>
                <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'/>
                <b:else/>
                <a href='javascript:;' title='No more post'>
                    <div class='pagination-header'><span class='pagination-icon'><svg viewBox='0 0 24 24'><path d='M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z' fill='currentColor'/></svg></span><span class='pagination-title'>Previous Post</span></div>
                    <div class='pagination-content'><span class='pagination-title'>This Is The Current Newest Page</span></div>
                </a>
            </b:if>
        </div>
        <div class='pagination-right'>
            <b:if cond='data:olderPageUrl'>
                <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'/>
                <b:else/>
                <a href='javascript:;' title='No more post'>
                    <div class='pagination-header'><span class='pagination-title'>Next Post</span><span class='pagination-icon'><svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='currentColor'/></svg></span></div>
                    <div class='pagination-content'><span class='pagination-title'>This Is The Current Newest Page</span></div>
                </a>
            </b:if>
        </div>
    </div>
</b:includable>
Lalu cari kode berikut 
<b:includable id='post' var='post'>
Kemudian tambahkna kode berikut di 
<b:if cond='data:view.isPost'>
	<b:include name='nav-post'/>
</b:if>
Sehingga tampilanya seperi di bawah ini

b:includable id='post' var='post'>
  <article class='post hentry'.............
..........
..........
..........
  </article>
  <b:if cond='data:view.isPost'>
    <b:include name='nav-post'/>
  </b:if>
</b:includable>s
Aga tampilannya lebih menarik lagi kamu dapat menambahkan css di atas kode </style> atau </b:skin>
.nav-post{display:flex;flex-flow:row nowrap;margin:40px -20px 40px -20px;justify-content:space-between}
.nav-post > *{display:flex;flex:0 0 50%;max-width:50%;padding:0 20px}
.nav-post a{display:flex;flex:1;flex-flow:column nowrap;color:currentColor}
.nav-post .pagination-right .pagination-header{margin-left:auto}
.nav-post .pagination-header{display:flex;align-items:center;font-size:12px;font-weight:700;margin-bottom:15px;letter-spacing:.1em;text-transform:uppercase;color:#666}
.nav-post .pagination-content{display:flex;align-items:center;font-size:14px;font-weight:700;line-height:1.45}
.nav-post .pagination-right .pagination-content{flex-flow:row-reverse;text-align:right}
.nav-post .pagination-content .pagination-title{color:currentColor;text-decoration-line:underline;text-decoration-color:transparent;transition:all .3s cubic-bezier(.32,.74,.57,1)}
.nav-post .pagination-content .pagination-title:hover{color:#005af0;text-decoration-color:currentColor}
.nav-post .pagination-thumb{display:flex;flex-shrink:0;margin-right:12px;width:50px;height:50px}
.nav-post .pagination-right .pagination-thumb{margin-right:0;margin-left:12px}
.nav-post .pagination-thumb img{width:100%;height:100%;border-radius:50%;object-fit:cover}
@media (max-width:480px){.nav-post > *:not(:last-child){border-right:thin solid rgba(0,0,0,.07)}.nav-post .pagination-thumb{display:none}}
Lalu tambahkan kode di bawah ini tepat di atas </body>
L<b:if cond='data:view.isPost'>
<script>/*<![CDATA[*/
(function ($) { 
    var next = 'Next';
    var prev = 'Previous';
    var newerLink = $('a.blog-pager-newer-link'); var olderLink = $('a.blog-pager-older-link');
    $.get(newerLink.attr('href'), function (data) { var thumb = $(data)
            .find('.post-body')
            .length == 1 ? "<div class='pagination-header'><div class='pagination-icon'><svg viewBox='0 0 24 24'><path fill='currentColor' d='M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z'></path></svg></div><div class='pagination-title'>" +next+ "</div></div><div class='pagination-content'>" : "";
        newerLink.html(thumb + '<span class="pagination-title">' + $(data)
            .find('.post-title')
            .text() + '</span></div>') }, "html");
    $.get(olderLink.attr('href'), function (data2) { var thumb2 = $(data2)
            .find('.post-body')
            .length == 1 ? "<div class='pagination-header'><div class='pagination-title'>"+prev+"</div><div class='pagination-icon'><svg viewBox='0 0 24 24'><path fill='currentColor' d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z'></path></svg></div></div><div class='pagination-content'>" : "";
        olderLink.html(thumb2 + '<span class="pagination-title">' + $(data2)
            .find('.post-title')
            .text() + '</span></div>') }, "html") })(jQuery); /*]]>*/</script>
</b:if>
Atau dapat juga menambahkan kode ini, Silahkan pilih salah satunya saja 
 <b:if cond='data:view.isPost'>
<script>/*<![CDATA[*/
/*! PagiNav by HidayatCode | v1.0.0 - https://www.hidayatcode.com */
var next = 'Next';
var prev = 'Previous';
if (/.+\.html(\?m=1)?$/.test(location.href)) {
  var olderLink = document.getElementById('Blog1_blog-pager-older-link');
  if (olderLink) {
    getPageTitle(olderLink, setOlderPageTitle);
    function setOlderPageTitle(data){
      setPageTitle(data, olderLink, '')
    };
  }
  var newerLink = document.getElementById('Blog1_blog-pager-newer-link');
  if (newerLink) {
    getPageTitle(newerLink, setNewerPageTitle);
    function setNewerPageTitle(data){
      setPageTitle2(data, newerLink, '')
    };
  }
  function setPageTitle(data, pageLink, prefix, suffix) {
    if (data.feed.entry) {
      if (data.feed.entry.length > 0) {
        var title = data.feed.entry[0].title.$t;
      }
    }
    if (title) {
      pageLink.innerHTML = "<div class='pagination-header'><div class='pagination-title'>"+next+"</div><div class='pagination-icon'><svg viewBox='0 0 24 24'><path fill='currentColor' d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z'></path></svg></div></div><div class='pagination-content'><span class='pagination-title'>"+ data.feed.entry[0].title.$t +"</span></div>";
    }
  }
  function setPageTitle2(data, pageLink, prefix, suffix) {
    if (data.feed.entry) {
      if (data.feed.entry.length > 0) {
        var title = data.feed.entry[0].title.$t;
      }
    }
    if (title) {
      pageLink.innerHTML = "<div class='pagination-header'><div class='pagination-icon'><svg viewBox='0 0 24 24'><path fill='currentColor' d='M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z'></path></svg></div><div class='pagination-title'>"+prev+"</div></div><div class='pagination-content'><span class='pagination-title'>"+ data.feed.entry[0].title.$t +"</span></div>";
    }
  }
  function getPageTitle(pageLink, callback) {
      var pathname = pageLink.getAttribute('href').replace(location.protocol + '//' + location.hostname, '');
      var script = document.createElement('script');
      script.src = '/feeds/posts/summary?alt=json-in-script&max-results=1&redirect=false&path='+pathname+'&callback='+callback.name+'';
      document.body.appendChild(script);
  }
}/*]]>*/</script>
</b:if>
Lalu jika kamu ingin menambahkan animasi gambar, ganti jQuery atau javascript tadi dengan kode yang di bawah ini
 
<script>/*<![CDATA[*/
(function ($) { 
    var next = 'Next';
    var prev = 'Previous';
    var newerLink = $('a.blog-pager-newer-link'); var olderLink = $('a.blog-pager-older-link');
    $.get(newerLink.attr('href'), function (data) { var thumb = $(data)
            .find('.post-body')
            .length == 1 ? "<div class='pagination-header'><div class='pagination-icon'><svg viewBox='0 0 24 24'><path fill='currentColor' d='M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z'></path></svg></div><div class='pagination-title'>Previous Post</div></div><div class='pagination-content'><span class='pagination-thumb'><img alt='" + $(data)
            .find('.post-title')
            .text() + "' src='" + $(data)
            .find('.post-body img:first').attr('src', function(i, src) {return src.replace(/.*?:\/\//g , "//").replace( 's1600', 's386' );})
            .attr('src') + "' class='image' width='386' height='170'/></span>" : "";
        newerLink.html(thumb + '<span class="pagination-title">' + $(data)
            .find('.post-title')
            .text() + '</span></div>') }, "html");
    $.get(olderLink.attr('href'), function (data2) { var thumb2 = $(data2)
            .find('.post-body')
            .length == 1 ? "<div class='pagination-header'><div class='pagination-title'>Previous Post</div><div class='pagination-icon'><svg viewBox='0 0 24 24'><path fill='currentColor' d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z'></path></svg></div></div><div class='pagination-content'><span class='pagination-thumb'><img alt='" + $(data2)
            .find('.post-title')
            .text() + "' src='" + $(data2)
            .find('.post-body img:first').attr('src', function(i, src) {return src.replace(/.*?:\/\//g , "//").replace( 's1600', 's386' );})
            .attr('src') + "' class='image' width='386' height='170'/></span>" : "";
        olderLink.html(thumb2 + '<span class="pagination-title">' + $(data2)
            .find('.post-title')
            .text() + '</span></div>') }, "html") })(jQuery);/*]]>*/</script> 
 <script>/*<![CDATA[*/
/*! PagiNav by HidayatCode.0 - https://www.hidayatcode.com */
var next = 'Next';
var prev = 'Previous';
if (/.+\.html(\?m=1)?$/.test(location.href)) {
  var olderLink = document.getElementById('Blog1_blog-pager-older-link');
  if (olderLink) {
    getPageTitle(olderLink, setOlderPageTitle);
    function setOlderPageTitle(data){
      setPageTitle(data, olderLink, '')
    };
  }
  var newerLink = document.getElementById('Blog1_blog-pager-newer-link');
  if (newerLink) {
    getPageTitle(newerLink, setNewerPageTitle);
    function setNewerPageTitle(data){
      setPageTitle2(data, newerLink, '')
    };
  }
  function setPageTitle(data, pageLink, prefix, suffix) {
    if (data.feed.entry) {
      if (data.feed.entry.length > 0) {
        var title = data.feed.entry[0].title.$t;
      }
    }
    if (title) {
      pageLink.innerHTML = "<div class='pagination-header'><div class='pagination-title'>"+next+"</div><div class='pagination-icon'><svg viewBox='0 0 24 24'><path fill='currentColor' d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z'></path></svg></div></div><div class='pagination-content'><span class='pagination-thumb'><img alt='" + olderLink + "' src='" + data.feed.entry[0].media$thumbnail.url + "'/></span><span class='pagination-title'>"+ data.feed.entry[0].title.$t +"</span></div>";
    }
  }
  function setPageTitle2(data, pageLink, prefix, suffix) {
    if (data.feed.entry) {
      if (data.feed.entry.length > 0) {
        var title = data.feed.entry[0].title.$t;
      }
    }
    if (title) {
      pageLink.innerHTML = "<div class='pagination-header'><div class='pagination-icon'><svg viewBox='0 0 24 24'><path fill='currentColor' d='M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z'></path></svg></div><div class='pagination-title'>"+prev+"</div></div><div class='pagination-content'><span class='pagination-thumb'><img alt='" + newerLink + "' src='" + data.feed.entry[0].media$thumbnail.url + "'/></span><span class='pagination-title'>"+ data.feed.entry[0].title.$t +"</span></div>";
    }
  }
  function getPageTitle(pageLink, callback) {
      var pathname = pageLink.getAttribute('href').replace(location.protocol + '//' + location.hostname, '');
      var script = document.createElement('script');
      script.src = '/feeds/posts/summary?alt=json-in-script&max-results=1&redirect=false&path='+pathname+'&callback='+callback.name+'';
      document.body.appendChild(script);
  }
}/*]]>*/</script> 

Lalu save