Cara Menambahkan Tombol Previous / Next Keren di Bawah Postingan Blog

AchehNetwork.com – Dalam artikel ini, kami akan menunjukkan kepada Anda bagaimana cara menambahkan tombol sebelumnya dan berikutnya (Previous / Next) di akhir setiap pos Blog.

Dengan begitu, pengguna dapat dengan mudah beralih ke artikel sebelumnya dan berikutnya dengan sekali klik.

Untuk melakukan hal ini, Anda perlu menemukan tempat yang tepat untuk menambahkan kode HTML dan CSS yang akan saya bagikan dalam artikel ini.

Ini akan membantu meningkatkan keterlibatan dalam pos blog Anda dan meningkatkan jumlah tampilan halaman secara keseluruhan di situs web Anda.

Dengan demikian, tingkat pentalan akan berkurang dan ini juga membantu dalam Optimisasi Mesin Pencari (SEO).

Ini membantu meningkatkan Lalu Lintas situs web Anda.

Jadi, mari ikuti langkah-langkah seperti yang ditunjukkan di bawah ini.

Langkah-langkah untuk Menambahkan Tombol Sebelumnya/Berikutnya (Previous / Next) di Blogger

1. Masuk ke dasbor Blogger Anda dan pilih opsi tema.

2. Sekarang cadangkan tema Anda dan klik pada bagian edit HTML.

3. Sekarang Anda perlu menemukan widget blog dan di bawah itu, Anda perlu menemukan kode ini <data:post.body/>

4. Sekarang tempelkan kode HTML di bawah kode tersebut.

<b:if cond=’data:blog.pageType == &quot;item&quot; ‘>
<div class=’K2_Pre_Next’>
<b:if cond=’data:olderPageUrl’>
<a class=’pre-btn’ expr:href=’data:olderPageUrl’>
<div class=’icon’><svg class=’h-6 w-6′ fill=’none’ stroke=’currentColor’ stroke-width=’2′ viewBox=’0 0 24 24‘ xmlns=’http://www.w3.org/2000/svg‘><path d=’M11 19l-7-7 7-7m8 14l-7-7 7-7′ stroke-linecap=’round’ stroke-linejoin=’round’/></svg></div><div class=’label’>Previous</div></a>
</b:if>
<b:if cond=’data:newerPageUrl’>
<a class=’next-btn’ expr:href=’data:newerPageUrl’>
<div class=’label’>Next</div>
<div class=’icon’><svg class=’h-6 w-6′ fill=’none’ stroke=’currentColor’ stroke-width=’2′ viewBox=’0 0 24 24‘ xmlns=’http://www.w3.org/2000/svg‘><path d=’M13 5l7 7-7 7M5 5l7 7-7 7′ stroke-linecap=’round’ stroke-linejoin=’round’/></svg></div></a>
</b:if>
</div>
</b:if>

/* CSS code for previous-Next button */
.K2_Pre_Next .icon {width: 20px;height: 20px;}
.K2_Pre_Next {display: flex;position: relative;margin-top: 24px;}
.K2_Pre_Next .pre-btn,.K2_Pre_Next .next-btn {display: flex;align-items: center;justify-content: center; gap: 8px;font-family: “Inter”, sans-serif;background: #ff1a75; color: #fff;text-decoration: none;padding: 8px 24px;font-size: 16px;min-width: 150px;box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;width: 50%;border-left:1px solid; border-right:1px solid;}
.K2_Pre_Next .pre-btn:hover,.K2_Pre_Next .next-btn:hover{background: #3a8f7b;}
.K2_Pre_Next .next-btn {position: absolute;right: 0;}
.K2_Pre_Next .pre-btn:hover .icon {animation: nav-prev-anim 300ms alternate infinite;}
.K2_Pre_Next .next-btn:hover .icon {animation: nav-next-anim 300ms alternate infinite;}
@keyframes nav-prev-anim { to {transform: translateX(4px);}}
@keyframes nav-next-anim {to {transform: translateX(-4px);}}

Dengan begitu, tombol Sebelumnya dan Berikutnya (Previous / Next) akan ditambahkan secara otomatis ke setiap pos blog Anda.

Kesimpulan

Kami harap artikel ini membantu Anda menambahkan tombol sebelumnya dan berikutnya (Previous / Next) ke situs web blogger Anda.(*)