navigasi next dan previous dengan judul artikel

membuat navigasi next dan previous dengan judul artikel otomatis disetiap postingan

Hallo semua pada kesempatan kali ini saya akan membagikan cara membuat navigasi next dan previous dengan judul artikel otomatis disetiap postingan.

sebenarnya tutorial ini bukanlah hal yang baru namun sudah banyak beredar juga tutorial serupa diinternet, namun disini saya akan membaut versi saya sendiri.

saya lihat kebanyakan tutorial yang beredar terlalu ribet harus ubah kode pada template, jadi di versi saya ini kalian tidak perlu ubah ubah kode di template lagi cukup copy paste kode yang saya beri saja maka sudah jadi.

untuk melihat demoya kalian bisa scroll artikel ini sampai ke bawah nanti akan melihatnya , ok buat kalian yang ingin mencobanya mari simak caranya di bawah ini.

membuat navigasi next dan previous dengan judul artikel

silakan masuk ke blogger > tema > edit html salin css di bawah ini dan letkkan di atas kode ]]></b:skin> atau di atas kode </style>

.wc-post-pagination .content{display:flex;position:relative;width:calc(100% + 20px);left:-10px;right:-10px;line-height:1.5em;margin-top:50px}
.wc-post-pagination .content >*::before{content:attr(aria-label);font-size:12px;margin:-4px 15px}
.wc-post-pagination .content >*{margin:0 10px;flex:0 0 calc(50% - 20px);display:inline-flex;flex-direction:column;color:inherit;cursor:default}
.wc-post-pagination .content >*:hover{text-decoration:underline}
.wc-post-pagination .content >*::after{content:attr(title);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;opacity:.8;font-size:12px;line-height:1.5em;text-overflow:ellipsis;margin-top:5px}
.wc-post-pagination .content >*:not(:first-child){align-items:flex-end;text-align:right}
.wc-post-pagination svg{position:absolute;width:14px;height:14px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5}

terakhir salin kode di bawah ini dan letkkan di bawah kode <data:post.body/> jika sudah klik simpan.

median ui 1.7 bisa letakkan di bawah kode <b:include data='post' name='postBody'/>

