Cara Membuat Navigasi Next Dan Previous Dengan Judul Artikel Pada Blogger

Salah satu elemen penting dalam navigasi adalah tombol "Next" dan "Previous" yang memungkinkan pengguna untuk melanjutkan atau kembali ke konten sebelumnya. Namun, navigasi ini tidak hanya terbatas pada fungsi praktisnya. Dalam artikel ini, kami akan menggali lebih dalam tentang navigasi "Next" dan "Previous" dalam website dan mengungkap aspek-aspek uniknya yang melampaui sekadar fitur sederhana.

1. Melampaui Batasan Linearitas:

Navigasi "Next" dan "Previous" seringkali dikaitkan dengan urutan linear dalam membaca atau menavigasi sebuah website. Namun, pendekatan ini dapat berubah dengan desain yang inovatif. Beberapa website menggunakan algoritma atau konten terkait untuk menawarkan pengalaman non-linear. Dengan cara ini, tombol "Next" dan "Previous" dapat membimbing pengguna untuk menjelajahi berbagai topik terkait dan memperkaya pengalaman mereka.

2. Pengaruh Desain Visual:

Tombol "Next" dan "Previous" bukan hanya elemen teks sederhana di halaman website. Desainer memiliki kebebasan untuk menciptakan tampilan yang unik dan menarik untuk tombol-tombol ini. Mereka dapat menggunakan ikon, animasi, atau bahkan efek interaktif untuk menarik perhatian pengguna. Desain yang kreatif ini dapat memberikan pengalaman yang lebih menarik dan intuitif bagi pengguna yang ingin menjelajahi lebih lanjut atau kembali ke konten sebelumnya.

3. Peningkatan Fungsi Pencarian:

Navigasi "Next" dan "Previous" juga dapat berperan dalam meningkatkan fungsi pencarian pada website. Dengan menggunakan navigasi ini, pengguna dapat menjelajahi konten terkait atau versi sebelumnya dari suatu halaman dengan mudah. Fitur ini sangat berguna dalam kasus seperti membaca posting blog atau artikel yang memiliki bagian yang saling terkait. Pengguna dapat dengan cepat melompat ke entri sebelumnya atau selanjutnya tanpa perlu melakukan pencarian kembali.

4. Navigasi dalam Pembelajaran Online:

Dalam konteks pembelajaran online, navigasi "Next" dan "Previous" memiliki peran yang sangat penting. Mereka membantu pengguna berpindah antara modul, pelajaran, atau langkah-langkah dalam kursus online. Selain itu, mereka juga dapat memberikan umpan balik visual kepada pengguna tentang sejauh mana mereka telah berada dalam progres pembelajaran mereka. Dengan memanfaatkan navigasi "Next" dan "Previous" dengan bijak, pengguna dapat dengan mudah menavigasi dan memanfaatkan platform pembelajaran online secara efektif.

Cara Membuat Navigasi Next Dan Previous Dengan Judul Artikel Pada Blogger:

1. Silahkan masuk ke blogger lalu edit HTML, lalu salin kode CSS di bawah ini dan letakkan di atas kode ]]></b:skin> atau </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}

2. Salin kode di bawah ini dan letakkan di bawah kode <data:post.body/>

<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>

3. Jika Anda ingin mengubah text terlama dan terbaru, silahkan ubah kode value='custom teks' sesuka hati.

Kesimpulan: 

Jika template pada blogger Anda tidak menyediakan fitur ini maka lebih baik gunakan tutorial yang Guiknise ajarkan sebagai acuan, namun jika Anda memang sedang belajar membuat template maka ini adalah ajaran yang mudah dilakukan.