Translate

Mengganti Nextprev dengan Angka di Blogger

Mengganti Nextprev dengan Angka di Blogger
nextprev Blogger <code>


Getcond Blogger, Bagaimana mengganti angka nextprev button di Blogger

nextprev number

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:

HTML
	  
<!-- 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>

HTML
<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:

HTML
<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!

Posting Komentar

0 Komentar


Followers