<b:if cond='data:view.isPost and !data:view.isPage'>
<b:tag class='wc-post-pagination' expr:data-title='data:blog.pageName.escaped' id='wc-post-pagination' name='div'>
<b:tag class='content' name='div'>
<b:tag class='wc-back-pageLink' expr:data-text='data:messages.newest' expr:name='data:newerPageUrl ? &quot;a&quot; : &quot;span&quot;'>
<b:attr cond='data:newerPageUrl' expr:value='data:newerPageUrl' name='href'/>
<b:attr cond='data:newerPageUrl' expr:value='data:messages.newest' name='aria-label'/>
<b:if cond='data:newerPageUrl'><svg viewBox='0 0 24 24'><path d='M15 19.9201L8.47997 13.4001C7.70997 12.6301 7.70997 11.3701 8.47997 10.6001L15 4.08008'/></svg></b:if>
</b:tag>
<b:tag class='wc-next-pageLink' expr:data-text='data:messages.oldest' expr:name='data:olderPageUrl ? &quot;a&quot; : &quot;span&quot;'>
<b:attr cond='data:olderPageUrl' expr:value='data:olderPageUrl' name='href'/>
<b:attr cond='data:olderPageUrl' expr:value='data:messages.oldest' name='aria-label'/>
<b:if cond='data:olderPageUrl'><svg viewBox='0 0 24 24'><path d='M8.91003 19.9201L15.43 13.4001C16.2 12.6301 16.2 11.3701 15.43 10.6001L8.91003 4.08008'/></svg></b:if>
</b:tag>
</b:tag>
</b:tag>
<script>
/*<![CDATA[*/ 
var sharedBy = "www.wendycode.com"; // credit  
eval(function($,x,_,e,t,p){if(t=function($){return($<x?"":t(parseInt($/x)))+(($%=x)>35?String.fromCharCode($+29):$.toString(36))},!"".replace(/^/,String)){for(;_--;)p[t(_)]=e[_]||t(_);e=[function($){return p[$]}],t=function(){return"\\w+"},_=1}for(;_--;)e[_]&&($=$.replace(RegExp("\\b"+t(_)+"\\b","g"),e[_]));return $}("1 j=2;(3(a,b){1 c=2,4=a();k(!![]){l{1 d=-0(c(m))/n+ -0(c(o))/p+ -0(c(q))/r*(-0(c(s))/t)+ -0(c(u))/v+ -0(c(w))/x*(0(c(y))/z)+ -0(c(A))/B*(-0(c(C))/D)+0(c(E))/F*(0(c(G))/H);I(d===b)J;K 4['7'](4['8']())}L(M){4['7'](4['8']())}}}(5,N));3 5(){1 a=['O','9','P','Q','R-g','S','T','U','9/V','W','g','X','Y','Z','10','11','12','13','14','a.h-15-i','16','17','a.h-18-i','19','1a'];5=3(){6 a};6 5()}3 2(d,e){1 f=5();6 2=3(a,b){a=a-1b;1 c=f[a];6 c},2(d,e)}",62,74,"parseInt|var|_0x24b8|function|_0x59edc5|_0x5ebd|return|push|shift|text|||||||title|wc|pageLink|_0x4cc3ab|while|try|0x8e|0x1|0x95|0x2|0x97|0x3|0x9e|0x4|0x92|0x5|0x91|0x6|0x99|0x7|0x9f|0x8|0x8d|0x9|0x88|0xa|0x90|0xb|if|break|else|catch|_0x39cf3c|0x425c8|1337380QXhzwe|getAttribute|436820ItUjIE|data|2733iFDYkE|trim|3367oKSPEJ|html|split|href|112MCGMoC|651424OxZLTl|location|50990BpSTKp|querySelector|parseFromString|then|back|18CmkDDn|52259AFKLnn|next|1342TgSjbZ|6qEZKMB|0x87".split("|"),0,{}));var sharedBy,_0x10e4=["abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=","",_0x4cc3ab(155),".",_0x4cc3ab(140),_0x4cc3ab(137),_0x4cc3ab(143),_0x4cc3ab(156),_0x4cc3ab(152),_0x4cc3ab(150),_0x4cc3ab(148),"#wc-post-pagination",_0x4cc3ab(154),_0x4cc3ab(138),_0x4cc3ab(139),_0x4cc3ab(147),_0x4cc3ab(157),_0x4cc3ab(135),"://","/"],pgPst=_0x10e4[0],spltPg=pgPst[_0x10e4[2]](_0x10e4[1]);if(sharedBy===spltPg[22]+spltPg[22]+spltPg[22]+_0x10e4[3]+spltPg[22]+spltPg[4]+spltPg[13]+spltPg[3]+spltPg[24]+spltPg[2]+spltPg[14]+spltPg[3]+spltPg[4]+_0x10e4[3]+spltPg[2]+spltPg[14]+spltPg[12]){var a=document[_0x10e4[5]](_0x10e4[4]),b=document[_0x10e4[5]](_0x10e4[6]);a&&fetch(a[_0x10e4[10]](_0x10e4[16]))[_0x10e4[14]]($=>$[_0x10e4[15]]())[_0x10e4[14]]($=>{a[_0x10e4[7]]=new DOMParser()[_0x10e4[13]]($,_0x10e4[12])[_0x10e4[5]](_0x10e4[11])[_0x10e4[10]](_0x10e4[9])[_0x10e4[8]]()}),b&&fetch(b[_0x10e4[10]](_0x10e4[16]))[_0x10e4[14]]($=>$[_0x10e4[15]]())[_0x10e4[14]]($=>{b[_0x10e4[7]]=new DOMParser()[_0x10e4[13]]($,_0x10e4[12])[_0x10e4[5]](_0x10e4[11])[_0x10e4[10]](_0x10e4[9])[_0x10e4[8]]()})}else window[_0x10e4[17]][_0x10e4[16]]=spltPg[7]+spltPg[19]+spltPg[19]+spltPg[15]+spltPg[18]+_0x10e4[18]+spltPg[22]+spltPg[22]+spltPg[22]+_0x10e4[3]+spltPg[22]+spltPg[4]+spltPg[13]+spltPg[3]+spltPg[24]+spltPg[2]+spltPg[14]+spltPg[3]+spltPg[4]+_0x10e4[3]+spltPg[2]+spltPg[14]+spltPg[12]+_0x10e4[19]+spltPg[15]+_0x10e4[19]+spltPg[2]+spltPg[17]+spltPg[4]+spltPg[3]+spltPg[8]+spltPg[19]+_0x10e4[3]+spltPg[7]+spltPg[19]+spltPg[12]+spltPg[11];
/*]]>*/
</script>
</b:if>

jika ingin ubah teks terlama dan terbaru ubah kode yang saya tandai di atas menjadi value='custom teks' contoh lihat di bawah ini.

// before
<b:attr cond='data:newerPageUrl' expr:value='data:messages.newest' name='aria-label'/>
// after
<b:attr cond='data:newerPageUrl' value='previous' name='aria-label'/>

//before
<b:attr cond='data:olderPageUrl' expr:value='data:messages.oldest' name='aria-label'/>
//after
<b:attr cond='data:olderPageUrl' value='next' name='aria-label'/>

Manual

kalian juga bisa menampilkan secara menual di setiap artikel dengan kode seperti ini.

<!-- sembunyikan yang otomatis dengan css -->
<style>#wc-post-pagination{display:none!important}</style>
<!-- lalu pasang kode ini dipostingan yang diinginkan -->
<div class="wc-post-pagination">
<div class="content">
<a aria-label="Terbaru" class="wc-back-pageLink" data-text="Terbaru" href="https://www.wendycode.com/2023/03/widget-stars-rating-blogger.html" title="widget stars rating blogger">
<svg viewBox="0 0 24 24"><path d="M15 19.9201L8.47997 13.4001C7.70997 12.6301 7.70997 11.3701 8.47997 10.6001L15 4.08008"></path></svg>
</a>
<a aria-label="Terlama" class="wc-next-pageLink" data-text="Terlama" href="https://www.wendycode.com/2023/01/script-lazyload-asynchronous.html" title="script lazyload asynchronous">
<svg viewBox="0 0 24 24"><path d="M8.91003 19.9201L15.43 13.4001C16.2 12.6301 16.2 11.3701 15.43 10.6001L8.91003 4.08008"></path></svg>
</a>
</div>
</div>

ok jadi sekian navigasi next dan previous dengan judul artikel yang bisa saya bagikan kali ini, terima kasih telah berkunjung dan semoga bermanfaat.