Cara Membuat Navigasi Next dan Previous di Blog
1. Silahkan masuk kedalam Blogger.
2. Klik tanda samping SESUAIKAN, pilih Edit HTML.
3. Tekan Ctrl+F, lalu cari ]]></b:skin> atau </style>.
4. Copykan kode dibawah ini, dan letakan diatas 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}
5. Copykan kode dibawah ini, dan letakan tepat dibawah kode <data:post.body/>.
Note: Jika kamu pengguna median ui 1.7, bisa kamu letakan dibawah kode <b:include data='post' name='postBody'/>.
6. Simpan dan selesai.
7. Jika ingin mengubah teks terlama dan terbaru, ubah kode yang saya tandai diatas menjadi value='custom teks'. Seperti contoh 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'/>
8. Kamu juga bisa mengaturnya secara manual, dengan cara dibawah 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>
Sumber: https://www.wendycode.com/2023/04/navigasi-next-dan-previous-dengan-judul.html
Demikian artikel ini cara membuat navigasi next dengan previous dengan judul artikel. Jika ada yang ingin ditanyakan, silahkan tinggalkan komentar dibawah ini.