Cara Menambahkan Tombol Previous / Next Keren di Bawah Postingan Blog - Acheh Network

Cara Menambahkan Tombol Previous / Next Keren di Bawah Postingan Blog

Sabtu, 27 April 2024 - 15:52 WIB

facebook twitter whatsapp telegram line copy

URL berhasil dicopy

facebook icon twitter icon whatsapp icon telegram icon line icon copy

URL berhasil dicopy

Tombol Previous / Next di Blogger
Tampilan tombol Previous / Next

 

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

Baca Juga :  Cara Menghapus Malware dan Virus di HP Android dengan Aman

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>

5. Sekarang Anda perlu menambahkan kode CSS di bawah ini tepat di atas]]></b:skin> atau </style> dan simpan kode tema.

/* 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);}}

Baca Juga :  Rahasia Aman: Cara Mudah dan Rumit Mengubah Kode Sandi iPhone Kamu!

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.(*)

Editor : ADM

Sumber : techyleaf.in

Artikel Terkait

Optimalkan Kreativitas dengan AI: Solusi Mudah Membuat Ilustrasi Berkualitas Hanya dari Teks
Ini Dia 10 Deretan Smartphone dengan Skor AnTuTu Tertinggi 2024: Performa Unggul di Berbagai Kategori, HP Gaming Terbaik 2024
Jenis-Jenis Keyboard Berdasarkan Fungsinya
Jangan Penasaran Lagi! Inilah 11 Cara Melihat Pesan WhatsApp yang Sudah Dihapus
5 Jenis Aplikasi yang Sebaiknya Dihapus untuk Menghemat Penyimpanan di HP Android
Gampang Banget! Ini Cara Hapus Virus di Windows 10 dengan Cepat
4 Cara Mudah Membandingkan Perangkat Lunak Antivirus Sebelum Mengunduhnya
Cara Menghadapi Malware di Komputer: Tanda-tanda dan Cara Menghindarinya

           
Konten berikut adalah iklan platform MGID, media kami tidak terkait dengan materi konten tersebut
Konten berikut adalah iklan platform Recreativ, media kami tidak terkait dengan materi konten tersebut

Artikel Terkait

Minggu, 6 Oktober 2024 - 22:49 WIB

Optimalkan Kreativitas dengan AI: Solusi Mudah Membuat Ilustrasi Berkualitas Hanya dari Teks

Jumat, 27 September 2024 - 10:12 WIB

Ini Dia 10 Deretan Smartphone dengan Skor AnTuTu Tertinggi 2024: Performa Unggul di Berbagai Kategori, HP Gaming Terbaik 2024

Jumat, 27 September 2024 - 09:50 WIB

Jenis-Jenis Keyboard Berdasarkan Fungsinya

Sabtu, 21 September 2024 - 13:32 WIB

Jangan Penasaran Lagi! Inilah 11 Cara Melihat Pesan WhatsApp yang Sudah Dihapus

Jumat, 20 September 2024 - 16:24 WIB

5 Jenis Aplikasi yang Sebaiknya Dihapus untuk Menghemat Penyimpanan di HP Android

Kamis, 12 September 2024 - 23:45 WIB

Gampang Banget! Ini Cara Hapus Virus di Windows 10 dengan Cepat

Kamis, 12 September 2024 - 23:35 WIB

4 Cara Mudah Membandingkan Perangkat Lunak Antivirus Sebelum Mengunduhnya

Kamis, 12 September 2024 - 23:27 WIB

Cara Menghadapi Malware di Komputer: Tanda-tanda dan Cara Menghindarinya

Berita Terkini