20230823 081030

Widget Next dan Previous Navigation Pada Blogspot

Oleh Diposting pada

Codepelajar – Navigasi adalah salah satu elemen penting dalam desain situs web yang mempengaruhi pengalaman pengguna secara keseluruhan. Ketika pengguna menjelajahi situs web Anda, penting untuk memastikan bahwa mereka dapat dengan mudah berpindah antara konten yang berbeda. Salah satu fitur navigasi yang sering digunakan adalah navigasi next dan previous.

Navigasi next dan previous memungkinkan pengguna untuk melompat dari satu halaman ke halaman lainnya dengan cepat dan mudah. Ini sangat berguna dalam konteks seperti blog, galeri foto, atau halaman konten terkait yang memerlukan perpindahan antara entri atau konten yang berurutan.

Manfaat Navigasi Next dan Previous

1. Pengorganisasian konten yang lebih baik: Navigasi berikutnya dan sebelumnya membantu mengurutkan konten Anda secara logis dan menyusunnya dalam urutan yang mudah diikuti oleh pengguna. Ini meningkatkan keteraturan dan membantu pengguna untuk menjelajahi informasi dengan urutan yang benar.

2. Meningkatkan keterlibatan pengguna: Dengan navigasi berikutnya dan sebelumnya yang ditempatkan dengan strategis, pengguna akan merasa lebih terhubung dengan konten Anda. Mereka akan lebih terdorong untuk melanjutkan membaca atau menjelajahi konten lain yang relevan. Ini membantu meningkatkan keterlibatan dan waktu yang dihabiskan pengguna di situs web Anda.

3. Meningkatkan peringkat SEO: Menyediakan navigasi yang baik dan pengalaman pengguna yang ditingkatkan juga dapat mempengaruhi peringkat Anda di mesin pencari. Ketika pengguna dapat dengan mudah berpindah antara halaman terkait, mesin pencari akan menganggap hal itu sebagai indikator bahwa situs web Anda memberikan pengalaman yang memuaskan.

Cara Memasang Navigasi Next dan Previous

Silahkan masuk ke blogspot dan buka menu Tema > Edit HTML salin kode dibawah ini dan tempelkan diatas 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 dibawah ini dan tempelkan dibawah kode <data:post.body/> lalu simpan

<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 mengubah text Terlama dan Terbaru silahkan ubah kode expr:value=‘data:messages.newest dan expr:value=’data:messages.oldest menjadi value=’custom teks’ contohnya dapat dilihat dibawah 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'/>

Oke mungkin hanya itulah cara mudah membuat navigasi Next dan Previous pada blogspot dan dengan cara ini Codepelajar yakin bahwa blog Anda akan SEO dengan baik.

Posting terkait:

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *