Getcond Blogger, Bagaimana mengganti angka 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:
<!-- Custom Nexprev Angka/ Number -->
<b:includable id='nextprev'>
<div class='blog-pager g3-center' id='blog-pager' style="padding-bottom:24px!important">
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link g3-bar-item g3-button g3-hover-green' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><i class='fa fa-angle-double-left'/></i></a>
</span>
</b:if>
<!-- Button Number -->
<a href="#" target="_blank" class="g3-bar-item g3-green g3-button">1</a>
<a href="#" target="_blank" class="g3-bar-item g3-button g3-hover-green">2</a>
<a href="#" target="_blank" class="g3-bar-item g3-button g3-hover-green">3</a>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link g3-bar-item g3-button g3-hover-green' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><i class='fa fa-angle-double-right'/></i></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 angka/ number:
<style>
<!-- sytle nextprev number -->
.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-center {
text-align: center!important
}
.g3-bar {
width: 100%;
overflow: hidden
}
.g3-clear:after, .g3-clear:before, .g3-bar:before, .g3-bar:after {
content:"";
display:table;
clear:both
}
.g3-bar .g3-bar-item {
padding: 8px 16px;
float: left;
width: auto;
border: none;
display: block;
outline: 0
}
.g3-green,.g3-hover-green:hover {
color: #fff!important;
background-color: #4CAF50!important
}
</style>
Kesimpulan
Dengan mengikuti langkah-langkah di atas, Anda dapat mengganti dengan tombol number + 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!