Getcond Blogger, Bagaimana mengganti nextprev button di Blogger
Membuat tombol "Next" dan "Previous" di Blogger bisa menjadi langkah penting untuk meningkatkan navigasi dan pengalaman pengguna. Dalam tutorial ini, kita akan menggunakan HTML, dan CSS untuk menciptakan tombol tersebut.
Persiapkan HTML
Tambahkan HTML berikut di dalam pos atau halaman Blogger Anda di mana Anda ingin menampilkan tombol "Next" dan "Previous": atau cari kode berikut di bawah widget type='Blog' di Tema Blogger anda:
<b:includable id='nextprev'>
<div class='blog-pager g3-margin' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link g3-button g3-hover-green g3-border' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><i class='fa fa-angle-double-left'/> Prev</a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link g3-button g3-hover-green g3-border' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>Next <i class='fa fa-angle-double-right'/></a>
</span>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:if cond='data:mobileLinkUrl'>
<div class='blog-mobile-link'>
<a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
</div>
</b:if>
</div>
<div class='clear'/>
</b:includable>
Sematkan Kode Font CSS
Sematkan kode css icon untuk icon prev dan next diantara <head></head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
Gaya CSS
Tambahkan gaya CSS berikut untuk merancang tampilan tombol:
<style>
<!-- sytle nextprev-->
.g3-margin {
margin: 16px!important
}
.g3-button {
border: none;
display: inline-block;
padding: 8px 16px;
vertical-align: middle;
overflow: hidden;
text-decoration: none;
color: inherit;
background-color: inherit;
text-align: center;
cursor: pointer;
white-space: nowrap
}
.g3-button:disabled {
cursor: not-allowed;
opacity: 0.3
}
.g3-button:hover {
color: #000!important;
background-color: #ccc!important
}
.g3-green,.g3-hover-green:hover {
color: #fff!important;
background-color: #4CAF50!important
}
.g3-border {
border: 1px solid #ccc!important
}
</style>
Kesimpulan
Dengan mengikuti langkah-langkah di atas, Anda dapat mengganti dengan tombol icon "Next" dan "Previous" ke halaman atau pos di Blogger Anda. Pastikan untuk memodifikasi CSS sesuai dengan preferensi desain Anda.
Jangan ragu untuk menyesuaikan gaya dan fungsionalitas tombol sesuai kebutuhan Anda. Semoga tutorial ini bermanfaat untuk meningkatkan navigasi di blog Anda!